キー入出力に反応しよう | Webプログラミング!

Time-stamp: "2014-10-14 Tue 19:08 JST hig"

矢印キー入力のサンプル

矢印キー入力のサンプル

input1.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="input1.js"></script>
  </head>
  <body>
  </body>
</html>

input1.js

enchant();

window.onload = function() {
    var game = new Game(320,320);
    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;
	var d=2;
	var s=2;

	bear.moveTo(30,50);
	bear.addEventListener(Event.ENTER_FRAME, 
			      function() {
				  var input=game.input;
				  if( input.left ){
				      this.moveBy(-d,0);
				  } else if ( input.right ){
 				      this.moveBy(+d,0);
				  } else if ( input.up ){
				      this.moveBy(0,-d);
				  } else if ( input.down ){
				      this.moveBy(0,+d);
				  } else if ( input.a ){
				      this.scaleX*=2;
				  } else if ( input.b ){
				      this.scaleX*=-1;
				  }
			      }
			     );

    };

    game.start();
};

キーバインド, パッド入力のサンプル

キーバインド, パッド入力のサンプル

input2.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">
    <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="input2.js"></script>
  </head>
  <body>
  </body>
</html>

input2.js

enchant();

window.onload = function() {
    var game = new Game(320,320);
    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;
	var d=2;
	var s=2;


	game.keybind('X'.charCodeAt(0),'a');
	game.keybind('Y'.charCodeAt(0),'b');
	game.keybind('D'.charCodeAt(0),'right');

	var pad = new Pad();
	pad.moveTo(0,200);
	game.rootScene.addChild(pad);


//	bear.x=30;
//	bear.y=50;
	bear.moveTo(30,50);

	bear.addEventListener(Event.ENTER_FRAME, 
			      function() {
				  var input=game.input;
				  if( input.left ){
				      this.moveBy(-d,0);
				  } else if ( input.right ){
 				      this.moveBy(+d,0);
				  } else if ( input.up ){
				      this.moveBy(0,-d);
				  } else if ( input.down ){
				      this.moveBy(0,+d);
				  } else if ( input.a ){
				      this.scaleX*=2;
				  } else if ( input.b ){
				      this.scaleX*=-1;
				  }
			      }
			     );

    };

    game.start();
};

アナログパッドのサンプル

アナログパッドのサンプル

input3.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="input3.js"></script>
  </head>
  <body>
  </body>
</html>

input3.js

enchant();

window.onload = function() {
  var game = new Game(320,320);
  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;

    var ap = new APad();
    ap.moveTo(0,200);
    game.rootScene.addChild(ap);

    bear.moveTo(30,50);

    bear.addEventListener(Event.ENTER_FRAME, 
      function() {
	this.moveBy(ap.vx,ap.vy);
      }
			  );

  };

  game.start();
};

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net