スペースインベーダー

Vanilla HTML5 Canvas + Web Audio API で作った、単一ファイルの Space Invaders です。 外部ライブラリ・外部アセット・画像・音源ファイルを一切使わず、index.html 1つで 完結します。オフラインで動きます。

起動方法

その1: ダブルクリック（最も簡単）

index.html をブラウザで直接開く。ダブルクリックで起動します。

その2: ローカルサーバ

python3 -m http.server 8099

ブラウザで http://localhost:8099/ を開く。

操作方法

キー	動作
← → / A D	自機の左右移動
SPACE	射撃（同時に1発まで）
P / ESC	ポーズ
M	ミュート切替
ENTER	開始・次レベル・リトライ

遊び方

• 敵隊列（5行×11列）をすべて撃破するとレベルクリア。
• 敵は左右に往復し、端に達すると1段下がります。速度は残敵数が減るほど上がり、 レベルが上がると基準速度も上がります。
• 敵が最下段に達するか、自機のライフが0になるとゲームオーバー。
• まれにUFOが横切ります。撃つと高得点。
• 防壁（緑のブロック）は弾を受けると削れます。敵弾にも自機弾にも侵食されます。
• ハイスコアはブラウザの localStorage に保存されます。

スコア

的	点
上段（赤）	30
中段（橙）	20
下段（緑）	10
UFO	50 / 100 / 150 / 300（ランダム）

技術

• Canvas 2D でドット絵をビットマップ配列から描画。
• Web Audio API で効果音を合成（発射・爆発・歩進・UFO 等）。外部音源なし。
• 固定タイムステップ、AABB 矩形衝突。
• 画面シェイク、被弾時の無敵点滅、ポーズ、タブ非表示で自動ポーズ。
• 色覚配慮: 自機弾（実線）と敵弾（ノコギリ状パターン）は形で区別。

動作環境

モダンなブラウザ（Chrome / Edge / Firefox / Safari）。Web Audio API と Canvas 2D が使える環境で動きます。音は最初のキー操作後に有効になります （ブラウザの自動再生制限への対応）。