初めてのenchant.js 013当たり判定[JavaScript]

前回「初めてのenchant.js 012イベント(キーボード)[JavaScript]」は、キーボード系のイベントを使ってbearを移動しました。
今回はSprite同士の当たり判定をしてみようと思います。

完成サンプル


[main.js]

enchant();
window.onload = preloadAssets;

var game;
var scene;
var bear;
var enemy;
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);
	
	enemy = new Sprite(32,32);
	enemy.image = game.assets['images/chara1.gif'];
	enemy.frame = 5;
	enemy.scaleX = -1;
	enemy.x = 200;
	enemy.y = 200;
	scene.addChild(enemy);
	
	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);
	game.addEventListener(Event.ENTER_FRAME,entreFrame);
}


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 entreFrame(e){
	if(bear.intersect(enemy)){
		score.text = "Hit";
	}else{
		score.text = "No Hits";
	}
}


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

コード解説

var enemy;

対象のSprite格納用の変数です。

	enemy = new Sprite(32,32);
	enemy.image = game.assets['images/chara1.gif'];
	enemy.frame = 5;
	enemy.scaleX = -1;
	enemy.x = 200;
	enemy.y = 200;
	scene.addChild(enemy);

対象のSpriteを画面に配置しています。
(enemy.scaleX = -1 とすると画像を反転する事ができます)

game.addEventListener(Event.ENTER_FRAME,entreFrame);

画面が更新されるたびにチェックするので、ENTER_FRAMEイベントを設定します。

function entreFrame(e){
	if(bear.intersect(enemy)){
		score.text = "Hit";
	}else{
		score.text = "No Hits";
	}
}	

Spriteオブジェクトのintersect()メソッドで当たり判定をして、
scoreのテキスト部分へ結果を表示しています。

※正確にはSpriteオブジェクト親オブジェクトEntityオブジェクトのメソッドです。
詳しくはドキュメントを見てください。

次回は「初めてのenchant.js 014オブジェクトの拡張[JavaScript]」です。

初めてのenchant.js 一覧

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です