enchant.jsのSpriteを複数操作します。
enchant.jsで複数のSpriteを動かす
ドロイド君が10体のペアで画面を斜めに移動し続けます。
まずは表示用の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がミソです。
ドロイド君が軍団で移動します。
実際の動作はここをクリック。