前回「初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]」は、ENTER_FRAMEイベントでbearを移動しました。
今回はキーボード系のイベントを使ってbearを移動してみます。

完成サンプル


[main.js]

enchant();
window.onload = preloadAssets;

var game;
var scene;
var bear;
var score;


function preloadAssets(){
	game = new Game(320,320);
	game.preload(
		'images/chara0.gif',
		'images/chara1.gif',
		'sounds/jump.wav',
		'sounds/gameover.wav'
	);
	game.onload = init;
	game.start();
}


function init(){
	game.scale = 1;
	game.fps = 30;
	scene = new Scene();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	
	score = new Label("0123456");
	score.color = "#FC9";
	score.font = "normal normal 15px/1.0 monospace";
	score.text = "00990";
	scene.addChild(score);	
	
	main();
}


function main(){
	game.addEventListener(Event.UP_BUTTON_DOWN,move);
	game.addEventListener(Event.DOWN_BUTTON_DOWN,move);
	game.addEventListener(Event.RIGHT_BUTTON_DOWN,move);
	game.addEventListener(Event.LEFT_BUTTON_DOWN,move);
}


function move(e){
	switch(e.type){
		case Event.UP_BUTTON_DOWN:
			bear.y--;
			break;		
		case Event.DOWN_BUTTON_DOWN:
			bear.y++;
			break;		
		case Event.RIGHT_BUTTON_DOWN:
			bear.x++;
			break;		
		case Event.LEFT_BUTTON_DOWN:
			bear.x--;
			break;	
		default:
			error("move()に不明なイベント" + e.type + "が渡されました。");
			break;		
	}
}


function error(mes){
	alert("Error：エラーが発生しました。\nメッセージ：\n" + mes);
}

コード解説

	game.addEventListener(Event.UP_BUTTON_DOWN,move);
	game.addEventListener(Event.DOWN_BUTTON_DOWN,move);
	game.addEventListener(Event.RIGHT_BUTTON_DOWN,move);
	game.addEventListener(Event.LEFT_BUTTON_DOWN,move);

gameに対してaddEventListener()関数を使ってキーボード系のイベントを設定しています。
今回は前回までと違って「上下左右」どのキーが押されても同じ関数(move())が呼び出される様にしています。

function move(e){
	switch(e.type){
		case Event.UP_BUTTON_DOWN:
			bear.y--;
			break;		
		case Event.DOWN_BUTTON_DOWN:
			bear.y++;
			break;		
		case Event.RIGHT_BUTTON_DOWN:
			bear.x++;
			break;		
		case Event.LEFT_BUTTON_DOWN:
			bear.x--;
			break;	
		default:
			error("move()に不明なイベント" + e.type + "が渡されました。");
			break;		
	}
}


function error(mes){
	alert("Error：エラーが発生しました。\nメッセージ：\n" + mes);
}

変数「e」のtypeを利用して条件分岐して、bearを移動しています。

また、error関数はエラーハンドリング用で用意しました。
今回はmesをalert()で画面上に出力してますが、運用時にはバックグラウンドでログをとばしつつ、ユーザにはエラーが発生してプレイできない事を通知したりと役立ちます。
いまは発生するはず無いのですが、大規模になっていくほど予期せぬINPUTが入ってくる可能性がたかまるのでエラー処理を完全にしておく方が完成への近道だとおもいます。

次回は「初めてのenchant.js 013当たり判定[JavaScript]」です。

初めてのenchant.js 一覧

こちらもオススメ(別サイト)

enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集：なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。

ドットインストール：enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい＆enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。