enchant.jsで複数のSpriteを動かしてみる

記事内に広告が含まれています。

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&#91; i &#93; = new Sprite( 32, 32 ) ;
            droid&#91; i &#93;.image = game.assets&#91; pic_name &#93; ;
            if( i < 10 ){    //最初の軍団
                droid&#91; i &#93;.x = 20 + ( i * 10 ) ;
                droid&#91; i &#93;.y = game.height - droid&#91; i &#93;.height - ( i * 2 );
            }
            else{             //次のの軍団
                droid&#91; i &#93;.x = 20 + ( i * 10 ) ;
                droid&#91; i &#93;.y = droid&#91; i &#93;.height + ( i * 2 ) ; 
            }
            droid&#91; i &#93;.scale( 0.5, 0.5 ) ;    //画像ちょっと縮小
            droid&#91; i &#93;.x1 = 1 ;
            droid&#91; i &#93;.y1 = -1 ;
            game.rootScene.addChild( droid&#91; i &#93; ) ;

            // フレームイベントが発生したら処理
            droid&#91; i &#93;.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がミソです。

ドロイド君が軍団で移動します。

実際の動作はここをクリック。

スポンサーリンク
スポンサーリンク
【PR】
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
タイトルとURLをコピーしました