【初心者向け】攻撃判定の実装方法（プレイヤー→敵）｜HTML＋JavaScriptで倒せるゲームを作ろう

この記事を読み終えるころには、
「敵に触れるだけのゲーム」から
「攻撃して敵を倒せるゲーム」 に進化します。

難しい数式やライブラリは使いません。
まずは 「倒せた！」を体験 しましょう 🎮

---

⚔ 攻撃判定とは？

攻撃判定とは、

プレイヤーの攻撃が、敵に当たったかどうか

を判定する仕組みです。

敵×プレイヤーの当たり判定との違い

種類	目的
当たり判定（敵×プレイヤー）	ダメージを受ける
攻撃判定（プレイヤー→敵）	敵を倒す

考え方は同じですが、
「どちらが判定の主体か」 が違います。

---

🧠 攻撃判定の基本的な考え方

初心者向けゲームでは、
攻撃も 四角形（矩形） として扱います。

用意するもの

• プレイヤー本体（player）
• 攻撃用の当たり判定（attackBox）
• 敵キャラ（enemy）

💡 ポイント
攻撃＝「見えない四角形」を出す
と考えると分かりやすいです。

---

🧱 プレイヤー・敵のデータ例

const player = {
  x: 100,
  y: 200,
  width: 32,
  height: 32,
  isAttacking: false
};

const enemy = {
  x: 160,
  y: 200,
  width: 32,
  height: 32,
  hp: 2
};

---

📦 攻撃用ヒットボックスを作る

攻撃中だけ出現する箱

function getAttackBox(player) {
  return {
    x: player.x + player.width,
    y: player.y,
    width: 30,
    height: player.height
  };
}

👉 プレイヤーの 右側に攻撃判定 を出しています。

---

💥 攻撃判定用の当たり判定関数

※ 以前の記事と同じ矩形判定です。

function isCollision(a, b) {
  return !(
    a.x + a.width < b.x ||
    a.x > b.x + b.width ||
    a.y + a.height < b.y ||
    a.y > b.y + b.height
  );
}

---

🕹 攻撃ボタンを押したら判定する

document.addEventListener("keydown", (e) => {
  if (e.key === " ") {
    player.isAttacking = true;

    setTimeout(() => {
      player.isAttacking = false;
    }, 200); // 攻撃時間
  }
});

---

🧪 ゲームループで攻撃判定を行う

if (player.isAttacking) {
  const attackBox = getAttackBox(player);

  if (isCollision(attackBox, enemy)) {
    enemy.hp--;
    console.log("敵にヒット！");

    player.isAttacking = false;
  }
}

---

☠ 敵を倒す処理を追加する

if (enemy.hp <= 0) {
  console.log("敵を倒した！");
  // 敵を消す・スコア加算など
}

👉 「倒せた！」が体験できる瞬間です。

---

❌ よくある初心者のミス

ミス① 攻撃が当たらない

👉 攻撃判定の位置（x, y）を確認

ミス② 連打で一瞬で倒せる

👉 攻撃時間・クールタイムを入れる

ミス③ 見た目と判定がズレる

👉 ヒットボックスを少し小さく調整

---

🎯 攻撃判定を分かりやすくするコツ

デバッグ用に表示する

if (player.isAttacking) {
  ctx.strokeStyle = "yellow";
  ctx.strokeRect(
    attackBox.x,
    attackBox.y,
    attackBox.width,
    attackBox.height
  );
}

👉 判定が「見える」だけで理解が一気に進みます。

---

🔗 次に読みたいおすすめ記事

---

✅ まとめ

• 攻撃判定＝プレイヤーの攻撃と敵の重なり
• 四角形判定で十分
• 攻撃は「一瞬だけ出る箱」と考える
• 倒せた瞬間が最高に楽しい

ここまでできれば、
あなたのゲームは 「遊べるゲーム」 です。