敵キャラを配置する方法｜実際に動くサンプルコード付き【初心者向け】

この記事を読み終えるころには、
「敵キャラをどう出せばいいか分からない」状態から
「自分のゲーム画面に敵を表示できる」状態になります。

難しいAIや数学は使いません。
まずは 「敵が出た！」を体験しましょう 🎮

---

敵キャラが登場すると、ゲームは一気に“作品”になる

自キャラを動かせるようになると、
次に必要になるのが 敵キャラ です。

• 避ける相手
• ぶつかる対象
• 緊張感を生む存在

実はこの段階では、

✔ 動かなくてもOK
✔ 攻撃しなくてもOK

「画面に表示されている」だけで十分です。

---

敵キャラの正体は「座標を持った箱」

初心者向けゲームでは、
敵キャラは次の情報を持った 四角形 と考えます。

• x：横の位置
• y：縦の位置
• width：横幅
• height：高さ

💡 ポイント
敵キャラも、自キャラとほぼ同じ構造です。

---

実際に敵キャラを1体表示するサンプルコード

ここからが本番です。
Canvasで敵キャラを1体表示する最小構成のコードを紹介します。

---

HTML（Canvasを用意）

<canvas id="game" width="400" height="300"></canvas>

---

JavaScript（敵キャラを配置して描画）

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

// 敵キャラのデータ
const enemy = {
  x: 250,
  y: 100,
  width: 40,
  height: 40
};

function drawEnemy() {
  ctx.fillStyle = "red";
  ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawEnemy();
  requestAnimationFrame(gameLoop);
}

gameLoop();

---

このコードでやっていること

• 敵キャラの位置と大きさを決める
• 赤い四角として描画する
• 毎フレーム描き直す

👉 赤い四角が表示されたら 成功 です！

---

敵キャラを複数配置する方法（配列）

敵を増やしたい場合は、
配列でまとめて管理 します。

---

敵キャラを配列で管理するサンプル

const enemies = [
  { x: 50,  y: 80,  width: 40, height: 40 },
  { x: 150, y: 120, width: 40, height: 40 },
  { x: 280, y: 60,  width: 40, height: 40 }
];

function drawEnemies() {
  ctx.fillStyle = "red";
  for (let i = 0; i < enemies.length; i++) {
    const e = enemies[i];
    ctx.fillRect(e.x, e.y, e.width, e.height);
  }
}

drawEnemy() の代わりに
drawEnemies() を呼び出せば、敵が複数表示されます。

---

配列を使うメリット

✔ 敵を簡単に増やせる
✔ 同じ処理をまとめられる
✔ 後から動きや当たり判定を追加しやすい

---

ランダム配置でゲーム感をアップする

敵キャラを毎回ランダムな位置にすると、
一気に ゲームらしさ が出ます。

function createEnemy() {
  return {
    x: Math.random() * 360,
    y: Math.random() * 260,
    width: 40,
    height: 40
  };
}

この関数を使えば、
何体でもランダムな敵を生成できます。

---

敵キャラが表示されないときのチェックリスト

❌ 画面外に配置していないか
❌ 描画関数を gameLoop 内で呼んでいるか
❌ canvas のサイズを超えていないか

💡 console.log(enemy) で
数値を確認すると原因がすぐ分かります。

---

次に読みたいおすすめ記事（重要）

ここまでできたら、次のステップは自然に決まります👇

---

▶ 敵キャラと当たり判定をつける

【初心者向け】JavaScriptで当たり判定を作る方法
→ 敵に触れた瞬間を判定できるようになります

---

▶ 敵キャラを動かす

敵キャラを左右・上下に動かす方法
→ 逃げる・避けるゲームに進化します

---

▶ ゲーム完成までの全体像を見る

【初心者向け】JavaScriptゲーム制作ロードマップ
→ 何をどの順番で作ればいいか迷わなくなります

---

まとめ｜敵キャラ配置はゲーム制作の大きな一歩

敵キャラを配置できるようになると、

• ゲームに目的が生まれる
• 緊張感が出る
• 「作ってる感」が一気に上がる

最初は、
動かなくても・倒せなくてもOK。

「画面に敵が出た」
それだけで、あなたはもう
ゲーム制作者の入口を越えています 🎮

次はぜひ、
👉 当たり判定
👉 敵キャラの動き

に挑戦してみてください。