13.【JavaScript】Firing Bullet Hell in Canvas Felt Way Too Good (Design? Let’s Ignore It This Time)

tags: [“JavaScript”, “Canvas”, “GameDev”, “Web”]

💥 Firing Bullet Hell in Canvas Felt Way Too Good

👉 Explanations are kept to a minimum this time
👉 Just try it first

I built a simple shooting game that puts
the pure joy of Canvas rendering front and center.

▶ Demo (Final Version)

👇 Play instantly in your browser
https://samizo-aitl.github.io/qiita-articles/demos/canvas-shooter/

• 💻 PC supported
• 🖱 Mouse control
• ⌨ Space: Shoot
• 🔄 R: Restart

※ Sound is enabled
Once you interact with the mouse or keyboard,
BGM and sound effects (shots / hits) will start playing.

💣 Highlights

• ✨ Smooth motion powered by Canvas rendering
• 💥 Bullet hell patterns
• 🌈 Afterimage / trail effects
• 📳 Screen shake on hit
• 🔥 Visually clear enemy design
• 📈 Flashier effects as your score increases
• 🔊 Shot sounds, hit sounds, and BGM for immersion

👉 The priority here is how good it feels to play.

🎮 Controls

• Mouse move: Ship movement
• Space: Shoot
• R: Restart

🧠 Technical Notes (If You’re Curious)

• HTML5 Canvas
• requestAnimationFrame
• Simple collision detection
• Lightweight game loop
• Web Audio API (SE / BGM)

Detailed architecture is intentionally skipped this time.
The focus is purely on visuals and gameplay feel with Canvas.

🆚 Difference from the SVG Version

Compared to the SVG-based implementations released earlier:

• SVG: Clear structure, stable representation
• Canvas: Lightweight motion, easy to add flashy effects

👉 Choosing based on purpose feels like the right answer.
This time, I just wanted to enjoy what Canvas does best.

🔮 If I Continue This Further

• More bullet patterns
• Glow effects using additive blending
• Stronger visual effects
• UI adjustments for mobile play

This time, finishing the game came first.

🎯 Summary

• Canvas is incredibly fun for visual expression
• Visuals and sound matter — a lot
• Starting small and making it playable is totally valid

If this inspires you to build something with Canvas,
that would make me happy.

Next time,
I might compare
SVG vs Canvas — which one feels better?