Claude Codeにセーブ・ロード・一時停止を作らせる頼み方【AIでゲーム開発】
Claude Code に文を1回頼むと、P キーの一時停止、S キーで localStorage に保存するセーブ、L キーのロードを持つブラウザゲームができました。画面を持たないブラウザでキーを送ると、一時停止・セーブ・ロード・セーブが無いときの知らせ・ページを開き直したあとのロードは、頼んだとおりに動きました。
Claude Code に頼んだ文
空の作業フォルダを1つ決め、Claude Code に次の文を1回だけ渡しました。ゲームの中身は、矢印キーで四角を動かしてコインを取るだけの簡単なものにして、一時停止・セーブ・ロードを1文ずつ頼んでいます。
Claude Codeにセーブ・ロード・一時停止を頼んだ文
作業フォルダは C:\games\my-game\ だけです。このフォルダの外は読まない・書かないでください。
HTML ファイル1つ（game.htm）で、ブラウザで動く上から見た小さなゲームを作ってください。
主人公（四角）を矢印キーで動かし、画面に散らばったコインを取るとスコアが1増えます。コインを全部取ると、新しいコインが出ます。
P キーで一時停止します。一時停止のあいだは主人公もコインも動かず、画面の中央に「一時停止中」と出します。もう一度 P キーを押すと続きから動きます。
S キーでセーブします。主人公の位置・スコア・残っているコインの位置を、ブラウザの localStorage に保存してください。
L キーでロードします。保存した内容を読み込んで、その時点の状態に戻します。セーブが無いときに L を押したら、画面に「セーブがありません」と出します。
画面の左上に、スコアと、セーブがあるかどうかを出してください。
作り終えたら、セーブ・ロード・一時停止がそれぞれどう動くかを、ふつうの言葉で説明してください。※ このページの枠の中の作業フォルダの道は、例の道（C:\games\ の下）に置き換えて載せています。ほかの文字はそのままです。
Claude Code は HTML ファイルを1つ作り、動きを次のように説明しました。
一時停止は、P を押すたびに「止まる」と「動く」が切り替わり、止まっているあいだは主人公の位置を動かす処理そのものを止めます。セーブは、主人公の x・y 座標、スコア、残っているコインの座標の一覧を1つの JSON にまとめ、localStorage に1つのキーで保存します。ロードは、そのキーの中身を読み込み、主人公の位置・スコア・コインの並びを、いまの状態に上書きして戻します。セーブが1度も無いときは、画面の下に「セーブがありません」と出して何もしません。左上の「セーブ: あり／なし」は、localStorage にそのキーがあるかを描き直しのたびに見て出します。一時停止のあいだもセーブとロードはできる、とも返しました。
Claude Code は、game.htm はブラウザでそのまま開いて動かせる、とも返しました。キーを押して試した結果は、返事にはありませんでした。Claude Code は、作業が済んだように見えたところで止まります。自分で走らせて結果を読める確かめ（テスト・ビルド・見比べるスクリーンショットなど）が無いと、済んだように見えることだけが手がかりになります。
セーブ・ロード・一時停止が頼んだとおりに動くかを確かめる
そこで、画面を持たないブラウザで game.htm をファイルのまま開き、キーを送りながら、左上・画面の中央・左下に出た文字と、主人公とコインの位置を記録しました。位置は、ゲームを描いている canvas の画素から、主人公の色とコインの色を拾って数えています。ブラウザはまっさらな状態で起こしたので、試しの始めにセーブはありません。
| したこと | 画面に出たこと |
|---|---|
| 開いた直後 | 左上に「スコア: 0」「セーブ: なし」。コインは6枚、主人公は真ん中 |
| セーブが無いまま L | 左下に「セーブがありません」。スコア・主人公・コインはそのまま。2.3秒後には文字が消えていた |
| 右矢印を0.5秒押したまま | 主人公が右へ99ピクセル動いた |
| 主人公をコインに重ねる | スコアが1増え、そのコインが消えた（当たり判定） |
| P | 画面の中央に「一時停止中」 |
| 一時停止中に右矢印を0.6秒押したまま | 主人公は動かず、canvas の画素は押す前と1つも違わなかった |
| もう一度 P | 「一時停止中」が消え、右矢印を0.4秒押すと右へ80ピクセル動いた |
| S | 左下に「セーブしました」。左上が「セーブ: あり」に変わった |
| セーブのあとで動き、コインを1枚取る | スコアが2から3になり、主人公の位置とコインの数が変わった |
| L | 左下に「ロードしました」。スコアが2に戻り、canvas の画素はセーブした直後と1つも違わなかった |
| 動いてから P で止め、L | 「一時停止中」のまま、セーブした時点に戻った。そのあと矢印を押しても動かなかった |
game.htm を読むと、一時停止のあいだは、毎回の描き直しの中で位置を動かす計算だけを飛ばし、描き直しそのものは続ける作りでした。描き直しの繰り返しには requestAnimationFrame を使っています。S・L・P のキーは一時停止かどうかを見ずに受け付けるので、止めたままでもセーブとロードができます。コンソールに、ゲームのコードから出たエラーは0件でした。
セーブに入った中身
S を押したあと、ブラウザの localStorage を試しの側から読むと、「save-load-pause-play-save-v1」というキーに、次の3つが1つの JSON の文字として入っていました。
| 名前 | 中身 | この試しの値 |
|---|---|---|
| player | 主人公の x と y | x が約398、y が約175 |
| score | スコア | 2 |
| coins | 残っているコインの x と y の一覧 | 4枚分 |
localStorage は、開いたページのオリジン（http や https・ホスト名・ポートの組）ごとに値を残す仕組みです。値に期限は無く、ブラウザを閉じても残ります。プライベート（シークレット）の窓で開いたページの値は、最後のプライベートの窓を閉じたときに消えます。キーと値は文字として保存されるので、オブジェクトや配列は JSON.stringify() で文字にしてから setItem で保存し、読むときは getItem で取り出して JSON.parse() で元の形に戻します。getItem は、そのキーが無いときは null を返します。
game.htm は、L を押したときに getItem の結果が null なら「セーブがありません」を出し、null でなければ JSON.parse で戻した値で、主人公の位置・スコア・コインの一覧を置き換える作りでした。キーは、KeyboardEvent の code（KeyP・KeyS・KeyL と矢印キー）で見分けています。code は、押して出る文字ではなく、キーボードのどのキーかを表す値で、キーの配列や Shift などを押しているかで変わりません。
ページを開き直してからロードする
同じブラウザでページを開き直すと、左上は「スコア: 0」「セーブ: あり」で、主人公は真ん中に戻り、コインは6枚、開き直す前と違う場所に出ました。セーブした4か所には、コインは1枚もありませんでした。
ここで L を押すと、左下に「ロードしました」が出て、スコアは2に戻り、主人公はセーブした位置（1ピクセル以内）に、コインはセーブした4か所に4枚戻りました。そのまま残りの4枚を取ると、スコアは6になり、新しいコインが6枚出ました。
この試しでは、game.htm を Web サーバーを通さず、ファイルのまま（file: の URL で）開いています。file: の URL で開いたページの localStorage のふるまいは決まっておらず、ブラウザによって違うことがあり、あとから変わることもあります。ブラウザそのものを閉じてから開き直したとき、Chrome 以外のブラウザ、Web サーバーから配ったときは、この試しでは試していません。
Claude Code でゲームを1から作る手順は、初心者がブラウザゲームを作るにあります。タイトル画面とスコアを頼んだ例は、タイトル・スコア・画面サイズ対応の頼み方と直し方にあります。
情報源
- Window: localStorage property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage確認日 2026-09-25
- Storage: setItem() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem確認日 2026-09-25
- Storage: getItem() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem確認日 2026-09-25
- JSON.stringify()（MDN）https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify確認日 2026-09-25
- JSON.parse()（MDN）https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse確認日 2026-09-25
- KeyboardEvent: code property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code確認日 2026-09-25
- Window: requestAnimationFrame() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame確認日 2026-09-25
- Best practices for Claude Code（Claude Code の公式ドキュメント）https://code.claude.com/docs/en/best-practices確認日 2026-09-25