リトライできるようにしよう
ゲームのリトライができるようにしましょう。
ゲームオーバー画面でマウスクリックすると、ゲームを最初から開始できるようにしていきます。
マウスクリックを検知するためには、mousePressed
関数が使えるのでした。
mousePressed
関数の部分を、次のように変更してください。
function mousePressed() { if (gameState === "start") { gameState = "play"; } else if (gameState === "gameover") { gameState = "play"; } else { player.ay *= -1; } }
else if
文を追加して、ゲームオーバーのときは変数 gameState
を "play"
に戻すようにしました。
ゲームを起動して、確かめてみましょう。
どうでしたか?
何かおかしいですね。またすぐゲームオーバー画面になってしまいます。
これは、ゲームの続きから再開してしまっていることが原因です。
そこで、リトライのときはゲームを初期状態にリセットするようにしましょう。
まず、setup
関数の部分を次のように変更してください。
function setup() { createCanvas(400, 400); imageMode(CENTER); textAlign(CENTER, CENTER); skyImage = loadImage("sky.jpeg"); airplaneUpImage = loadImage("airplaneUp.png"); airplaneDownImage = loadImage("airplaneDown.png"); blockImage = loadImage("block.jpeg"); resetGame(); } function resetGame() { player = { y: 100, vy: 0, ay: 0.05 }; block = { x: 450, y: 200, w: 30, h: 30 }; }
新しくresetGame
関数を定義し、setup
関数から呼び出すようにしました。
そして元々 setup
関数で行っていたプレイヤーとブロックの変数に初期値を設定する処理を、 resetGame
関数で行うようにしました。
次に、mousePressed
関数の部分を、次のように変更してください。
function mousePressed() { if (gameState === "start") { gameState = "play"; } else if (gameState === "gameover") { resetGame(); gameState = "play"; } else { player.ay *= -1; } }
リトライのときは、 resetGame
関数を実行するようにしました。
ここまでできたらゲームを起動してみましょう。
無事にリトライができるようになったと思います!