前回「初めてのenchant.js 012イベント(キーボード)[JavaScript]」は、キーボード系のイベントを使ってbearを移動しました。
今回はSprite同士の当たり判定をしてみようと思います。
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 001 基本的なこと[JavaScript]
- 初めてのenchant.js 002 基本セッティング[JavaScript]
- 初めてのenchant.js 003シーンの表示[JavaScript]
- 初めてのenchant.js 004画像の表示[JavaScript]
- 初めてのenchant.js 005文字の表示[JavaScript]
- 初めてのenchant.js 006音を鳴らす[JavaScript]
- 初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]
- 初めてのenchant.js 008イベント(基本編)[JavaScript]
- 初めてのenchant.js 009イベント(touchその1)[JavaScript]
- 初めてのenchant.js 010イベント(touchその2)[JavaScript]
- 初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]
- 初めてのenchant.js 012イベント(キーボード)[JavaScript]
- 初めてのenchant.js 013当たり判定[JavaScript]
- 初めてのenchant.js 014オブジェクトの拡張[JavaScript]
- 初めてのenchant.js 015簡単なミニゲーム作成[JavaScript]
こちらもオススメ(別サイト)
enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。
ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。

コメントを残す