JavaScript»ゲーム制作»あたり判定 2つの四角のあたり判定(Rectクラス)

ファイル名: js-game/quest_00931.html

下のソースコードをうつして、十字キーで青い四角をうごかし、赤い四角とぶつかったときにHIT!と表示されるプログラムを作ってください。

これは「2つの四角のあたり判定」を、Rectというクラスを作って書き直したものです。あたり判定のプログラムはRectクラスのisHitメソッドに書かれています。

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

class Rect {

  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }

  isHit(other) {
    return this.x < other.x + other.w && 
      other.x < this.x + this.w && 
      this.y < other.y + other.h && 
      other.y < this.y + this.h;
  }
}

const player = new Rect(144, 144, 32, 32);
const enemy = new Rect(192, 96, 32, 32);

setInterval(() => {

  context.clearRect(0, 0, 320, 320);
  context.fillStyle = "rgb(127, 127, 255)";
  context.fillRect(player.x, player.y, player.w, player.h);
  context.fillStyle = "rgb(255, 127, 127)";
  context.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);
  
  if (player.isHit(enemy)) {
    context.fillStyle = "rgb(127, 127, 127)";
    context.font = "32px monospace";
    context.textAlign = "center"
    context.fillText("HIT!", 160, 300);
  }
  
}, 50);

addEventListener("keydown", e => {
  if (e.key === "ArrowUp") player.y -= 4;
  if (e.key === "ArrowRight") player.x += 4;
  if (e.key === "ArrowDown") player.y += 4;
  if (e.key === "ArrowLeft") player.x -= 4;
});

解説

同じRectクラスから、青い四角オブジェクト(player)と赤い四角オブジェクト(enemy)を作っています。