ASTRO DEFENDERSOURCE CODE GUIDE
ASTRO DEFENDERゲームの動きを、
コードから読み解く。
1つの HTML ファイルで動くシューティングゲーム。
画面に描く、敵を動かす、弾を当てる、音を鳴らす。
その仕組みを、実際のソースと一緒に学ぶ解説です。
まずは、この順番で。
全体像をつかむための5項目
ファイルの役割を知り、時間と状態の管理を押さえたら、入力から弾の処理へ。
「操作すると画面が変わる」までの流れを追えます。
ソースコード解説
気になる項目から読めます
各ページに、仕組みの説明・ソースの抜粋・確認課題をまとめました。
関数名を手掛かりに、ゲーム本体のコードと行き来してください。
ゲームの土台を知る
ファイルの構成から、時間・状態・描画・当たり判定まで。
この解説の読み方
ゲームを動かし、画面の変化とコードを結び付けるところから始めます。
解説を読む 011ファイルの全体構成
HTML・CSS・JavaScript の役割と、入力から描画までのデータの流れを整理します。
解説を読む 02ゲームループと時間
経過時間 dt、フレームの予約、ポーズ中の停止処理を読み解きます。
解説を読む 03画面と状態遷移
タイトル、プレイ、ミス、クリア、ゲームオーバーを状態で管理します。
解説を読む 04Canvas の座標と描画
内部座標と表示サイズの違い、文字描画、重ねる順序を確認します。
解説を読む 05文字列からドット絵を作る
X と . の配列を画像に変換し、2コマのスプライトとして再利用します。画面の英数字も同じ考え方のドット文字です。
解説を読む 06四角形の当たり判定
4つの不等式で重なりを調べ、絵とは別に衝突範囲を定義します。
解説を読む戦闘の仕組みを追う
自機と敵を動かし、弾・バリア・得点・アイテムをつなぎます。
敵の編隊とウェーブ生成
50体の相対位置、折り返し、残り数とウェーブに応じた速度、射撃する敵の選び方と、ウェーブが進むと厳しくなる射撃を追います。
解説を読む 08自機の移動と入力
ポインターとキーボードを共通の状態にまとめ、移動速度と連射を制御します。
解説を読む 09弾の移動と衝突の順序
配列の逆順走査、弾が消える条件、シールドとミスの分岐を説明します。
解説を読む 10崩れるバリアの実装
小さなマスの配列で盾を表し、敵弾が触れた場所と周囲を削ります。
解説を読む 11スコア・コンボ・残機
撃破時の加点、2.2秒のコンボ猶予、残機の増加とハイスコア保存を追います。
解説を読む 12カプセルと連結ビーム砲
時間制限のあるパワーアップと、シールド・連結砲のように数で管理する効果を分けます。
解説を読む戦闘の展開を広げる
必殺技、ウェーブの切り替え、ボスと突入する敵を読み解きます。
演出・品質・改造を学ぶ
絵と音を仕上げ、テストで確かめ、自分の変更につなげます。
演出と描画の高速化
パーティクル、加算合成、ヒットストップと、画像を再利用する工夫を整理します。
解説を読む 18効果音と BGM の合成
発振器・音量・ノイズから音を作り、BGMを少し先の時刻へ予約します。
解説を読む 19日本語・英語と設定の保存
文言を辞書に集め、CanvasとHTMLの表示をまとめて切り替えます。
解説を読む 20ゲームロジックのテスト
ブラウザ部分を置き換え、本番のJavaScriptに対してルールを検証します。
解説を読む 21改造するときの着眼点
数値、絵、アイテム、ボスの強さを変更するときに、関連する処理を一緒に確認します。
解説を読む 22用語集と読み返し先
解説に登場する用語を、実際の変数・関数・関連項目と結び付けます。
解説を読むひとつの操作が、画面になるまで。
ゲームは「入力」「状態の更新」「描画」を繰り返しています。
描かれた絵と、その裏で変わるデータを分けて読むのが出発点です。
- 1. 入力を記録
keys/mouseX - 2. 状態を更新
update(dt) - 3. 衝突と得点
hit()/addScore() - 4. 画面を描画
draw(t)
手元のソースで確かめる
変更後はテストで確認
リポジトリのルートで次を実行します。ゲームのルールをNode.jsの組み込みテスト機能で検証できます。
node --test tests/*.test.cjs