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(){

        //1つ目の集団を作る
        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 ;
            droid&#91; i &#93;.counter = 0 ;
            game.rootScene.addChild( droid&#91; i &#93; ) ;

            // フレームイベントが発生したら処理
            droid&#91; i &#93;.addEventListener( Event.ENTER_FRAME, function(){
                if( this.counter % 2 === 0) {
                    // ドロイド君斜めに移動してみる
                    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 ;
                }
                else{
                    // ドロイド君回転
                    this.rotate( 8 ) ;
                }
                this.counter++ ;
            });
        }
    }
    game.start() ;    // ゲーム処理開始
}

なぜかわかりませんが「移動して回転」と同時にできなかったので、
「移動」と「回転」を1フレームごとに繰り返します。

ドロイド君が軍団で回転しながら移動します。

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

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