enchant.js: Step2 – 表示したスプライトを動かしてみよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

ここでは, スプライトを動かしてみます.

SAMPLE

サンプルはこちらで見るこができます.

CODE

Entityクラス(スプライトやラベルなど)にイベントを登録

this.addEventListener(イベント名, イベント時に呼び出したい関数);
    

移動

// 移動
this.moveBy(移動したいx座標値, 移動したいy座標値);
    

コード全体

前回のStepから追加, 修正した箇所は太字になっています.

// enchant 初期化(global 領域に enchant を追加)
enchant();

/**
 * ロード
 */
window.onload = function()
{
    // ゲームクラスを生成
    var game = new Game(320, 320);
    
    game.onload = function(){
        // エネミーを生成
        for (var i=0; i<8; ++i) {
            var enemy = new EnemySprite();
            enemy.x = Math.random()*320;
            enemy.y = Math.random()*320;
            game.rootScene.addChild(enemy);
        }
    }
    
    // 背景表示
    game.rootScene.backgroundColor = 'rgb(240, 255, 255)';
    game.start();
}


/**
 * @scope   ArcSprite.prototype
 */
var ArcSprite = Class.create(Sprite, {
    /**
     * 円弧スプライトクラス
     * @memo    enchant の Sprite クラスを継承
     */
    initialize : function(radius){
        // 親のコンストラクタを呼び出す
        Sprite.call(this, radius*2, radius*2);
        
        // サーフィスを生成
        var surface = new Surface(radius*2, radius*2);
        var c = surface.context
        // サーフィスに円を描画
        c.fillStyle = "rgb(255, 0, 0)";
        c.beginPath();
        c.arc(radius, radius, radius, 0, Math.PI*2, true);
        c.fill();
        
        // スプライトにサーフィスをイメージとして登録
        this.image = surface;
    }
});

/**
 * @scope   EnemySprite.prototype
 */
var EnemySprite = Class.create(ArcSprite, {
    /**
     * エネミースプライトクラス
     */
    initialize : function(){
        // 親のコンストラクタを呼び出す
        ArcSprite.call(this, EnemySprite.RADIUS);
        
        // フレームイベントを登録
        this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
        
        
        // 移動する向きを設定(360度ランダムな方向に ENEMY_SPEED ずつ進む)
        var rad = Math.random()*360 * Math.PI/180;
        this.vx = Math.cos(rad) * EnemySprite.SPEED;
        this.vy =-Math.sin(rad) * EnemySprite.SPEED;
        
        // エフェクトと重複した際にタッチがきかなくなるので手前に表示するよう修正
        this._element.style.zIndex = 4;
    },
    
    onEnterFrame : function(){
        var scene = this.parentNode;
        // 移動
        this.moveBy(this.vx, this.vy);
        // スプライトの上下左右位置
        var left    = this.x;
        var right   = this.x + this.width;
        var top     = this.y;
        var bottom  = this.y + this.height;
        // はみ出た際の処理
        if (left   < 0) { this.x = 0; this.vx*=-1; }
        if (top    < 0) { this.y = 0; this.vy*=-1; }
        if (right  > scene.width) { this.x = scene.width -this.width;  this.vx*=-1; }
        if (bottom > scene.height){ this.y = scene.height-this.height; this.vy*=-1; }
    }
    
});
// static 
EnemySprite.RADIUS = 16;
EnemySprite.SPEED = 2;
    

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。