enchant.jsのSpriteを複数操作します。
enchant.jsで複数のSpriteを動かす
ドロイド君が１０体のペアで画面を斜めに移動し続けます。
まずは表示用のHTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
body { margin: 0; }
</style>
<script src="../js/enchant.min.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
enchant.jsの読み込みはそれぞれのフォルダー形式に合わせてください。
実際の処理部分。
enchant() ; // ライブラリの初期化
window.onload = function()
{
var x1 = 1 ;
var y1 = -1 ;
var x2 = 1 ;
var y2 = -1 ;
//使用する画像のファイル名
var pic_name = "../img/droid.png" ;
//320×240ピクセルサイズの画面(Canvas)を作成する
var game = new Game( 320, 240 ) ;
//フレームレートの設定する
game.fps = 70 ;
//画像データをあらかじめ読み込ませる
game.preload( pic_name ) ;
//データの読み込みが完了したら処理
game.onload = function(){
//ドロイド君軍団を作る
var droid = new Array() ;
var i ;
for( i = 0 ; i < 20 ; i++ ){
//Spriteを作成する
droid[ i ] = new Sprite( 32, 32 ) ;
droid[ i ].image = game.assets[ pic_name ] ;
if( i < 10 ){ //最初の軍団
droid[ i ].x = 20 + ( i * 10 ) ;
droid[ i ].y = game.height - droid[ i ].height - ( i * 2 );
}
else{ //次のの軍団
droid[ i ].x = 20 + ( i * 10 ) ;
droid[ i ].y = droid[ i ].height + ( i * 2 ) ;
}
droid[ i ].scale( 0.5, 0.5 ) ; //画像ちょっと縮小
droid[ i ].x1 = 1 ;
droid[ i ].y1 = -1 ;
game.rootScene.addChild( droid[ i ] ) ;
// フレームイベントが発生したら処理
droid[ i ].addEventListener( Event.ENTER_FRAME, function(){
// ドロイド君斜めに移動してみる
if( this.y == 0 || this.y > game.height - this.height ){
this.y1 *= -1 ;
}
if( this.x == 0 || this.x > game.width - this.width ){
this.x1 *= -1 ;
}
this.y = this.y + this.y1 ;
this.x = this.x + this.x1 ;
});
}
}
game.start() ; // ゲーム処理開始
}
Spriteを保存するエリアを配列で作成します。
var droid = new Array() ;
生成したSprite分、イベントリスナーを設定します。
// フレームイベントが発生したら処理
droid[ i ].addEventListener( Event.ENTER_FRAME, function(){
// ドロイド君斜めに移動してみる
if( this.y == 0 || this.y > game.height - this.height ){
thisがミソです。
ドロイド君が軍団で移動します。
実際の動作はここをクリック。
