タッチ入力に反応しよう | Webプログラミング!

Time-stamp: "2016-10-27 Thu 08:11 JST hig"

説明

以下のサンプルでは, スクリーン上をタッチしてね

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 も使っています.

このサイトのコンテンツ

https://hig3.net

Saburo Higuchi 樋口三郎 hig's mail address

https://www.data.math.ryukoku.ac.jp/