コースアウトを判定しよう
現時点では、プレイヤーを動かしてコースから外れても、特に何も起きません。
そこで、プレイヤーがコースから外れたら、ゲームオーバーになるようにしましょう。
コースアウトの判定には、繰り返しと条件分岐を利用します。
もう少し詳しく説明すると、
プレイヤーが全ての四角形の外側にあるとコースアウトで、ゲームオーバーになります。
逆に言うと、
プレイヤーが少なくとも1つの四角形の内部にあるとコースインで、ゲーム続行です。
この判定を、繰り返しと条件分岐を利用して実現します。
それでは、 updateGame
関数の部分を次のように変更してください。
function updateGame() { if (gameState === "start") { return; } updateRoads(); detectGameover(); score++; } function detectGameover() { let gameover = true; for (let i = 0; i < roads.length; i++) { let distanceX = abs(mouseX - roads[i].x); let distanceY = abs(mouseY - roads[i].y); if (distanceX <= 75 && distanceY <= 10) { gameover = false; } } if (gameover) { gameState = "gameover"; } }
新しい関数 detectGameover
を定義し、updateGame
関数から呼び出しています。
detectGameover
関数を詳しく見ていきましょう。
まずはじめに gameover
という変数を用意しています。
初期値を true
にしています。
let gameover = true;
次に、繰り返しと条件分岐を利用して、プレイヤーが少なくとも1つの四角形の内部にあるかどうかを判定しています。
for (let i = 0; i < roads.length; i++) { let distanceX = abs(mouseX - roads[i].x); let distanceY = abs(mouseY - roads[i].y); if (distanceX <= 75 && distanceY <= 10) { gameover = false; } }
コードを解説します。
let distanceX = abs(mouseX - roads[i].x);
ここは、プレイヤーと四角形のX方向の距離を計算しています。
abs
関数は、数値の絶対値を返す関数になります。
let distanceY = abs(mouseY - roads[i].y);
ここは、プレイヤーと四角形のY方向の距離を計算しています。
if (distanceX <= 75 && distanceY <= 10) { gameover = false; }
この部分で、プレイヤーが四角形の内部にあるかどうかを判定しています。
四角形の横幅は150、高さは20なので、
X方向の距離が75以内、Y方向の距離が10以内であれば、内部にあると言えます。
内部にあれば、変数 gameover
を false
に設定して、ゲームオーバーにならないようにしています。
if (gameover) { gameState = "gameover"; }
最後に、変数 gameover
が true
のままであったなら、
ゲームの状態を保持する変数 gameState
を "gameover"
に変更しています。
これでコースアウトが判定できましたが、まだこの段階ではコースアウトしても何も起きません。
次のレッスンで、ゲームオーバー画面を作っていきましょう。