👉 この記事で分かること
- 敵キャラを「動かす」ための基本的な考え方
- JavaScriptで左右に動く敵キャラの作り方
- プレイヤーを追いかける簡単な追尾処理
- 初心者がつまずきやすいポイント
この記事を読み終えるころには、
**「敵が置いてあるだけ」から「ちゃんと動く敵キャラ」**を作れるようになります。
敵キャラを動かすと、ゲームは一気に面白くなる
敵キャラが動くだけで、
- 緊張感が生まれる
- 避ける・追いかける要素が出る
- ゲームらしさが一気にアップ
難しいことは必要ありません。
毎フレーム、少しだけ位置を変える
それだけでOKです。
敵キャラが動く仕組み（超重要）
敵キャラは
「x や y の数値を毎フレーム変えているだけ」
enemy.x += 2;
これだけで
👉 敵は右に動きます。
左右に動く敵キャラを作ってみよう
敵キャラのデータ
const enemy = {
x: 100,
y: 200,
width: 40,
height: 40,
speed: 2,
direction: 1
};
speed：移動スピードdirection：向き（1＝右 / -1＝左）
移動処理（ここが肝）
enemy.x += enemy.speed * enemy.direction;
// 画面端で反転
if (enemy.x <= 0 || enemy.x + enemy.width >= canvas.width) {
enemy.direction *= -1;
}
これで
左右に行ったり来たりする敵キャラ が完成です 🎮
プレイヤーを追いかける敵を作る（簡易AI）
超シンプルな追尾処理
if (player.x > enemy.x) {
enemy.x += enemy.speed;
} else {
enemy.x -= enemy.speed;
}
これだけで
👉 プレイヤーを追いかける敵になります。
よくある初心者のミス（必読）
❌ 動かない
👉 移動処理が requestAnimationFrame() の中にあるか確認
❌ 一瞬で消える
👉 speed が大きすぎる（まずは 1〜3）
❌ 画面外に出て戻らない
👉 canvas.width を使って端判定しているかチェック
まずは「動いた！」を体験しよう
完璧に理解しなくて大丈夫です。
コードを貼って、敵が動いたらそれで成功です
理解は
👉 あとから必ず追いつきます
🎮 次に読みたいおすすめ記事
▶ 次のステップ①
【初心者向け】JavaScriptで当たり判定を作る方法
→ 敵に触れた瞬間を判定できる
▶ 次のステップ②
敵キャラを複数出す方法（配列）
→ 敵を量産できるようになる
▶ 次のステップ③
JavaScriptゲーム制作ロードマップ
→ 迷わず完成まで進める
まとめ
敵キャラの動きは、
- 位置（x, y）
- 速さ（speed）
- 向き（direction）
この3つが分かればOK。
ここまでできたあなたは、
もう完全に「ゲーム制作者側」です。
次は
👉 当たり判定
👉 敵を増やす
👉 ゲームオーバー処理
に進みましょう。
