気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【メモ】楽しいenchant.js-part13

体力ゲージみたいなサンプルを作った

enchant.js便利!   コードにかかった時間はおおよそ20分くらい。

ラベルをクリックすると、ハートが増えたり減ったりする。

用途としては、ゲームの体力ゲージの表示と操作。

コードのクラス構成

  • ゲームで利用するアイコンクラス(GameIcon)
  • ハートアイコン用のクラス(LifeGageIcon)
  • ハートアイコンをゲージとして表示するクラス(LifeGageArea)
enchant();

var GameIcon = enchant.Class.create(enchant.Sprite, {
    initialize: function(x, y, frame) {
        enchant.Sprite.call(this, 16, 16);
        this.x = x;
        this.y = y;
        this.image = game.assets['http://enchantjs.com/assets/images/icon0.gif'];
        this.frame = frame;
        
        game.rootScene.addChild(this);
    },
    remove: function() {
        game.rootScene.removeChild(this);
    }
});

var LifeGageIcon = enchant.Class.create(GameIcon, {
    initialize: function(x, y) {
        // 第3引数にはフレーム(ハート)を指定
        GameIcon.call(this, x, y, 10);
    }
});


var LifeGageArea = enchant.Class.create(enchant.Sprite, {
    initialize: function(x, y) {
        enchant.Sprite.call(this, 16*game.life, 16);
        this.x = x;
        this.y = y;
        
        this.life_list = [];
        for(var i = 0; i < game.life; i++) {
            this.life_list[i] = new LifeGageIcon(x+i*16, y);
        }
        
        game.rootScene.addChild(this);
        
    },
    decrease: function() {
        if(game.life > 0) {
            this.life_list[game.life-1].remove();
            delete this.life_list[game.life-1];
            game.life -= 1;
        }    
    },
    increase: function() {
        this.life_list[game.life] = new LifeGageIcon(this.x + game.life*16, this.y);
        game.life += 1;
    }
});

window.onload = function() {
    game = new Game(320, 320);
    game.fps = 16;
    
    game.life = 5;
    
    game.preload('http://enchantjs.com/assets/images/icon0.gif');
    
    game.onload = function() {
        life_gage_area = new LifeGageArea(0, 0);
        
        label = new Label("クリックで減らす");
        label.y = 32;
        label.addEventListener("touchend", function(){
            life_gage_area.decrease();
        });        
        
        label_recover = new Label("クリックで回復");
        label_recover.y = 64;
        label_recover.addEventListener("touchend", function() {
            //game.life = 5;
            life_gage_area.increase();
        });

        
        game.rootScene.addChild(label);
        game.rootScene.addChild(label_recover);
        
    };
    
    game.start();
    
};