JavaScript»ゲーム制作»あたり判定 2つの四角のあたり判定

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

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

ソースコード

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

let playerX = 144;
let playerY = 144;
let enemyX = 96;
let enemyY = 96;
let hit = false;

setInterval(() => {

  context.clearRect(0, 0, 320, 320);
  context.fillStyle = "rgb(127, 127, 255)";
  context.fillRect(playerX, playerY, 32, 32);
  context.fillStyle = "rgb(255, 127, 127)";
  context.fillRect(enemyX, enemyY, 32, 32);
  
  if (hit) {
    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") playerY -= 4;
  if (e.key === "ArrowRight") playerX += 4;
  if (e.key === "ArrowDown") playerY += 4;
  if (e.key === "ArrowLeft") playerX -= 4;

  if (playerX < enemyX + 32 && 
      enemyX < playerX + 32 && 
      playerY < enemyY + 32 && 
      enemyY < playerY + 32) {
    hit = true;
  } else {
    hit = false;
  }
});

解説

あたり判定を、変数hitがtrueかfalseかで管理します。キーがおされたとき、座標を変えたあとであたり判定をおこないます。