🎮 SVGとCanvas、同じシューティングを作ってみたら体験が全然違った
同じ題材のシューティングゲームを、
SVG版とCanvas版の2通りで作ってみました。
結論を先に言うと、
優劣の話ではなく、体験がまったく別物でした。
▶ デモ（そのまま遊べます）
SVG版（FSMあり・安定志向）
Canvas版（派手・演出重視）
まずは触ってみてください。
説明はそのあとで十分です。
🎮 操作方法
SVG版
- ← / → or A / D：移動
- Space：ショット
- R：リスタート
- （スマホ）画面下ボタン：移動 / ショット / リスタート
※ キーボード操作を前提にしています。
Canvas版
- マウス移動：自機移動
- Space：ショット
- R：リスタート
※ シンプルな操作に絞っています。
Canvas版はBGMと効果音あり（最初の操作後に有効）
🧠 作ってみて感じたこと
SVG版を触った印象
- 動きが落ち着いている
- 状態が分かりやすい
- 長く遊んでも安心感がある
「ちゃんとゲームとして制御されている」感じがします。
Canvas版を触った印象
- 動きが軽い
- 演出が派手
- 反応が速くて気持ちいい
「とにかく触って楽しい」方向に振り切っています。
🆚 技術的な違い（深掘りしない版）
ざっくりまとめると：
-
SVG
- DOM要素がそのまま見える
- 構造を意識しやすい
- 状態管理と相性がいい
-
Canvas
- 描画が軽い
- 演出を盛りやすい
- 見た目で気持ちよくできる
細かい設計や性能の話は、
今回はあえて触れていません。
🤔 じゃあ、どっちが正解？
正直なところ、
- 落ち着いて作るなら SVG
- 派手に遊ばせるなら Canvas
という印象でした。
どちらが優れている、という話ではなく、
目的と好みの違いだと思います。
🎯 まとめ
- 同じシューティングを SVG と Canvas で作った
- 見た目だけでなく、操作感や体験が変わった
- どちらにもちゃんと良さがある
作る前は
「Canvasのほうが一択かな？」
と思っていましたが、
実際に両方作ってみると、
SVGの良さもはっきり分かりました。
このあたりは、
実際に作って触ってみないと分からないですね。
必要であれば、
それぞれの実装は GitHub リポジトリ側で
そのまま確認できるようにしています。
ここまで読んでいただき、ありがとうございました。