オブジェクト指向と enchant.js のクラス | Webプログラミング!

Time-stamp: "2016-11-24 Thu 08:08 JST hig"

説明

クラスを使わないタッチ入力のサンプル

クラスを使わないタッチ入力のサンプル

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

class1.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();
};

以前と同じ, クラスを使わない例です.

クラスを使ったタッチ入力のサンプル

クラスを使ったタッチ入力のサンプル

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

class2.js

enchant();

var game;
var counter=0;

NumLabel = Class.create(Label,
{
  initialize: function(x,y){
    Label.call(this,""+counter);
    this.x=x;
    this.y=y;
    this.font="32px monospace";
    this.color="rgb(128,128,128)";
    this.counter=counter;
    counter++;
  },

  ontouchstart: function(e){
      game.rootScene.removeChild(this);
// or 
//    this.counter++;
//    this.text=""+this.counter;
// こちらの場合, 結果としては, rootScene.ontouchstart も実行される
}
}
);

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

  game.fps = 16;
  game.onload = function() {
    game.rootScene.ontouchstart=function(e){
	var lab=new NumLabel(e.x,e.y);
	game.rootScene.addChild(lab);
      };
  };
  game.start();
};

クラスで書きかえました.

多数キャラクタのクラスによる実装例

多数キャラクタのクラスによる実装例

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

class3.js

enchant();

var game;

var width=320;
var height=320;


NumLabel = Class.create(Label,
{
  initialize: function(x,y,label){
    Label.call(this,label);
    this.moveTo(x,y);
    this.font="16px monospace";
    this.color="rgb(128,128,128)";
  },
  onenterframe: function(){
    this.x=(this.x+5*(2*Math.random()-1)+width)%width;
    this.y=(this.y+5*(2*Math.random()-1)+height)%height;
  },
  ontouchstart: function(e){
    game.rootScene.removeChild(this);
  }
}
);

window.onload = function() {
  game = new Game(width,height);

  game.fps = 16;
  game.onload = function() {
    for(var i=0;i<30;i++){
      game.rootScene.addChild(new NumLabel(width*Math.random(),height*Math.random(),""+i));
    }
  };
  game.start();
};

テトリスで積もった玉のクラスによる実装例

テトリスで積もった玉のクラスによる実装例

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

class5.js

enchant();

window.onload = function() {
    var game = new Game(320,320);
    game.fps = 16;
    game.preload('map0.png');

    var g;
    
    Stone=Class.create(Sprite,{
	initialize: function(i,j){
	    Sprite.call(this,16,16);
	    this.image = game.assets['map0.png'];
	    this.frame = 27;
	    this.moveTo(16*i,320-16*j);
	},
	ontouchend: function(){
	    this.visible=false;
	}
    }
		      );


    
    game.onload = function() {

	g=new Array();
	
	for(var i=0; i<20; i++){ // x
	    g[i]=new Array();
	    for(var j=0; j<10; j++){ // y
		g[i][j]=new Stone(i,j);
 		this.rootScene.addChild(g[i][j]);
	    }
	}

	g[0][3].visible=false;
	g[2][5].visible=false;

	la=new Label();
	game.rootScene.addChild(la);
	
	this.onenterframe =function() {
	    var j=(Math.floor(Math.random()*10));
	    g[(Math.floor(Math.random()*20))][j].visible=false;

	    la.text="";

	    // 毎フレームでなくても消すたびにその行をチェックすれば十分.
	    var flag=true;
	    for(var i=0;i<20;i++){
		flag=flag & !g[i][j].visible;
	    }
	    if(flag){ // 2度目以降の表示はいいかげん
		la.text+=(""+j+"番目の行が消えた!");	
	    }
	};

	
    };

    game.start();
};

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net