ゲームオーバー画面を作ろう
コースアウトの判定が完成したので、ゲームオーバー画面を作っていきましょう。
前回のレッスンで、コースアウトが発生したら変数 gameState
が "gameover"
になるようになったので、これを利用して作っていきます。
まず、updateGame
関数を次のように変更してください。
function updateGame() { if (gameState === "start" || gameState === "gameover") { return; } updateRoads(); detectGameover(); score++; }
変数 gameState
が "gameover"
のとき、ゲームが止まるようにしました。
次に、drawGame
関数の部分を次のように変更してください。
function drawGame() { background(0); drawRoads(); drawPlayer(); drawScore(); if (gameState === "start") { drawStart(); } else if (gameState === "gameover") { drawGameover(); } } function drawGameover() { fill(255, 0, 0); textSize(30); text("ゲームオーバー", 200, 200); textSize(15); text("タップしてリスタート", 200, 250); }
新しい関数 drawGameover
を定義し、変数 gameState
が "gameover"
のとき、drawGameover
関数を実行するようにしました。
それではゲームを起動してみましょう。
プレイヤーを動かしてコースアウトすると、ゲームオーバー画面が表示されると思います!
さて、今のままだとゲームオーバーしたら何もできなくなってしまいます。
次回のレッスンではリトライができるようにしていきます。