enchant.js：カウントダウンバー

enchant.jsを使って、棒状の画像を伸縮させることでカウントダウンを知らせるバーに見えるものを作った。
時間は1秒単位で表示し、バーは徐々に短くなって見えるようにした。

クリックして別ウインドウで表示

ダウンロード

// -------------------------------------------------------------------------
//  enchant.js カウントダウンバー
// 					created at 2013-08-20 on MRGARITA.NET
// -------------------------------------------------------------------------
/*
 * 必須
 */
enchant();

/*
 * 定数
 */
var SCREEN_WIDTH = 320;		// 幅
var SCREEN_HEIGHT = 320;		// 高さ

/*
 * グローバル変数
 */
var game = null;
var nowTime;			// 現在時刻
var startTime;			// スタート時刻
// 定数
var IMG_BAR = "bar.png";
var COUNTDOWN = 10;			// カウントダウン秒数

/*
 * 汎用処理
 */
// 乱数生成（最大値-最小値）
var rnd = function(min, max){
	return Math.floor(Math.random() * (max-min)+min);
};

/*
 * バークラス
 */
var Bar = Class.create(Sprite, {
	initialize: function(){
		Sprite.call(this, 32, 32);
		this.image = game.assets[IMG_BAR];
		this.moveTo(0, SCREEN_HEIGHT/2);
		this.zobun = game.width / (COUNTDOWN*10);	// 増分幅の設定（100分の1秒用に10を掛けている）
		console.log("増分=" + this.zobun);
		this.timer = game.frame + this.zobun;
		this.width = SCREEN_WIDTH;
		this.update = this.countdown;
	},
	reset: function(){
		this.timer = game.frame + this.zobun;
		this.width = SCREEN_WIDTH;
		this.update = this.countdown;
	},
	countdown: function(){
		if(game.frame > this.timer){
			this.width -= this.zobun;
			if(this.width < this.zobun) this.width = 1;
			this.timer += this.zobun;
		}
		if(this.width <= 1){
			this.update = this.stop;
		}
	},
	stop: function(){
		game.rootScene.backgroundColor = "red";
	},
	onenterframe: function(){
		this.update();
	},
});

/*
 * 秒数ラベルクラス
 */
var LabelTime = Class.create(Label, {
	initialize: function(){
		Label.call(this);
		this.moveTo(SCREEN_WIDTH/2-64, SCREEN_HEIGHT/2-32);
		this.font = "64px 'メイリオ', 'Osaka' ";
		this.color = "#fff";
		this.opacity = 0.6;
		startTime = new Date().getTime();
		this.update = this.countdown;
	},
	reset: function(){
		startTime = new Date().getTime();
		this.update = this.countdown;
	},
	countdown: function(){
		nowTime = new Date().getTime();
		var leftTime = COUNTDOWN - (nowTime - startTime)/1000;
		leftTime = Math.round(leftTime);
		this.text = leftTime + "秒";
		if(leftTime <= 0){
			this.update = this.stop;
		}
	},
	stop: function(){
	},
	onenterframe: function(){
		this.update();
	},
});

/*
 * メイン
 */

window.onload = function(){
	// ゲームオブジェクト生成
	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);
	
	// 画像の読み込み
	game.preload("bar.png");
	
	// ゲーム開始時の処理
	game.onload = function(){
		var scene = game.rootScene;
		scene.backgroundColor = "skyblue";
		
		// バーの生成と表示
		var bar = new Bar();
		scene.addChild(bar);
		
		// 秒数ラベルの生成と表示
		var labelTime = new LabelTime();
		scene.addChild(labelTime);
		
		// シーン更新時の処理
		scene.onenterframe = function(){
		};
		// シーンタッチ時の処理
		scene.ontouchstart = function(){
			// バーをリセット
			scene.backgroundColor = "skyblue";
			bar.reset();
			labelTime.reset();
		};
	};
	game.start();
};