説明
スカッシュや
ブロック崩しのようにボールをパドルで跳ね返すようにするには、ボールとパドルが接触したかどうかを調べます。enchant.jsではオブジェクト同士の判定としてintersect()とwithin()メソッドがあります。intersec()では矩形同士の判定になり、within()では中心からの距離を指定して判定します。スカッシュやブロック崩しの場合は矩形判定を利用します。つまりintersect()メソッドを使います。
ボールとパドルが接触した際にはボールの移動量を反転させます。サンプルではボールは画面下でも跳ね返るため、ボールがパドルと壁の間にはさまって何度も跳ね返る場合があります。
■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(){
// 240×320ピクセルサイズの画面(Canvas)を作成
var game = new Game(240, 320);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/pad.png","images/ball.png");
// ゲームの背景色を青色に設定
game.rootScene.backgroundColor = "blue";
// データの読み込みが完了したら処理
game.onload = function(){
// ボールの設定
var ball = new Sprite(16, 16);
ball.image = game.assets["images/ball.png"];
ball.x = 0; // X座標
ball.y = 0; // Y座標
ball.dx = 3; // X方向の移動量
ball.dy = 5; // Y方向の移動量
game.rootScene.addChild(ball);
// パドルの設定
var pad = new Sprite(32, 16);
pad.image = game.assets["images/pad.png"];
pad.x = game.width/2; // X座標
pad.y = game.height - 40; // Y座標
game.rootScene.addChild(pad);
// フレームイベントが発生したら処理
game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
ball.x = ball.x + ball.dx; // X方向の移動量を加算
ball.y = ball.y + ball.dy; // Y方向の移動量を加算
// 画面外かどうか調べる
if ((ball.x < 0) || (ball.x > (game.width-ball.width))){ ball.dx = -ball.dx; }
if ((ball.y < 0) || (ball.y > (game.height-ball.height))){ ball.dy = -ball.dy; }
// パドルを移動させる
if (game.input.left){
pad.x = pad.x - 4; // パドルを左に移動
if (pad.x < 0){ pad.x = 0; } // 左端かどうか調べる
}
if (game.input.right){
pad.x = pad.x + 4; // パドルを右に移動
if (pad.x > (game.width-pad.width)){ pad.x = game.width-pad.width; } // 右端かどうか調べる
}
// パドルとボールの接触判定
if (pad.intersect(ball)){
ball.dy = -ball.dy; // 接触した場合はボールのY方向の移動量を逆にする
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る