説明
スプライト同士の当たり判定を2点間の距離で行うにはスプライトのwithin()メソッドを使います。最初のパラメーターに当たり判定を調べたいスプライトを指定します。2番目のパラメータは接触する距離を指定します（単位はピクセル）。2番目のパラメーターはオプションで、省略時は2つのスプライトの横幅と高さの平均になります。within()は当たっている場合にはtrue、そうでない場合はfalseを返します。
サンプルではカーソルキーでボールを動かすと、中央の丸いブロックと接触しているかどうかが表示されます。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 240);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// 画像データをあらかじめ読み込ませる
game.preload("images/ball.png", "images/block.png");
// データの読み込みが完了したら処理
game.onload = function(){
// ラベルの設定
var myLabel = new Label(game.score);
myLabel.font = "16px";
myLabel.color = "red";
myLabel.x = 10; // X座標
myLabel.y = 5; // Y座標
game.rootScene.addChild(myLabel);
// ブロックの設定
var block = new Sprite(32, 32);
block.image = game.assets["images/block.png"];
block.x = 160;
block.y = 100;
game.rootScene.addChild(block);
// 操作するボールの設定
var ball = new Sprite(16, 16);
ball.image = game.assets["images/ball.png"];
ball.x = 160;
ball.y = game.height - ball.height;
game.rootScene.addChild(ball);
// フレームイベントが発生したら処理
ball.addEventListener(Event.ENTER_FRAME, function(){
// 自分が操作するボールを移動
if (game.input.left && (ball.x > 0)){ ball.x = ball.x - 2; }
if (game.input.right && (ball.x < game.width-ball.width)){ ball.x = ball.x + 2; }
if (game.input.up && (ball.y > 0)){ ball.y = ball.y - 2; }
if (game.input.down && (ball.y < game.height-ball.height)){ ball.y = ball.y + 2; }
// ブロックとの当たり判定
if (ball.within(block)){
myLabel.text = "当たりました";
}else{
myLabel.text = "当たっていません";
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る