12.【JavaScript】SVG Shooting Game (Final)｜FSM Stays Behind the Scenes, Playing Comes First

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

🎮 SVG Shooting Game (Final)

— FSM Stays Behind the Scenes, Playing Comes First —

👉 This article keeps explanations to a minimum.
👉 Just play the game first.

▶ Demo (Final Version)

A fully playable finished game

👇 Click to start
https://samizo-aitl.github.io/qiita-articles/demos/svg-shooter-fsm/

• 💻 PC supported
• 📱 Mobile supported
• ⏸ P: Pause
• 🔄 R: Restart

🎮 Controls

• ← / → or A / D: Move
• Space: Shoot
• P: Pause
• R: Restart
• 📱 Mobile: On-screen buttons at the bottom

🎯 What You Can Do in This Game

• 🚀 Move your ship
• 💥 Fire shots
• 👾 Defeat enemies
• ❤️ Life system
• ☠ Game over
• 📈 Difficulty increases with time and score

👉 This is a proper, complete game.

🧠 Technical Notes (Only If You’re Interested)

• No Canvas
• SVG + DOM only
• requestAnimationFrame
• Organized with FSM (Start / Play / Pause / End)

※ You can enjoy the game without reading this part.

📂 About the Article Structure

This series is divided by roles:

• 07_: Making a game move using only SVG
• 08_: Keeping things stable with FSM
• 09_: Changing game feel with difficulty & enemy AI
• 10_ (This article): Final version

👉 Reading only this article is enough.

✨ What’s Nice About It

• You can pause with P
• Resuming doesn’t break anything
• You can replay it endlessly

👉 That’s more than enough.

🔮 Bonus (If You Really Wanted To)

• 🤖 Auto-play
• 🎮 Controller support
• 📊 Replay saving
• 🧠 Learning-based difficulty

None of these are implemented.
Finishing the game came first.

🎯 Summary

• You can build games with SVG + DOM
• Complicated logic belongs behind the scenes
• Being playable matters most

👉 If you like it,
feel free to explore the code or modify it.