[enchant.js] ラベルを利用してみる

テキストに倣って、enchant.jsでラベルを利用してランダムにスコアを表示するコードを書いてみました。

 

作ったデモサイト

 

 

	//ゲームオブジェクトの生成
	var game = new Game(320, 320);

ゲームオブジェクトは、ゲームの画面サイズやフレームレート、シーンなどを管理するオブジェクトです。
生成するにはenchant.jsで用意されているGameオブジェクトを使い、引数として画面サイズを指定します。

 

	//FPSの指定
	game.fps = 16;

Gameオブジェクトは、フレームレートを指定するfpsプロパティを持っています。
今回は16fps(1秒間に16フレーム)を指定。

 

		var label = new Label(text);
		label.font = "16px monospace";
		label.color = color;
		label.x = x;
		label.y = y;
		game.rootScene.addChild(label);

ラベルは、文字列を表示する描画オブジェクトです。
Labelオブジェクトは文字色やフォント、テキストを指定するプロパティを持ちます。

 

		//ラベルの定期処理
		label.tick = 0;
		label.addEventListener(Event.ENTER_FRAME, function() {
			label.y --;
			label.tick ++;

			//ラベルの削除
			if (label.tick > 10) game.rootScene.removeChild(label);
		});

ラベルの定期処理では、10フレームの間、フレームごとにy座標に-1を繰り返し、10フレーム目にラベルを削除します。
現在のフレーム数を計測する変数としてlabelにtickプロパティを追加しています。

 

	//シーンの定期処理
	game.tick = 0;
	game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
		if ((game.tick % 3) === 0) {
			var score = rand(100);
			var r 		= rand(256);
			var g 		= rand(256);
			var b 		= rand(256);
			var x 		= rand(300);
			var y 		= rand(300);
			game.addLabel(score + "点", "rgb(" + r + "," + g + "," + b + ")", x, y);
		}
		game.tick++;
	});

シーンの定期処理では、3フレームに1度addLabelメソッドを呼んでいます。
(3フレームに1度、物体が生成される)
引数のスコアや色、座標は乱数で生成しています。

 

そんな感じで以上です。