enchantjs003

編集中

前回はクマの絵をふたつ表示しました。
プログラムでは多くの場合キー入力の処理が必要となります。
enchant.jsのキー入力は、上下左右の矢印キーと、その他は任意のキー２つです。ゲームならば、古いゲーム機の矢印とAボタン、Bボタンという事の様です。

クマ2を矢印キーで上下、左右に移動してみます。

クマ2のフレームの書き換わるイベントにキー入力の判定を追加することが推奨されるようです。

基本は次のような記述となります。

		bear2.addEventListener('enterframe', function() {
			if (core.input.left) {
				// 左矢印が押された時の処理
			}
			if (core.input.right) {
				// 右矢印が押された時の処理
			}
			if (core.input.up) {
				// 上矢印が押された時の処理
			}
			if (core.input.down) {
				// 下矢印が押された時の処理
			}
		});

今回は、それに、放っておくと徐々に落下するような動きにし、落下速度が速くなります。

また、内部で処理している落下速度の値を画面上に表示する為に、レベルオブジェクトを追加して表示するようにしました。

// オブジェクトを作成し、表示と色を決定しておきます。
		var label2 = new Label("infomation");
		label2.x = 160;
		label2.y = 0;
		label2.color = '#00007F';
 
// 何かのタイミングで現在の落下速度を表示します。
			label2.text = 'falling speed:'+fspeed;

スクリプト全体

enchant();
 
window.onload = function() {
 
	var core = new Core(320, 320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
 
	var fspeed = 0;
	var kasoku = 0.05;
	
		var bear = new Sprite(32, 32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		//bear.scale(0.5,0.5);
		bear.frame = 1;
 
 
		var bear2 = new Sprite(32, 32);
		bear2.image = core.assets['chara1.png'];
		bear2.x = 160;
		bear2.y = 0;
		//bear2.scale(0.5,0.5);
		bear2.frame = 6;
		
 
		var label1 = new Label("infomation");
		label1.x = 0;
		label1.y = 0;
		label1.color = '#00007F';
 
		var label2 = new Label("infomation");
		label2.x = 160;
		label2.y = 0;
		label2.color = '#00007F';
 
		bear.addEventListener('enterframe', function() {
			this.x += 2;
			if (this.x > 320) this.x = 0;
			this.rotate(2);
			//this.scale(1.005, 1.005);
			label1.text = 'frame:'+core.frame;
			label2.text = 'falling speed:'+fspeed;
			if (core.frame>2000) {
				core.stop();
			}
 
		});
 
		bear2.addEventListener('enterframe', function() {
			var keyInputCount=0;
			if (core.input.left) {
				this.x -= 2;
				bear2.frame = 6;
				//keyInputCount++;
			}
			if (core.input.right) {
				this.x += 2;
				bear2.frame = 7;
				//keyInputCount++;
			}
			if (core.input.up) {
				this.y -= 2;
				bear2.frame = 5;
				fspeed -= kasoku*10;
				if (fspeed<0) {
					fspeed = 0.0;
				}
				keyInputCount++;
			} else {
				fspeed += kasoku;
			}
			if (core.input.down) {
				this.y += 2;
				bear2.frame = 8;
				keyInputCount++;
			}
 
			if (keyInputCount<1) {
				//this.y += 1;
				this.y += fspeed;
				bear2.frame = 8;
			}
			if (this.y > 320) this.y = 0;
			if (this.y < 0) this.y = 320;
			if (this.x > 320) this.x = 0;
			if (this.x < 0) this.x = 320;
			//this.rotate(-2);
			//this.scale(1.005, 1.005);
 
		});
 
		core.rootScene.addChild(bear);
		core.rootScene.addChild(bear2);
		core.rootScene.addChild(label1);
		core.rootScene.addChild(label2);
	
	}
	core.start();
 
};

次回は、[z]キーなどで分身でも表示してみましょうか？

WEBエンジニア：インターネットの活用

enchantjs003