🎮 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 でもゲームは作れる
- 難しい話は裏側でいい
- 遊べることが一番大事
👉 気に入ったら、
コードを覗くなり改造するなりしてください。