この記事の目次 開く・閉じる
今回の仕上がりは、こんな感じ
下の試作品は、そのまま触れます。最初は停止中です。「試作品を動かす」を押し、中央の星が受け皿へ届くまで待ってください。拾うと表示が「集めた星1個」に変わり、次は左、その次は右から落ちます。落とした星も次へ進むため、失敗を気にせず移動を試せます。
前回のファイルを残して、第04回を開く
必要なのはPC、ブラウザ、テキストエディタです。第03回の保存・展開手順を引き継ぎます。有料サービスやアカウント、追加ライブラリは使いません。今回はHTML・CSS・JavaScriptをすべて更新するため、上のZIPを新しいstar-collector-04フォルダーへ展開します。前回のフォルダーへ上書きしないでください。
star-collector-04/
index.html
style.css
script.js
README.txt展開したindex.htmlを開きます。濃い青の画面と開始ボタンが見えたら、「試作品を動かす」を押します。中央の星を拾ったら「一時停止」で止め、数が1個になっているか確認します。
再び開始し、ゲーム画面を押してから←→キーを使います。受け皿が画面端で止まれば移動の確認も完了です。下の「左へ動かす」「右へ動かす」は、1回のクリックで32pxずつ移動します。こちらは押し続ける操作ではありません。
「最初の状態へ戻す」は停止した状態で0個へ戻します。これは確認用のリセットです。失敗画面から再挑戦する流れは第06回で作ります。ファイルを保存して開く方法が分からなくなったら、第03回の保存・展開手順へ戻れます。
移動・落下・取得は、どこに書いてある？
index.htmlには画面とボタン、style.cssには色と配置を置きました。動作の中心はscript.jsです。先頭の数値を使い、受け皿の位置と星の高さ、取得数を覚えます。変数は「今どこにあるか」を書き換えるために使います。
画面外へ出さない移動
function movePad(state, distance) {
state.x = Math.max(0, Math.min(WIDTH - PAD_WIDTH, state.x + distance));
}state.x + distanceで移動先を計算し、0より左と、画面幅から受け皿の幅を引いた位置より右には進まないようにしています。今回の画面幅は420、受け皿の幅は88なので、左端の座標は0〜332の間です。
毎回の描画までに進む距離
state.starY += STAR_SPEED * seconds;
requestAnimationFrame(frame);星の高さには「1秒に進む距離×前の描画からの秒数」を足します。毎回同じ距離だけ動かすと、描画回数が違う画面で速度も変わるためです。requestAnimationFrameは次の描画前に関数を呼ぶためのブラウザ機能です。サンプルは最大0.05秒ずつ進め、別のタブへ移ったときは停止します。
重なっただけで何度も加算しない
星の下端が受け皿の上辺を通過し、横方向でも重なったときに1個増やします。加算後はすぐ次の星を上へ戻すので、同じ星を毎フレーム数えません。星の見た目は五角の図形ですが、判定には中心から14pxの範囲を使っています。細かな角の形に沿った判定ではありません。
今回は星を中央・左・右の順で落とし、再現しやすくしました。乱数、敵、ランキングはありません。コード全体はZIP内に入っています。上の短い抜粋だけでは動かないので、まず配布した3ファイルで動作を確かめてください。
星が速すぎたら、どの数字を変える？
エディタで第04回のscript.jsを開き、先頭のconst STAR_SPEED = 150;を探します。150を100へ変更してUTF-8で保存し、ブラウザを再読み込みします。開始ボタンを押すと、星の落下が遅くなります。単位は1秒あたりの画面内の距離です。
今回はこの変更を確認用コピーで試し、星の落下が遅くなることを確認しました。配布版は150のままです。変化がなければ、保存したファイルとブラウザで開いているファイルが同じか確かめてください。確認が終わったら150へ戻し、次回へ引き継ぎます。AIを使う場合も、この一つの数値と実際の動きを見比べる補助にとどめられます。
動かない・拾えないときは？
矢印キーでページがスクロールする
開始後にゲーム画面を一度押してから操作します。ゲーム画面へキーボードの操作先を移すためです。記事全体の矢印キー操作を止める実装にはしていません。下の移動ボタンも使えます。
止めたのに星だけ動く
この配布版は一時停止で描画の予約を取り消します。独自にコードを変えた場合は、開始するたびに描画ループを重ねていないか確認します。開始・停止を繰り返しても、星の速度が上がらないことを試してください。
星を逃したら失敗？ 10個で終わる？
今回の試作品はどちらも未実装です。落下・取得の確認を続けるため、星を逃しても次へ進み、10個を超えても動きます。完成企画を変えたのではなく、順に機能を足している途中です。
次回は操作と基本ルールを整える
保存した第04回の3ファイルとREADME、企画シートを残します。第05回：操作と基本ルールへ進めます。第06回は30秒・10個の勝敗と再挑戦を扱う予定です。第06回は未公開です。
出典・利用条件・確認範囲
描画の呼び出しと時刻の扱いはMDNのrequestAnimationFrame公式資料を参照しました。サンプルは編集部が制作したHTML・CSS・JavaScriptと図形です。READMEを含めCC0で配布します。講座本文や第三者素材は対象外です。
2026年10月8日にPCブラウザで開始、取得、移動、停止・再開、リセットを確認。配布ZIPの保存・展開後、通信を切ったPCブラウザでローカルHTMLを開き、390px幅の表示と操作も確認しました。スマホ実機、全ブラウザ、完成ルール、外部サービスへのゲーム公開は未検証です。自作コードに通信や結果の保存機能は入れていません。オンライン配信側の計測とは区別します。