レッスン25 ゲームオーバー画面を表示しよう3 | フライトゲーム開発 | ゲーム開発で学ぶプログラミング

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

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

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

let gameState = "start";

let player;
let block;

let skyImage;
let airplaneUpImage;
let airplaneDownImage;
let blockImage;

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");
  player = { y: 100, vy: 0, ay: 0.05 };
  block = { x: 450, y: 200, w: 30, h: 30 };
}

function draw() {
  updateGame();
  drawGame();
}

function updateGame() {
  if (gameState === "start" || gameState === "gameover") {
    return;
  }
  updatePlayer();
  updateBlock();
  detectGameover();
}

function updatePlayer() {
  player.vy += player.ay;
  player.y += player.vy;
}

function updateBlock() {
  block.x--;
  if (block.x < -block.w / 2) {
    block.x = 400 + block.w / 2;
    block.y = random(0, 400);
    block.h = random(30, 100);
  }
}

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";
  }
}

function drawGame() {
  image(skyImage, 200, 200, 400, 400);
  if (player.vy >= 0) {
    image(airplaneDownImage, 100, player.y, 50, 50);
  } else {
    image(airplaneUpImage, 100, player.y, 50, 50);
  }
  image(blockImage, block.x, block.y, block.w, block.h);
  if (gameState === "start") {
    drawStart();
  } else if (gameState === "gameover") {
    drawGameover();
  }
}

function drawStart() {
  fill(17, 113, 155);
  textSize(30);
  text("フライトゲーム", 200, 200);
  textSize(15);
  text("タップしてスタート", 200, 250);
}

function drawGameover() {
  fill(17, 113, 155);
  textSize(30);
  text("ゲームオーバー", 200, 200);
  textSize(15);
  text("タップしてリスタート", 200, 250);
}

function mousePressed() {
  if (gameState === "start") {
    gameState = "play";
  } else {
    player.ay *= -1;
  }
}