💥 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、どちらが好みか
そのあたりも比べてみようと思います。