この記事の目次 開く・閉じる
今回の完成形を触ってみる
「練習を始める」を押し、中央の星が落ちるまで待つと1個拾えます。次は左、その次は右。まずは受け皿を動かさず、取得と取り逃しの違いを見てください。
前回を残し、新しいフォルダーで開く
必要なのはPC、ブラウザ、テキストエディタです。アカウントや追加ライブラリは使いません。ZIPを保存し、新しいstar-collector-05フォルダーへ展開します。第04回を上書きしないでください。
star-collector-05/
index.html
style.css
script.js
README.txt- 展開した
index.htmlをブラウザで開きます。 - 「練習を始める」を押し、←→かA・Dを押し続けて移動します。
- 左右を同時に押すと停止。片方を離すと、残した方向へ動きます。
- Escapeキーか「一時停止」で止めます。「最初へ戻す」は停止し、位置と両方の数を戻します。
下の左右ボタンは、1回押すと32px移動する位置調整用です。押し続ける操作ではありません。ボタンへ操作先が移ると落下は一時停止するので、位置を決めてから「練習を始める」で再開します。展開方法は第03回へ戻れます。
拾った星と逃した星を分ける
星の下端が受け皿の上辺を通過し、横方向でも重なれば取得です。星全体が画面の下へ出たら取り逃しとして数えます。見た目の五角形の角に沿った判定ではなく、中心から14pxの範囲を使っています。
if (crossed && overlaps) {
state.score += 1;
nextStar(state);
} else if (state.starY - STAR_RADIUS > 360) {
state.missed += 1;
nextStar(state);
}これは判定部分の抜粋です。関数や定数を含む全体はZIPにあります。どちらの場合もすぐ次の星へ進むため、同じ星を何度も数えません。逃しても取得数は減らさず、練習は続きます。10個を超えても終わらないのは、勝敗をまだ入れていないためです。
押しているキーを覚え、離れたら解除する
script.jsでは押したキーをSetへ入れ、離したキーを取り除きます。左と右の状態から移動方向を求めます。同じ左方向のキーを二つ押しても、速度を倍にはしません。
A・Dの位置はevent.codeのKeyA・KeyDで扱います。文字としてのevent.keyとは役割が違い、キーボード配列によって印字と一致しない場合があります。矢印キーも使えます。すべての配列を検証したわけではありません。
ゲーム画面から操作先が移る、ウィンドウを離れる、別タブへ移る、Escapeを押すと一時停止し、押したキーの記録も消します。戻っただけでは再開しません。開始ボタンを押します。キー処理はゲーム画面に限定し、記事全体の矢印キーを止めない実装です。
できたかを、この順で確認する
- 中央で待ち、取得数だけが1になる。
- 「最初へ戻す」で両方0になり、星も止まる。
- 左端・右端で受け皿が止まる。
- 星から離れて待ち、取り逃しだけが1増える。
- 移動中にTabを押すと止まり、戻っても勝手に動かない。
キーが効かない
開始してからゲーム画面を一度押してください。左右ボタンへ移った場合は落下も停止します。ゲーム画面のtabindex="0"を消すとキーボードの操作先にできないので、編集した場合は確認します。
キーを離しても動く
押したときと離したときで、keyとcodeを混ぜて保存していないか確認します。今回の配布版は保存も解除もcodeを使います。
第06回へ持っていくもの
3ファイルとREADME、最初の企画シートを残します。第06回：クリア・時間切れ・再挑戦は公開済みです。固定した完成条件「30秒以内に10個」を使って進めます。
出典・利用条件・確認範囲
キーの扱いはMDNのkeydownとKeyboardEvent.codeを参照しました。自作コード・図形・READMEはCC0。講座本文や第三者素材は対象外です。
2026年10月10日にPCで開始、取得、取り逃し、A・Dと矢印移動、停止、Tab移動、リセットを確認。判定モデル15項目と390px幅の表示も確認しました。配布ZIPを保存・展開し、通信を切ったブラウザで動作を確認しています。スマホ実機、全ブラウザ、勝敗は未確認です。サンプル自体に通信や結果保存はありません。X検索は取得できず、最近の流行の裏付けには使っていません。