13.【JS】Canvasで弾幕を撃ったら気持ちよすぎた（設計？今回は置いとく）

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

💥 Canvasで弾幕を撃ったら気持ちよすぎた

👉 今回は説明少なめです
👉 まずは触ってみてください

Canvasの「描画の気持ちよさ」を前面に出した、
シンプルなシューティングゲームを作りました。

▶ デモ（完成版）

👇 ブラウザですぐ遊べます
https://samizo-aitl.github.io/qiita-articles/demos/canvas-shooter/

• 💻 PC対応
• 🖱 マウス操作
• ⌨ Space：ショット
• 🔄 R：リスタート

※ 音が出ます
最初にマウス操作やキー入力を行うと、
BGMと効果音（ショット音・ヒット音）が有効になります。

💣 見どころ

• ✨ Canvas描画による軽快な動き
• 💥 弾幕表現
• 🌈 残像エフェクト
• 📳 ヒット時の画面揺れ
• 🔥 視覚的に分かりやすい敵表現
• 📈 スコアに応じて派手さが増す演出
• 🔊 発射音・ヒット音・BGMによる没入感

👉 触っていて気持ちいいことを重視しています。

🎮 操作方法

• マウス移動：自機移動
• Space：ショット
• R：リスタート

🧠 技術的なメモ（興味があれば）

• HTML5 Canvas
• requestAnimationFrame
• シンプルな当たり判定
• 軽量なゲームループ構成
• Web Audio API（SE / BGM）

細かい設計の話は今回は省いていますが、
Canvasの描画表現と体験に集中した構成になっています。

🆚 SVG版との違い

これまでに公開した SVG ベースの実装と比べると：

• SVG：構造が見やすく、安定した表現
• Canvas：動きが軽く、演出を盛りやすい

👉 用途に応じて使い分けるのが一番だと感じています。
今回は Canvas の良さを素直に楽しむ回です。

🔮 今後やるとしたら

• 弾幕パターンの追加
• 加算合成による発光表現
• エフェクトの強化
• スマホ操作向けUI調整

今回は「完成させること」を優先しました。

🎯 まとめ

• Canvasは描画表現がとても楽しい
• 見た目と音の気持ちよさは正義
• 小さく作って、まず動かすのもアリ

Canvasで何か作ってみたい人の
きっかけになれば嬉しいです。

次は
SVGとCanvas、どちらが好みか
そのあたりも比べてみようと思います。