14.【JS】SVGとCanvas、同じシューティングを作ってみたら体験が全然違った

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

🎮 SVGとCanvas、同じシューティングを作ってみたら体験が全然違った

同じ題材のシューティングゲームを、
SVG版とCanvas版の2通りで作ってみました。

結論を先に言うと、
優劣の話ではなく、体験がまったく別物でした。

▶ デモ（そのまま遊べます）

SVG版（FSMあり・安定志向）

https://samizo-aitl.github.io/qiita-articles/demos/svg-shooter-fsm/

Canvas版（派手・演出重視）

https://samizo-aitl.github.io/qiita-articles/demos/canvas-shooter/

まずは触ってみてください。
説明はそのあとで十分です。

🎮 操作方法

SVG版

• ← / → or A / D：移動
• Space：ショット
• R：リスタート
• （スマホ）画面下ボタン：移動 / ショット / リスタート

※ キーボード操作を前提にしています。

Canvas版

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

※ シンプルな操作に絞っています。 Canvas版はBGMと効果音あり（最初の操作後に有効）

🧠 作ってみて感じたこと

SVG版を触った印象

• 動きが落ち着いている
• 状態が分かりやすい
• 長く遊んでも安心感がある

「ちゃんとゲームとして制御されている」感じがします。

Canvas版を触った印象

• 動きが軽い
• 演出が派手
• 反応が速くて気持ちいい

「とにかく触って楽しい」方向に振り切っています。

🆚 技術的な違い（深掘りしない版）

ざっくりまとめると：

• SVG
  • DOM要素がそのまま見える
  • 構造を意識しやすい
  • 状態管理と相性がいい
• Canvas
  • 描画が軽い
  • 演出を盛りやすい
  • 見た目で気持ちよくできる

細かい設計や性能の話は、
今回はあえて触れていません。

🤔 じゃあ、どっちが正解？

正直なところ、

• 落ち着いて作るなら SVG
• 派手に遊ばせるなら Canvas

という印象でした。

どちらが優れている、という話ではなく、
目的と好みの違いだと思います。

🎯 まとめ

• 同じシューティングを SVG と Canvas で作った
• 見た目だけでなく、操作感や体験が変わった
• どちらにもちゃんと良さがある

作る前は
「Canvasのほうが一択かな？」
と思っていましたが、

実際に両方作ってみると、
SVGの良さもはっきり分かりました。

このあたりは、
実際に作って触ってみないと分からないですね。

必要であれば、
それぞれの実装は GitHub リポジトリ側で
そのまま確認できるようにしています。

ここまで読んでいただき、ありがとうございました。