[目次]
オブジェクト指向と enchant.js のクラス | Webプログラミング!
説明
クラスを使わないタッチ入力のサンプル
クラスを使わないタッチ入力のサンプル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();
};
