20手で星を集めるゲームを作る

「動いた」から、「ルール通りに遊べる」へ

AIに「面白いゲームを作って」と頼むと、見た目が整っていても、勝敗が決まらなかったり、同じアイテムで何度も加点されたりします。このページでは、7×5マスの盤面で20手以内に5つの星を集めるゲームを題材に、仕様を決め、動かし、壊れ方まで確かめます。

ここでAIに任せるのはコードの下書きと原因の候補出し。ルールの決定と合否の確認は人が担当します。サービスを契約しなくても、完成例とコードを読んで学べます。外部AIを使う場合のアカウント・年齢・料金条件は、そのサービスで別途確認してください。

• 初級: 完成例を遊び、入力・状態・表示の役割を説明する。
• 中級: 壁のルールを1つ変え、同じ操作列で比較する。
• 上級: 画面と判定を分け、境界条件を自動テストする。

完成例: STAR ROUTE

動く完成例を開く HTMLを保存する

操作は画面の上下左右ボタン、または操作領域にフォーカスして矢印キー。終了後は「最初から」で、位置・手数・星がすべて戻ります。ネット通信、ログイン、学習記録の保存はありません。

初級: 1ファイルを動かし、仕様を小さくする

必要なもの

保存したHTMLを開けるブラウザーと、プレーンテキストを編集できるエディター。読むだけ・遊ぶだけなら、このサイトだけで足ります。コードを変更するときは元ファイルのコピーを残してください。

1. まず完成例を遊び、「壁にぶつかる」「星のあったマスへ戻る」「最初から」を試します。
2. HTMLを保存し、ブラウザーで開きます。保存環境で拡張子が .txt に変わっていないか確認します。
3. エディターで開き、タイトルだけを変更して保存・再読み込みします。動作を変える前に、編集と確認の往復に慣れます。
4. コード内の MAX_MOVES を20から16へ変更します。上の15手の経路では勝てることを確かめます。
5. 次に14へ変更します。同じ経路は途中で終了するはずです。変更するのは1か所ずつにします。

AIへ頼むなら、先にこの仕様を渡す

ブラウザーで動く1ファイルの格子ゲームを作ります。
7列×5行。プレイヤーは(0,2)。座標は左上が(0,0)。
星は(1,2),(3,0),(5,2),(6,4),(3,4)。
壁は(2,1),(2,2),(2,3),(4,1),(4,3)。
上下左右へ1マス移動。盤面外と壁への入力は無効で、手数を減らさない。
有効な移動20回以内で星5個なら勝利。20回目の取得も勝利を優先。
同じ星で二重加点しない。終了後は移動しない。
再開で位置、残り手数、星を初期化する。
キーボードと画面ボタンを用意し、保存や外部通信は不要。
先に「状態」「入力」「判定」「表示」を分けて説明してください。
実装後、仕様に対応したテスト例と、未確認の点を挙げてください。

「状態」はゲームが覚えている情報です。この例なら、位置、残った星、使った手数、遊んでいるか終了したか。「表示」は、その状態を盤面や数字として見せる仕事です。

入力「右」
  ↓
終了済み？ → はい: 何も変えない
  ↓ いいえ
壁・盤面外？ → はい: 位置と手数を変えない
  ↓ いいえ
位置と手数を更新 → そのマスの星を消す
  ↓
星がゼロなら勝利 / そうでなく20手なら終了
  ↓
画面を描き直す

中級: 1つのルール変更を、同じ操作で比較する

「難しくする」は、壁を増やす・手数を減らす・時間制限を足すなど複数の意味があります。一度に変えると何が効いたか分かりません。まず壁にぶつかったら手数を使うかだけを比べます。

これは編集上の設計比較です。「Bの方が面白い」と実験で確定したわけではありません。どちらを選ぶかは、反射神経よりルートを考えてほしいのか、入力の正確さも試したいのかで判断します。

変更を頼む依頼文

添付したゲームを、壁・盤面外への入力でも1手消費する仕様に変更してください。
星の配置、見た目、正常な移動、再開処理は変えません。
終了後の入力は引き続き無視します。
変更箇所だけ示し、初期状態の「右・右」で残り18手になるテストと、
無効な20手目でも敗北になるテストを追加してください。

ありがちな失敗と、直す場所

自由に滑らかに動くゲームなら、同じマスかどうかだけでは足りません。キャラクターを囲む四角形や円の重なりを調べる「当たり判定」に発展します。格子の例から急に物理エンジンへ移る必要はありません。

上級: 状態を渡すと、次の状態が返る設計

実装の中心は nextState(現在の状態, 入力) です。関数の中で画面を書き換えず、乱数・現在時刻・通信も参照しません。同じ状態と入力なら同じ結果になるため、表示を開かなくてもルールを検証できます。

const s0 = initialState();
const s1 = nextState(s0, "right");
const s2 = nextState(s1, "left");
const s3 = nextState(s2, "right");
console.assert(s3.stars.size === 4); // 再訪で増えない
console.assert(s0.stars.size === 5); // 元の状態も壊さない

判定部分のJavaScriptとNode.js用テストを同じフォルダーへ保存し、Node.jsがある環境なら node core.test.cjs で実行できます。ゲームを遊ぶだけならNode.jsは不要です。

自動テストで分かること、分からないこと

• 分かる: 壁をすり抜けない、星の二重取得をしない、勝利と手数切れの優先順位、終了後の固定、再開時の初期化。
• 別に確かめる: ボタンの押しやすさ、説明の分かりやすさ、難しさ、楽しさ。自動テスト合格は「面白い」の証明ではありません。

制作時AIと、プレイ中AIを分ける

このゲームは制作をAIに手伝ってもらえても、プレイ中にAIへ問い合わせません。動作が再現でき、通信待ちや呼び出し料金もありません。NPCが即興で会話する作品ならプレイ中生成が役立つ一方、待ち時間、予期しない発言、費用上限、通信失敗時の固定台詞が必要です。APIキーを公開HTMLへ埋め込む設計は採用しません。

ランダムなマップへ進むなら、先に「すべての星へ到達できる」「手数上限内に解ける」を検査します。乱数の種を記録すれば不具合の盤面を再現しやすくなりますが、種が同じでも実装や乱数方式が変われば一致するとは限りません。

公開前の検証メモ

2026年10月22日確認。添付の判定テスト12件はNode.jsで実行し、すべて合格しました。ブラウザー操作と画面表示は、この版では検証待ちです。実際の利用者によるユーザーテストも未実施です。未知の入力として jump だけでなく、toString・constructor・__proto__ も無視されることを確認しています。自分で変更した版は、次の条件を再確認してください。

1. 最初は5個・残り20手で、左端へ出られない。
2. 右・右では星1個取得、壁で停止、残り19手。
3. 右・左・右でも取得は1個のみ。
4. 既知の15手で勝利し、その後の入力で状態が変わらない。
5. 星を残して20手使うと終了し、最初からで完全に戻る。
6. キーボードだけでも操作でき、スマートフォン幅で盤面がはみ出さない。

次の作品では、まず盤面の配置だけを変更しましょう。「変えたルール」「予想した影響」「同じ操作での結果」「採用理由」を短く残せれば、AIのコードを受け取るだけの段階から一歩進めています。

出典と、さらに読む資料

サービスの機能や技術は一次情報を参照。練習課題と比較例は、AI ATLASの編集制作です。

1. KeyboardEvent: key MDN Web Docs · 確認 2026-10-22 · 矢印キーの入力をキー名で扱う根拠。ゲーム設計とサンプルはAI ATLAS独自教材。
2. KeyboardEvent: repeat MDN Web Docs · 確認 2026-10-22 · キーを押し続けたときの繰り返し入力の判別。
3. Set MDN Web Docs · 確認 2026-10-22 · 重複しない値の集合と、取得済みの星を削除する実装の根拠。
4. 2D collision detection MDN Web Docs · 確認 2026-10-22 · 自由移動へ発展するときの当たり判定。この記事の格子ゲームは同一マス判定を使う。
5. Object.hasOwn() MDN Web Docs · 確認 2026-10-22 · 宣言した方向名だけを受け入れ、継承されたtoStringなどを入力として認めない判定。