[目次]
タッチ入力に反応しよう | Webプログラミング!
説明
以下のサンプルでは, スクリーン上をタッチしてね
Google Chrome でtouchを正確に再現するには, ディベロッパーツールで, ページ上の辺の設定で, スマホなどのデバイスを選びます. または Responsive - Mobile とします(設定のSensorsでTouchがDevice-basedとなっているのが前提です).
設定のSensorsでTouchをForce Enabledとしてもいいです.
タッチ入力のサンプル
タッチ入力のサンプルtouch2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="touch2.js"></script>
</head>
<body>
</body>
</html>
touch2.js
enchant();
window.onload = function() {
var game = new Game(320,320);
var counter=0;
game.fps = 16;
game.preload('chara1.png');
game.onload = function() {
var bear = new Sprite(32,32);
bear.image = game.assets['chara1.png'];
game.rootScene.addChild(bear);
bear.frame = 7;
game.rootScene.addEventListener('touchstart', // 'touchend', 'touchmove'
function(e){
bear.moveTo(e.x,e.y);
}
);
};
game.start();
};
EventListnerとして設定する関数の引数のオブジェクトでtouchした位置が渡されます..
タッチ入力のサンプル
タッチ入力のサンプルtouch3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="touch3.js"></script>
</head>
<body>
</body>
</html>
touch3.js
enchant();
window.onload = function() {
var game = new Game(320,320);
var counter=0;
game.fps = 16;
game.preload('chara1.png');
game.onload = function() {
var bear = new Sprite(32,32);
bear.image = game.assets['chara1.png'];
game.rootScene.addChild(bear);
bear.frame = 7;
bear.x=160;
bear.y=160;
bear.addEventListener('touchstart', // 'touchend', 'touchmove'
function(e){
this.moveTo(this.x+(Math.random()*2-1)*20,this.y+(Math.random()*2-1)*20);
}
);
};
game.start();
};
SpriteのEventListenerで設定した例です.
タッチ入力のサンプル
タッチ入力のサンプルtouch4.html
g<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="touch4.js"></script>
</head>
<body>
</body>
</html>
touch4.js
enchant();
window.onload = function() {
var game = new Game(320,320);
var counter=0;
game.fps = 16;
game.preload('chara1.png');
game.onload = function() {
var bear = new Sprite(32,32);
bear.image = game.assets['chara1.png'];
game.rootScene.addChild(bear);
bear.frame = 7;
bear.x=160;
bear.y=160;
bear.ontouchstart=function(e){
this.moveTo(this.x+(Math.random()*2-1)*20,this.y+(Math.random()*2-1)*20);
};
}
game.start();
};
Spriteのontouchstart変数に関数を代入した例です.
タッチ入力のサンプル
タッチ入力のサンプルtouch5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="touch5.js"></script>
</head>
<body>
</body>
</html>
touch5.js
enchant();
window.onload = function() {
var game = new Game(320,320);
var counter=0;
game.fps = 16;
game.preload('chara1.png');
game.onload = function() {
var bear = new Sprite(32,32);
bear.image = game.assets['chara1.png'];
game.rootScene.addChild(bear);
bear.frame = 7;
bear.x=160;
bear.y=160;
var lab = new Label();
game.rootScene.addChild(lab);
lab.x=10;
lab.y=10;
lab.text="タッチの座標";
game.rootScene.addEventListener('touchstart', // 'touchend', 'touchmove'
function(e){
lab.text="("+e.x+","+e.y+")";
}
);
bear.addEventListener('touchend',
function(e){
this.frame = 10-this.frame;
}
);
}
game.start();
};
Labelのテキストに座標を表示する例です.
タッチ入力のサンプル
タッチ入力のサンプルtouch1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Test of Enchant.js</title>
<style type="text/css">
body { margin: 0; }
</style>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="plugins/ui.enchant.js"></script>
<script type="text/javascript" src="touch1.js"></script>
</head>
<body>
</body>
</html>
touch1.js
enchant();
window.onload = function() {
var game = new Game(320,320);
var counter=0;
game.fps = 16;
game.onload = function() {
game.rootScene.addEventListener('touchstart', // 'touchend', 'touchmove'
function(e){
var lab = new Label(""+counter);
counter++;
lab.font="32px monospace";
lab.color="rgb(128,128,128)";
lab.moveTo(e.x,e.y);
game.rootScene.addChild(lab);
lab.addEventListener('touchstart',
function(e){
game.rootScene.removeChild(this);
}
);
}
);
};
game.start();
};
少し複雑な例. addChild, RemoveChild, label も使っています.
