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

書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。

プレイヤーにライフを与える

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

var lives = 3;

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

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

ライフがなくなるまで、ゲームをすぐ終わらせるかわりにライフの数を減らします。draw()関数内の次の2行を置き換えます。

alert("GAME OVER");
document.location.reload();

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

lives--;
if(!lives) {
    alert("GAME OVER");
    document.location.reload();
}
else {
    x = canvas.width/2;
    y = canvas.height-30;
    dx = 2;
    dy = -2;
    paddleX = (canvas.width-paddleWidth)/2;
}

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

ライフ表示を描画する

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

drawLives();

requestAnimationFrame()で描画を改善する

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

setInterval(draw, 10);

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

draw();

それから、draw()関数の一番下 (閉じ波括弧のすぐ前) に次の行を追加し、draw()関数が自分自身を何度も呼び出すようにします。

requestAnimationFrame(draw);

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

自分のコードを比べる

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

 

 

練習: ライフの数とパドルでボールが跳ねる角度を替えてみましょう。

ゲームクリア - 今のところは。

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

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

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

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