今回の完成形
画面の上に目標、その下に集めた星の進み具合を置きました。「ゲームを始める」で開始し、←→またはA/Dで受け皿を動かします。Escapeは一時停止。停止後は「ゲームを再開」で続きから遊び、「最初からやり直す」で時間と得点を戻します。
第07回を残して、説明を分ける
前提は第07回の画像・音・フォントです。同じHTML/CSS/JavaScriptを使います。ZIPを別フォルダーへ展開し、08-uiのindex.htmlを開いてください。追加ライブラリやアカウントは不要です。
最初の一文で「30秒以内に10個」「落とした星に減点なし」「時間切れで失敗」を伝えます。操作キーは操作画面のすぐ下へ。音や自動停止の補足は「操作と音の説明」を開いたときに表示します。音は初期無効で、遊ぶための必須操作ではありません。
progressを得点と同じ値にする
<label for="progress">集めた星の進み具合</label>
<progress id="progress" max="10" value="0">0/10</progress>
// script.jsのpaint内
progress.value = state.score;
progress.textContent = `${state.score}/10`;最大値10はクリアに必要な個数、valueは現在の得点です。別の得点変数を増やさず、既存のstate.scoreを読みます。バーだけで個数を判断させず、「集めた星1個」という文字表示も残します。制限時間は第06回からのremainingをそのまま使っています。
操作画面のaria-describedbyには、目標と操作説明の要素IDを指定しました。Tab移動の輪郭も残しています。ただし、属性を付けたことだけで全体のアクセシビリティ適合とは判断しません。スクリーンリーダー実機での読み上げは未検証です。
停止とやり直しを見分け、次回へ
今回のブラウザー操作では、星1個の取得後に進捗バーが1/10になり、停止中は時計が進まず、やり直すと0個・30秒へ戻ることを確認しました。判定モデルは第07回と216条件で比較し、同じ結果でした。見た目の追加で、速度や当たり判定は変更していません。
バーが動かないときはidとquerySelectorの綴り、paint内の更新を確認します。ボタンが反応しないときは、展開したフォルダーでindex.htmlとscript.jsが並んでいるかを見てください。左右ボタンは1回32pxで長押し未対応。スマホ実機、直接試聴、人の実時間クリアは未検証です。
自作コード・星・READMEはCC0、同梱のNoto Sans JP文字限定版はOFL 1.1です。OFL.txtを残してください。確認日は2026年10月13日。次の09「動作・画面幅・容量の確認」を公開しました。全12回の目次から前の回へ戻れます。