複数キャラクターの扱い | Webプログラミング!

Time-stamp: "2014-11-06 Thu 09:29 JST hig"

単純な方法

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

multi1.js

enchant();

window.onload = function() {
  var game = new Game(320,320);
  var counter=0;

  game.fps = 16;
  game.preload('chara1.png');
  game.preload('effect0.png');

  game.onload = function() {
    var message = new Label("上下左右キー");
    message.font="16px monospace";
    message.color="rgb(128,128,128)";
    game.rootScene.addChild(message);

    var bear = new Sprite(32,32);
    bear.image = game.assets['chara1.png'];
    bear.frame = 7;
    game.rootScene.addChild(bear);
    bear.moveTo(160,280);
    d=10;

    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);
	} 
      }
			  );

    var bullet1 = new Sprite(16,16);
    bullet1.image = game.assets['effect0.png'];
    bullet1.frame = 0;
    bullet1.s=0;
    bullet1.y=-30;
    bullet1.visible=false;
    game.rootScene.addChild(bullet1);
    bullet1.addEventListener(Event.ENTER_FRAME, 
			  function() {
	this.moveBy(0,-this.s);
	if( this.y < 0 ){
	  this.visible=false;
	  this.s=0;
	}
      }
			     );


    var bullet2 = new Sprite(16,16);
    bullet2.image = game.assets['effect0.png'];
    bullet2.frame = 2;
    bullet2.s=0;
    bullet2.y=-30;
    bullet2.visible=false;
    game.rootScene.addChild(bullet2);
    bullet2.addEventListener(Event.ENTER_FRAME, 
			  function() {
	this.moveBy(0,-this.s);
	if( this.y < 0 ){
	  this.visible=false;
	  this.s=0;
	}
      }
			     );

    game.addEventListener(Event.ENTER_FRAME, 
			  function(){
	var input=game.input;
	if( input.up && !bullet1.visible){
	  bullet1.visible=true;
	  bullet1.s=15;
	  bullet1.moveTo(bear.x,bear.y-10);
	} 
	if ( input.down && !bullet2.visible){
	  bullet2.visible=true;
	  bullet2.s=15;
	  bullet2.moveTo(bear.x,bear.y-10);
	} 
      }
  );
    };
  game.start();
};

配列利用

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

multi2.js

enchant();

window.onload = function() {
  var game = new Game(320,320);
  var counter=0;

  game.fps = 16;
  game.preload('chara1.png');
  game.preload('effect0.png');

  game.onload = function() {
    var message = new Label("上下左右キー");
    message.font="16px monospace";
    message.color="rgb(128,128,128)";
    game.rootScene.addChild(message);

    var bear = new Sprite(32,32);
    bear.image = game.assets['chara1.png'];
    bear.frame = 7;
    game.rootScene.addChild(bear);
    bear.moveTo(160,280);
    d=10;

    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);
	} 
      }
			  );
    var nb=10;
    var bullet = [];
    for(i=0; i<nb; i++){
      bullet[i]=new Sprite(16,16);
      bullet[i].image = game.assets['effect0.png'];
      bullet[i].frame = 0;
      bullet[i].s=0;
      bullet[i].visible=false;

      game.rootScene.addChild(bullet[i]);

      bullet[i].addEventListener(Event.ENTER_FRAME, 
				 function() {
	this.moveBy(0,-this.s);
	if( this.visible && this.y < 10 ){
	  this.s=0;
	  this.visible=false;
	}
      }
			     );

    }
  game.addEventListener(Event.ENTER_FRAME, 
			  function(){
      var input=game.input;
      if( input.up ){
	for(i=0;i<nb; i++){
	  if(!bullet[i].visible){
	    bullet[i].visible=true;
	    bullet[i].s=15;
	    bullet[i].moveTo(bear.x+i,bear.y-10);
	    break;
	  }
	}
      }
    }
			);

  };

  game.start();
};

配列利用

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

multi4.js

enchant();

window.onload = function() {
  var game = new Game(320,320);
  var counter=0;

  game.fps = 16;
  game.preload('chara1.png');
  game.preload('effect0.png');

  game.onload = function() {
    var message = new Label("上下左右キー");
    message.font="16px monospace";
    message.color="rgb(128,128,128)";
    game.rootScene.addChild(message);

    var bear = new Sprite(32,32);
    bear.image = game.assets['chara1.png'];
    bear.frame = 7;
    game.rootScene.addChild(bear);
    bear.moveTo(160,280);
    d=10;

    bear.onenterframe=function() {
	var input=game.input;
	if( input.left ){
	  this.moveBy(-d,0);
	} else if ( input.right ){
 	  this.moveBy(+d,0);
	} 
    };

    var nb=10;
    var bullet = [];
    for(i=0; i<nb; i++){
      bullet[i]=new Sprite(16,16);
      bullet[i].image = game.assets['effect0.png'];
      bullet[i].frame = 0;
      bullet[i].s=0;
      bullet[i].visible=false;

      game.rootScene.addChild(bullet[i]);

      bullet[i].onenterframe=function() {
	this.moveBy(0,-this.s);
	if( this.visible && this.y < 10 ){
	  this.s=0;
	  this.visible=false;
	}
      };
    }
  game.onenterframe=function(){
      var input=game.input;
      if( input.up ){
	for(i=0;i<nb; i++){
	  if(!bullet[i].visible){
	    bullet[i].visible=true;
	    bullet[i].s=15;
	    bullet[i].moveTo(bear.x+i,bear.y-10);
	    break;
	  }
	}
      }
    };
  };

  game.start();
};

addEventListenerでなく, 変数 onevent にメソッド代入

クラス定義

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

multi3.js

enchant();

var game;
var by=280;


//Bulletクラス
Bullet = Class.create(Sprite, // Sprite を継承
{
    // メソッド名: 定義		      
  initialize:	function(x,y){ // 引数の与え方は自由
    Sprite.call(this,16,16);
    this.image = game.assets['effect0.png'];
    this.frame = 0;
    this.visible=false;
    this.x=x;
    this.y=y;
    this.s=0;
  },	     
  onenterframe:  function(){
      this.moveBy(0,-this.s);
      if( this.visible && this.y < 10 ){
	this.s=0;
	this.visible=false;
      }
  },
  shoot: function(x){
    this.visible=true;
    this.s=15;
    this.moveTo(x,by-10);
  }
}
);


window.onload = function() {
//  var game = new Game(320,320);
  game = new Game(320,320);

  game.fps = 16;
  game.preload('chara1.png');
  game.preload('effect0.png');

  game.onload = function() {
    var message = new Label();
    message.font="16px monospace";
    message.color="rgb(128,128,128)";
    message.text="上下左右キー";
    game.rootScene.addChild(message);

    var bear = new Sprite(32,32);
    bear.image = game.assets['chara1.png'];
    bear.frame = 7;
    game.rootScene.addChild(bear);
    bear.moveTo(160,by);
    d=10;


    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);
	} 
      }
			  );
    var nb=10;
    var bullet = [];
    for(i=0; i<nb; i++){
      bullet[i]=new Bullet(0,0);
      game.rootScene.addChild(bullet[i]);
    }

    game.addEventListener(Event.ENTER_FRAME, 
			  function(){
      var input=game.input;
      if( input.up ){
	for(i=0;i<nb; i++){
	  if(!bullet[i].visible){
	    bullet[i].shoot(bear.x);
	    break;
	  }
	}
      }
    }
			);

  };

  game.start();
};

このサイトのコンテンツ

https://hig3.net

Saburo Higuchi 樋口三郎 hig's mail address

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