ソースコード解説・目次

CHAPTER 00 · 全23項目

この解説の読み方

ゲームを動かし、画面の変化とコードを結び付けるところから始めます。

主な参照先:game.html / tests / doc

まずは遊んで、動きを観察する

ASTRO DEFENDER は、敵の編隊を撃ち落とす固定画面シューティングです。画面の動きは Canvas 2D、効果音と BGM は Web Audio で作られています。ゲーム本体はリポジトリ直下の game.html だけで動き、画像ファイルや音源ファイルを読み込む必要はありません。

この解説では、変数・関数・配列・オブジェクト・繰り返しの基本を知っている人を想定しています。初めてなら項目番号の順に、気になる仕組みがあるなら項目一覧から読み進めてください。

  • ゲームを開く。マウスで移動し、クリックを押し続けて射撃する。
  • 敵を減らしたときの速度、弾が当たったときの変化、ウェーブ終了時の画面を観察する。
  • 対応する解説を開き、関数名で本体のソースを検索する。

手元で動かす

リポジトリを取得したら、ルートの game.html をブラウザで開きます。HTTP 経由で確認する場合は、リポジトリのディレクトリで次のコマンドを実行し、http://localhost:8000/game.html にアクセスします。

ローカルサーバーの起動
python3 -m http.server 8000

コード枠と確認課題の使い方

ファイル名・行番号の付いたコード枠は、今回の解説作成時の実ソースから抜粋しています。「ソースを見る」は GitHub の該当箇所へのリンクです。更新で行番号が変わった場合は、併記した関数名を検索してください。「説明用の例」は仕組みを小さく取り出した例です。