これはゲーム開発Canvasチュートリアルの10ステップのうち5番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson5.htmlで入手できます。

ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。

ゲームオーバーを実装する

自分のゲームにゲームオーバーを実装してみましょう。3章ではボールを壁で弾むようにしました。以下はその引用です。

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

4辺全てでボールを弾ませるのではなく、3辺、すなわち上端と左右のみで弾むようにしましょう。底を打ったときゲームは終わりになります。2番目のif節を編集して、ボールがキャンバスの下端で衝突したときにゲームオーバー状態が発動するif else節にしましょう。ここでは簡単に、アラートメッセージを表示して、ページの再読込によりゲームを再開するだけにしましょう。2番目のif節を次の内容で置き換えましょう。

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("GAME OVER");
    document.location.reload();
}

パドルをボールに当てる

このレッスンのしあげに、ボールとパドルの衝突検出を作り、ボールが弾んでプレイエリアに戻ってくるようにしましょう。最も簡単なやり方はボールがパドルの左端と右端の間にあるか確認することです。最後に編集したコードを今度は次のように書き換えます。

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("GAME OVER");
        document.location.reload();
    }
}

ボールがCanvasの下端に当たっていたら、パドルにも当たっているかどうか確認します。もしパドルに当たっていたら、思ったとおりにボールは弾みます。当たらなかったら、先ほどと同じようにゲームオーバーになります。

自分のコードと比べる

自分のコードと比べられるように、実際に動くコードを以下に示します。

 

 

練習: ボールがパドルに当たったときに速く動くようにしましょう。

次のステップ

今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章『ブロックのかたまりを作る』に進み、ボールが壊せるブロックを作りましょう。

ドキュメントのタグと貢献者

 このページの貢献者: nekomanma
 最終更新者: nekomanma,