ゲームオーバー画面を表示しよう2
ゲームオーバーと判定されたらゲームオーバー画面を描画するようにしましょう。
まず、ゲームオーバーになったらゲームの進行を止めたいので、updateGame
関数を次のように変更します。
function updateGame() { if (gameState === "start" || gameState === "gameover") { return; } updatePlayer(); updateBlock(); detectGameover(); }
変数 gameState
が "gameover"
のときも return
して、updateGame
関数の処理をそこで終了させています。
次に、ゲームオーバー画面を描画するための関数 drawGameover
を定義しましょう。
function drawGameover() { fill(17, 113, 155); textSize(30); text("ゲームオーバー", 200, 200); textSize(15); text("タップしてリスタート", 200, 250); }
このコードは、スタート画面を描画する関数 drawStart
とほぼ同様になります。
最後に、ゲームオーバーと判定されたら drawGameover
関数が呼び出されるようにしましょう。
function drawGame() { image(skyImage, 200, 200, 400, 400); if (player.vy >= 0) { image(airplaneDownImage, 100, player.y, 50, 50); } else { image(airplaneUpImage, 100, player.y, 50, 50); } image(blockImage, block.x, block.y, block.w, block.h); if (gameState === "start") { drawStart(); } else if (gameState === "gameover") { drawGameover(); } }
関数の最後の部分に else if
文を追加して、変数 gameState
が "gameover"
のときに drawGameover
関数が呼び出されるようにしました。
それではゲームを起動してみましょう。
プレイヤーが画面外に飛び出ると、ゲームオーバー画面が描画されるようになったと思います!
次はプレイヤーがブロックに衝突したらゲームオーバーと判定する処理を実現していきます。