🎮 何ができる？
SVGだけで、ミニシューティングゲームを最後まで作りました。
- 🚀 自機・弾・敵・当たり判定・スコア・ライフ・ゲームオーバーまで実装
- 🧩 図形はすべて SVG × DOM
- 🔍
querySelector/setAttributeで操作 - 🛠 DevToolsで状態が見えるのでデバッグが楽
「Canvasは難しそう…」という人向けの
DOM感覚で作れるシューティングです。
🎮 操作方法
- ⬅ ➡：移動（
←→/AD） - 🔫：連射（
Space） - 🔄：リスタート（
R） - 📱 スマホ：画面下のボタン
🤔 なぜ Canvas じゃなく SVG？
Canvasは「描画結果」を作る仕組みなので、
あとから特定の弾や敵を触るのが難しいです。
SVGはDOMなので、
- 🎯 弾も敵も 要素
- 🔍
querySelectorで取得できる - ✏
setAttributeで座標を書き換えるだけ - 🧠 DevToolsで状態が丸見え
- 📄 Git diffで図形差分も追える
👉 仕組み理解・教材用途ではSVGがかなり強いです。
🧩 コア部分：DOM操作（例）
弾は <circle> を生成し、
座標（cx,cy）を書き換えるだけで移動します。
const bullet = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
bullet.setAttribute("cx", x);
bullet.setAttribute("cy", y);
bullet.setAttribute("r", 3);
svg.appendChild(bullet);
// 移動：cyを書き換えるだけ
bullet.setAttribute("cy", y - 5);
💡 Canvasのような再描画ループは不要です。
▶️ 完成版デモ（そのまま遊べます）
👇 こちらをクリック
https://samizo-aitl.github.io/qiita-articles/demos/svg-shooter/
※ 別タブで開きます
✅ まとめ
- ✨ SVGはDOM → 操作・理解・デバッグが圧倒的に楽
- 🎮 シューティング程度ならSVGで十分
- 📘 学習・教材・デモ用途にとても向いている
次は以下を追加予定です。
- 👾 敵のパターン化
- 🌊 弾幕表現
- ⚡ 当たり判定の最適化
🔜 このゲームの続き
この記事（09）は
「SVG(DOM)だけでゲームが最後まで作れる」
ことを見せる回です。
このあと、
- 10：ゲームが壊れないように整理する（FSM導入）
- 11：難易度・敵AIで遊び心地を変える
- 12：完成版（操作・停止・再開まで全部入り）
という形で発展させています。
👉 とりあえず遊びたい人は 12 だけ見ればOK
👉 作り方に興味があれば 10 / 11 もどうぞ