12.【JS】SVGシューティング完成版｜FSMは裏側、遊ぶのが主役

tags: [“JavaScript”, “SVG”, “GameDev”, “FSM”]

🎮 SVGシューティング完成版

— FSMは裏側、遊ぶのが主役 —

👉 この記事は説明少なめです。
👉 とりあえず遊んでください。

▶ デモ（完成版）

そのまま遊べる完成ゲーム

👇 クリックして開始
https://samizo-aitl.github.io/qiita-articles/demos/svg-shooter-fsm/

• 💻 PC対応
• 📱 スマホ対応
• ⏸ Pで一時停止
• 🔄 Rでリスタート

🎮 操作方法

• ← / → or A / D：移動
• Space：ショット
• P：一時停止
• R：リスタート
• 📱 スマホ：画面下ボタン

🎯 このゲームでできること

• 🚀 自機を動かす
• 💥 弾を撃つ
• 👾 敵を倒す
• ❤️ ライフ制
• ☠ ゲームオーバー
• 📈 時間とスコアで難易度上昇

👉 ちゃんとした「ゲーム」です。

🧠 技術的な話（興味ある人だけ）

• Canvas 不使用
• SVG + DOM だけ
• requestAnimationFrame
• FSMで整理（開始 / プレイ / 停止 / 終了）

※ ここを読まなくても遊べます。

📂 記事構成について

このシリーズは、役割分担しています。

• 07_：SVGだけでゲームを動かす
• 08_：壊れないようにFSMで整理
• 09_：難易度・敵AIで体感を変える
• 10_（この記事）：完成版

👉 この記事だけ読めばOK。

✨ なにが嬉しいか

• Pで止まる
• 再開しても変にならない
• 何度でも遊べる

👉 それだけで十分。

🔮 おまけ（やろうと思えば）

• 🤖 自動プレイ
• 🎮 コントローラ対応
• 📊 リプレイ保存
• 🧠 学習型難易度

今回は やってません。
完成させることを優先しました。

🎯 まとめ

• SVG + DOM でもゲームは作れる
• 難しい話は裏側でいい
• 遊べることが一番大事

👉 気に入ったら、
コードを覗くなり改造するなりしてください。