CHAPTER 01 · 全23項目

1ファイルの全体構成

HTML・CSS・JavaScript の役割と、入力から描画までのデータの流れを整理します。

主な参照先：cvs / ctx / player / update / draw

画面の骨組みとゲーム本体

HTML はゲーム画面用の Canvas、必殺技と言語のボタン、操作説明、紹介ページと X への投稿のリンクを配置します。CSS は画面の大きさや周囲の装飾を担当します。自機・敵・弾は HTML 要素ではなく、JavaScript が Canvas に描く図形です。

game.html · L66–79ソースを見る ↗

<div class="frame"><canvas id="game" width="480" height="640"></canvas></div>
<div class="actions">
  <button id="laserButton" type="button" disabled>Z 合体レーザー 0%</button>
  <button id="bombButton" type="button" disabled>X ボム ×2</button>
  <div class="lang" role="group" aria-label="Language / 言語">
    <button id="langJa" type="button" aria-pressed="true">日本語</button>
    <button id="langEn" type="button" aria-pressed="false">ENGLISH</button>
  </div>
</div>
<p class="hint" id="hint"></p>
<p class="site-link">
  <a href="https://hnakada123.github.io/astro-defender/">hnakada123.github.io/astro-defender</a>
  <a id="shareLink" href="https://x.com/intent/post?url=https%3A%2F%2Fhnakada123.github.io%2Fastro-defender%2Fgame.html" target="_blank" rel="noopener noreferrer"><svg role="img" aria-label="X" viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg><span id="shareLabel">でポスト</span></a>
</p>

層	役割	読む場所
HTML	Canvas・ボタン・操作説明・リンクを置く	`<body>` の冒頭
CSS	表示サイズ、枠、走査線を整える	`<style>`
JavaScript	状態を更新し、絵と音を出す	`<script>`

入力・状態・描画を分けて読む

1. 入力keys や mouseX を更新
2. 計算update(dt) が状態を進める
3. 描画draw(t) が画面を作る

例えば右キーを押すと、入力イベントが keys.right を true にします。updatePlay() がそれを読んで player.x を増やし、drawGame() が新しい座標に自機を描きます。入力イベントと描画の間にゲーム状態がある、と考えると読みやすくなります。

ソースを探すための地図

まとまり	主な名前
基本設定・文言・文字	`W`、`H`、`STRINGS`、`T()`、`FONT_SHEETS`、`drawTextOn()`
音と画像の準備	`beep()`、`musicTick()`、`makeSprite()`、`prerender()`
ゲームの状態	`player`、`aliens`、`active`、`special`、`boss`
ルールと入力	`makeWave()`、`activateLaser()`、`updateBoss()`、イベント登録
フレーム処理	`update()`、`draw()`、`frame()`