仕上げ

ライフを実装するのは極めて単純です。まずは他の変数を宣言したところと同じところにライフの数を保存する変数を追加しましょう。

let lives = 3;

ライフカウンタを描画するのはスコアカウンタを描画するのとほとんど同じです。次の関数を自分のコードの drawScore() の下に追加してください。

function drawLives() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText(`Lives: ${lives}`, canvas.width - 65, 20);
}

すぐにゲームを終了するのではなく、ライフがなくなるまでライフを減らしていきます。また、プレイヤーが次のライフで始めるときに、ボールとパドルの位置をリセットすることができます。そこで、 draw() 関数の中で、以下の 3 行を置き換えてください。

alert("GAME OVER");
document.location.reload();
clearInterval(interval); // クロームがゲームを終了するのに必要

これに以下で示すようなもう少し複雑なロジックを追加します。

lives--;
if (!lives) {
  alert("GAME OVER");
  document.location.reload();
  clearInterval(interval); // クロームがゲームを終了するのに必要
} else {
  x = canvas.width / 2;
  y = canvas.height - 30;
  dx = 2;
  dy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
}

ボールが画面下端に当たったときに lives 変数からライフを 1 つ引きます。もしライフが残っていなかったらゲームは負けです。ライフが残っている場合は、ボールの位置とパドルの位置がリセットされ、ボールの動きもリセットされます。

drawLives() への呼び出しをdraw() 関数内に追加する必要があります。 drawScore() の呼び出しの下に追記してください。

drawLives();

ではゲーム機構に直結しない部分、描画に関わる部分にとりかかりましょう。 requestAnimationFrame は今は setInterval() で実装している固定フレームレートよりもより良くブラウザーがゲームを描画できるようにします。

const interval = setInterval(draw, 10);

これを簡単に次の行で置き換えます。

draw();

そして、それぞれのインスタンスを削除します。

clearInterval(interval); // クロームがゲームを終了するのに必要

次に、 draw() 関数の一番下（中括弧を閉じる直前）に、以下の行を追加します。これは、 draw() 関数が何度も繰り返し呼び出されるようにするためのものです。

requestAnimationFrame(draw);

これでdraw()関数がrequestAnimationFrame()ループの中で何度も実行されるようになりましたが、固定の10ミリ秒のフレームレートではなくブラウザーに制御を託しています。ブラウザーはフレームレートを適切に同期し図形を必要なときだけ描画します。これは古いsetInterval()メソッドよりも効率的で滑らかなアニメーションループを生み出します。

これで全部です。ゲームの最終版が準備でき、プレイできる状態になりました。

おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な 2D ゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応する Phaser を使ったブロックくずしゲームやデバイス回転方向を使った 2D 迷路ゲームチュートリアルを見てみると良いでしょう。 MDN のゲームセクションで発想やより多くの知識を探してみても良いでしょう。

また、このチュートリアルシリーズの目次を見返せます。コーディングを楽しみましょう。

• 前のページ