【初心者向け】JavaScriptゲームにHP・ライフ制を実装する方法｜ダメージが減る仕組みを作ろう

この記事を読み終えるころには、

「当たったら即終了のゲーム」から
「HPが減っていくゲーム」へ進化します。

難しい数式やライブラリは使いません。
まずは 「ダメージが減る仕組み」を体験 しましょう 🎮

❤️ HP・ライフ制とは？

HP・ライフ制とは、

プレイヤーが持っている体力（数値）
が、ダメージを受けるたびに減っていく仕組みです。

多くのゲームでは、

• 敵に当たる
• HPが減る
• HPが0になるとゲームオーバー

という流れになっています。

👉 今回はこの「基本の形」を作ります。

---

🧠 HP・ライフ制の基本的な考え方

HP・ライフ制でやることは、とてもシンプルです。

用意するもの

• プレイヤーのHP（数値）
• 当たり判定（敵×プレイヤー）
• HPが0かどうかのチェック

💡 ポイント
HPは「特別な仕組み」ではなく
ただの数字 です。

---

🧱 プレイヤーのHPを用意する

まずは、プレイヤーにHPを持たせます。

let playerHP = 3;

• 3 → ライフ3つ分
• 数字は自由に変更OK

👉 これだけでHPの準備は完了 です。

---

💥 敵に当たったらHPを減らす

すでに
敵×プレイヤーの当たり判定
がある前提で進めます。

if (isCollision(player, enemy)) {
  playerHP--;
  console.log("ダメージ！");
}

これで、

• 敵に当たる
• HPが1減る

という動きになります。

---

🧪 ゲームループでHPを管理する

HPの管理は、ゲームループ内で行います。

function update() {
  if (isCollision(player, enemy)) {
    playerHP--;
  }
}

👉
「毎フレーム、当たっているかをチェック」
という考え方です。

---

⚠ 注意（初心者が必ずハマるポイント）

このままだと、

当たり続けて一瞬でHPが0になります。

これは次の記事
👉 ゲームループ解説
でしっかり対策します。

今は
✅ 仕組みを理解できればOK
です。

---

☠ HPが0になったらどうする？

HPが減ったら、必ずチェックします。

if (playerHP <= 0) {
  console.log("ゲームオーバー");
}

今は console.log で十分です。

👉 次の記事で

• ゲーム停止
• ゲームオーバー画面表示

を実装します。

---

🎯 HPを画面に表示してみよう（おすすめ）

初心者には 見える化 がとても大切です。

ctx.fillText("HP: " + playerHP, 20, 30);

• HPが減るのが分かる
• バグに気づきやすい
• ゲームっぽさが一気に上がる

💡 デバッグ用でもOKなので、必ず表示しましょう。

---

❌ よくある初心者のミス

ミス① HPが一瞬で0になる

👉 当たり続けているだけ
（次の記事で解決）

---

ミス② HPがマイナスになる

👉 playerHP <= 0 で判定すればOK

---

ミス③ 仕組みが分からなくなる

👉 console.log と表示を使う
これだけで理解度が段違いです。

---

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

▶ 【初心者向け】敵を複数出す方法（配列で管理）
▶ 【初心者向け】ゲームループの完全解説
▶ 【初心者向け】ゲームオーバー処理の実装方法

---

✅ まとめ

• HP・ライフ制は「数値管理」だけ
• 敵に当たったらHPを減らす
• HPが0になったらゲームオーバー
• 見える化すると理解が一気に進む

ここまでできれば、

あなたのゲームは
「完成するゲーム」への道に入っています。

次は
👉 敵を複数出す
ことで、ゲームが一気に面白くなります。