Claude Code・Codex で作る

Claude Code や Codex は、パソコンのフォルダの中で直接ファイルを作ったり直したりしてくれるAI(AIエージェント)です。画像や音声などのファイルが多いゲームや、大きめのゲームに向いています。

まんがでわかる Claude Code・Codex
  1. アソビ「画像や音も増えて、ファイルがいっぱい…」
  2. アイ「Claude CodeやCodexなら、フォルダの中で直接作ってくれるよ」
  3. アソビ「直したいところも、伝えるだけ?」 アイ「ファイルを書き換えてくれるよ!」
  4. アソビ「最後は『Asobiaiに公開して』で完成!」

作りかた

  1. 使えるようにする:Claude Code または Codex の説明に沿って入れます。どちらも、ターミナルで使う版とデスクトップアプリがあります。
  2. ゲーム用に空のフォルダを作り、そのフォルダで起動します(ターミナルなら claude または codex)。
  3. 下の指示文の「作りたいゲーム」を書き換えて渡します。
  4. 教えてもらった方法で遊んでみて、直したいところを伝えます。エージェントがファイルを書き換えて直してくれます。
  5. 公開する:Asobiai の MCP をつないでおけば、「Asobiai に公開して」と頼むだけで公開できます(つなぎ方)。直したあとは「Asobiai のゲームを更新して」。フォルダごと公開ページにアップロードしたり、GitHub に push して取り込んだりもできます。
このフォルダに、ブラウザで遊べるゲームを作ってください。

# 作りたいゲーム
(ここにアイデアを書く。例:宇宙船を左右に動かして、降ってくる隕石をよけるゲーム。だんだん速くなる)

# 条件
- 起動ファイルは index.html にして、ビルドなしでそのまま動くようにする(ライブラリを使う場合はCDNから読み込む)
- 画像や音声などの素材は assets フォルダに置き、相対パス(./assets/...)で読み込む
- 画面サイズに合わせて自動でリサイズする(iframeの中で表示される)
- キーボード・マウスに加えて、スマホのタッチ操作でも遊べるようにする
- タイトル画面、遊び方の説明、ゲームオーバー画面、リトライを用意する
- スコアがあるゲームなら、ゲームオーバーのときに次のコードを呼ぶ
  window.AIGame?.submitScore(score)
- できたら、このパソコンで遊んで確かめる方法を教えて

ポイント:エージェントはフォルダの中のファイルを書き換えます。ほかのファイルが入っていない、ゲーム用のフォルダで使いましょう。