ゲームオーバー画面を表示しよう3
プレイヤーがブロックに衝突したらゲームオーバーと判定する処理を実現していきます。
衝突を判定するということは、プレイヤーとブロックの距離が近いことを判定することと言えます。
それでは detectGameover
関数を次のように変更してください。
function detectGameover() { if (player.y < 0 || player.y > 400) { gameState = "gameover"; } let distanceX = abs(100 - block.x); let distanceY = abs(player.y - block.y); if (distanceX <= 25 + block.w / 2 && distanceY <= 25 + block.h / 2) { gameState = "gameover"; } }
後半にコードを追加しました。
let distanceX = abs(100 - block.x); let distanceY = abs(player.y - block.y);
この部分で、プレイヤーとブロックの距離を計算しています。
abs
は絶対値を返す関数です。
まず distanceX
はX方向の距離になります。
プレイヤーのX座標は100で固定なので、 abs(100 - block.x)
でプレイヤーとブロックのX方向の距離が計算できます。
次に distanceY
はY方向の距離になります。
abs(player.y - block.y)
でプレイヤーとブロックのY方向の距離が計算できます。
if (distanceX <= 25 + block.w / 2 && distanceY <= 25 + block.h / 2) { gameState = "gameover"; }
そしてこの部分で、プレイヤーとブロックの距離が近いこと(=衝突したこと)を判定しています。
少しわかりにくいかも知れませんが、プレイヤーのサイズが50であることを前提として、下図を参考にしてください。
それではゲームを起動して、プレイヤーをブロックにわざとぶつけてみましょう。
ゲームオーバー画面が表示されたと思います!