Spriteを動かしてみる

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

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 x = 1 ;
    var y = -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(){
        //Spriteを作成する
        var droid = new Sprite( 32, 32 ) ;
        droid.image = game.assets[ pic_name ] ;
        droid.x = 20 ;
        droid.y = game.height - droid.height ;
        droid.scale( 0.5, 0.5 ) ;    //画像ちょっと縮小
        game.rootScene.addChild( droid ) ;

        // フレームイベントが発生したら処理
        droid.addEventListener( Event.ENTER_FRAME, function(){
            // ドロイド君斜めに移動してみる
            if( droid.y == 0 || droid.y > game.height - droid.height ){
                y *= -1 ;
            }
            if( droid.x == 0 || droid.x > game.width - droid.width ){
                x *= -1 ;
            }
            droid.y = droid.y + y ;
            droid.x = droid.x + x ;
        });
    }
    game.start() ;    // ゲーム処理開始
}

Spriteを生成して、少しつづ斜めにドロイド君を移動。
端まできたら反転。
これを繰り返し。

タイトルとURLをコピーしました