- ゲームループとは何か
- なぜゲームは「止まらずに動く」のか
- JavaScriptでの基本的なゲームループ構造
- HPが一瞬で0になる原因と対策の考え方
この記事を読み終えるころには、
「コードは書けたけど、何が起きているか分からない」状態から
「あ、だからこうなるのか！」と理解できる状態
になります。
難しい数式や理論は使いません。
まずは ゲームが動く“仕組み”を体感 しましょう 🎮
🔁 ゲームループとは？
ゲームループとは、
「同じ処理を、何度も何度も繰り返す仕組み」
のことです。
ゲームは、
- キャラを動かす
- 当たり判定をする
- HPを減らす
- 画面を描画する
これらを
1秒間に何十回も繰り返しています。
👉 これをまとめて
ゲームループ
と呼びます。
🧠 なぜゲームは止まらずに動くのか
普通のプログラムは、
console.log("こんにちは");
で終わります。
でもゲームは、
- ずっと動き続ける
- キー入力を待つ
- 状態が変わり続ける
必要があります。
その答えが、
👉 「ループさせているから」
です。
🧱 ゲームループの基本構造
初心者向けゲームでは、
ゲームループはこの形でOKです。
① 状態を更新する（update）
② 画面を描画する（draw）
③ また①に戻る
これを
ずっと繰り返す
だけです。
🕹 JavaScriptでゲームループを作る
もっともシンプルな例です。
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
これだけで、
- update → draw → update → draw…
- 永遠に繰り返される
状態になります。
💡 ポイント
requestAnimationFrame は、
- ブラウザが「今描画していいよ」と言ったタイミングで
- 次の処理を呼び出す
👉 ゲーム専用のループ命令
と思ってOKです。
🧪 update関数で何をしているのか
update() の中では、
ゲームの状態を更新 します。
例：
function update() {
movePlayer();
moveEnemy();
checkCollision();
updateHP();
}
- キャラ移動
- 敵の移動
- 当たり判定
- HP処理
👉 ゲームの中身は、全部ここ です。
💥 HPが一瞬で0になる理由
初心者が必ず経験する現象です。
if (isCollision(player, enemy)) {
playerHP--;
}
これをゲームループ内で書くと…
- 当たっている間
- 毎フレームHPが減る
- 一瞬で0になる
ということが起きます。
❗ これはバグではありません
ゲームループが正しく動いている証拠
です。
🎯 じゃあどうすればいいの？
考え方はシンプルです。
- 「当たっている間」ではなく
- 「当たった瞬間」だけ減らす
そのために、
- 無敵時間
- ダメージフラグ
- クールタイム
などを使います。
👉 これらは 次の記事で実装 します。
❌ よくある初心者の勘違い
ミス① if文が1回しか動かないと思っている
👉 ゲームループでは
毎フレーム実行されます
ミス② ループが怖い
👉 ゲームは
ループがないと始まりません
ミス③ 処理の順番を意識していない
👉
update → draw
この順番は超重要です。
🎯 ゲームループ理解のコツ
💡 ゲームは「動画」だと考える
- 1枚1枚の絵を
- 超高速で描き直している
その1枚ごとの処理が
👉 ゲームループ
です。
🔗 次に読みたいおすすめ記事
▶ 【初心者向け】HP・ライフ制の実装方法
▶ 【初心者向け】当たり判定の見える化（デバッグ）
▶ 【初心者向け】ゲームオーバー処理の実装
✅ まとめ
- ゲームループ＝処理の繰り返し
- updateで状態を更新
- drawで画面を描画
- HPが一瞬で0になるのは正常
- 理解できれば一気に楽になる
ここを理解できたあなたは、
もう「雰囲気でゲームを作る初心者」ではありません。
次は
👉 当たり判定の見える化
で、理解を「確信」に変えましょう。
