ゲームオーバー画面を表示しよう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であることを前提として、下図を参考にしてください。

プレイヤーとブロックの衝突判定

それではゲームを起動して、プレイヤーをブロックにわざとぶつけてみましょう。
ゲームオーバー画面が表示されたと思います!

オンライン相談

つまづいたときは

フライトゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.