終わりのある星あつめを試す
「ゲームを始める」を押し、←→またはA/Dで受け皿を動かします。星は中央・左・右の固定順です。10個集めるとクリアの表示が出て、星も受け皿も止まります。取り逃しても直ちに失敗にはならず、残り時間の中で続けます。
第05回を残し、別フォルダーで始める
前提は第05回の左右操作と取り逃しです。第05回のフォルダーを上書きせず、第06回のZIPを別の場所へ展開してください。index.html、style.css、script.js、README.txtが同じフォルダーにある状態で、index.htmlをブラウザーで開きます。サーバーや追加ライブラリは不要です。
今回は完成コードを動かしてから、以下の処理をscript.jsの中で探します。部分的なコードだけを第05回へ継ぎ足すより、まず動く第06回と見比べると、変更箇所を追いやすくなります。素材と音はまだ足しません。
得点だけでなく、残り時間と終了状態を持つ
const LIMIT = 30, TARGET = 10;
function initialState() {
return { x:166, starY:28, drop:0, score:0, missed:0,
remaining:LIMIT, outcome:'playing' };
}remainingは残り秒数、outcomeはプレイ中・クリア・時間切れのどれかを表します。runningは今動かしているかどうかです。一時停止はゲームの終了ではないので、outcomeをplayingのままにしてrunningだけをfalseにします。
開始して数秒後にEscapeを押してみてください。残り秒数と星が止まり、「ゲームを再開」で続きへ戻ります。別のボタンやタブへ移ったときも停止します。再開時に前の時刻を使わないよう、previousをnullに戻しています。
残り時間の中だけ進めてから、勝敗を決める
const elapsed = Math.max(0, Math.min(seconds, s.remaining));
// このelapsedだけ移動・取得を判定する
s.remaining = Math.max(0, s.remaining - elapsed);
if (s.score >= TARGET) s.outcome = 'clear';
else if (s.remaining <= 0) s.outcome = 'timeout';コードのsは現在の得点や位置を持つ状態です。1画面の更新時間が残り時間より長くても、期限の後まで星を進めません。このサンプルでは「ちょうど期限に10個目を取れたらクリア」と決め、取得の後にクリア、次に時間切れを判定しています。期限後の取得は認めません。
画面の更新が間に合わない場合も、経過時間を0.05秒以下に分けて移動と取得を処理します。表示する秒数は切り上げです。表示が「残り1秒」でも、内部では1秒未満の場合があります。
やり直しでは、初期状態を作り直す
reset.addEventListener('click', () => {
pause();
state = initialState();
paint();
});「最初からやり直す」を押すと、残り30秒、得点0、取り逃し0、中央の星と受け皿へ戻ります。直前に押していたキーもpauseで消します。初期状態を1か所にまとめておくと、得点だけ戻して時間を戻し忘れる、といった抜けを減らせます。
確認は、クリア後と失敗後の両方から行います。結果が出た後にキーを押しても得点が増えないこと、再挑戦の開始ボタンが使えること、一時停止を5秒続けても残り時間が変わらないことを確かめました。10個目と期限が重なる場合、期限を少し越える場合は、状態を指定するコード検査でも確認しています。
動かないときはcanvasの操作領域を選んでからキーを押します。勝敗が付かないときは、古い第05回を開いていないか、script.jsが同じフォルダーにあるかを確認してください。画面の左右ボタンは1回で32px動く確認用で、スマホ実機で遊びやすい長押し操作はまだ未対応です。
次は、画像・音・フォントを選ぶ
第07回：画像・音・フォントを公開しました。今のルールとHTML/CSS/JavaScriptは維持し、素材の利用条件を確かめてから見た目と音を足します。全12回の進み具合は第01回の目次で確認できます。
第06回の確認日は2026年10月11日。自作コード・図形・READMEはCC0です。PCのブラウザー操作とスマホ幅の表示は確認対象ですが、第06回ではスマホ実機のタッチ操作、全ブラウザー、音は未検証です。次回リンクを2026年10月12日に更新しました。