説明
スカッシュや
ブロック崩しのようにボールを移動させ端で反転するようにするには、ボールの移動量を加算していき座標値が端まで達したら移動量を逆（反転）にします。移動量を逆にするには-1を乗算します。サンプルではball.x, ball.yがボールの座標値で、移動量はball.dx, ball.dyとなっています。この移動量を逆（反転）にするにはball.dx = -ball.dxのように書きます。ball.dx = -1 * ball.dxと書いても同じです。Y座標の場合も同様に書けばできあがりです。
■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/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);
// フレームイベントが発生したら処理
ball.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; }
});
}
game.start(); // ゲーム処理開始
}
目次に戻る