ボールの移動
ここまででゲームに必要なスプライトが準備できました。あとは（3）の実際にゲーム中で処理する部分を作りましょう。
ボールはx, y座標に移動量を加算して移動させます。
ball.x = ball.x + ball.dx; // X方向の移動量を加算
ball.y = ball.y + ball.dy; // Y方向の移動量を加算
このまま加算していくとボールが画面からはみ出してしまいますので、左右の端に当たったら移動方向を反転させます。ゲーム画面やスプライトのサイズはwidth, heightプロパティに入っていますので、値を調べてボールの位置が画面幅を超えた場合は移動量に-1を乗算します（つまり移動量の符号を判定させるわけです）。
if ((ball.x < 0) || (ball.x > (game.width-ball.width))){ ball.dx = -ball.dx; }
if (ball.y < 0){ ball.dy = -ball.dy; }
ボールが画面下の座標を超えたらゲームオーバーです。stop()メソッドを呼び出すとゲームの処理が停止します。
if(ball.y > game.height){
game.stop();
alert("スコアは"+game.score+"点でした");
}
パドルの移動
ボールを打ち返すパドルをユーザーの操作によって移動できるようにします。enchant.jsではgame.inputに入力状態を示すプロパティが用意されています。
| 左入力 | game.input.left |
| 右入力 | game.input.right |
| 上入力 | game.input.up |
| 下入力 | game.input.down |
プロパティの値は、キーが入力されるとtrue、入力がなければfalseです。パドルは左右のキー入力によって移動させるので、game.input.leftとgame.input.rightの値を調べてパドルの座標を加算または減算します。パドルが画面外にはみ出ないように、座標が画面の端を超えていないかもチェックします。
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; } // 右端かどうか調べる
}
パドルとボールの当たり判定
ボールとパドルの移動処理ができたので、ゲームに必要な当たり判定の処理を追加します。enchant.jsではintersec()メソッドを使ってスプライト同士の衝突を調べられます。intersec()の引数に当たり判定をしたいスプライトを指定すると、当たっていればtrue、そうでなければfalseを返します。
パドルとボールが当たっていればボールの移動方向を反転させ、同時にスコアを加算して結果を画面に表示します。スコアはラベルとして表示されているので、textプロパティを書き換えることで表示内容を変更できます。
if (pad.intersect(ball)){
ball.dy = -ball.dy; // 接触した場合はボールのY方向の移動量を逆にする
game.score = game.score + 10; // スコアを加算(10点)
scoreLabel.text = "SCORE : "+game.score;
}
ここまででスカッシュゲームの基本的な処理ができました。最後に以下のようにゲームを開始するメソッドを書きます。
game.start();
game.startメソッドを実行するとシーンにENTER_FRAMEイベントが発生します。パドルやボールはENTER_FRAMEイベントが発生してから移動を始めるので、以下のようにイベントリスナー内に処理を記述します。
game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
：
ゲーム中の処理
：
});
完成したスカッシュのプログラムがサンプル1です。カーソルキーでパドルを左右に移動させボールを打ち返します。
ゲーム中の画面
ゲームオーバーの画面
■サンプル1（main.js）
enchant(); // ライブラリーの初期化
window.onload = function(){
var game = new Game(240, 320); // 240×320画面(Canvas)を作成
game.fps = 30; // フレームレートの設定。30fpsに設定
game.preload("images/pad.png","images/ball.png"); // 画像データをあらかじめ読み込ませる
game.rootScene.backgroundColor = "blue"; // ゲームの背景色を青色に設定
game.score = 0; // スコアを入れる変数を用意する
// スコアを表示するラベルを作成
var scoreLabel = new Label("SCORE : 0");
scoreLabel.font = "16px Tahoma";
scoreLabel.color = "white";
scoreLabel.x = 10; // X座標
scoreLabel.y = 5; // Y座標
game.rootScene.addChild(scoreLabel);
// データの読み込みが完了したら処理
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.dy = -ball.dy; }
// ボールが下まで行ったらゲームオーバー
if(ball.y > game.height){
game.stop();
alert("スコアは"+game.score+"点でした");
}
// パドルを移動させる
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.score = game.score + 10; // スコアを加算(10点)
scoreLabel.text = "SCORE : "+game.score;
}
});
}
game.start(); // ゲーム処理開始
}
