Claude Codeに、キーとタッチの入力を作らせる頼み方【AIでゲーム開発】

Claude Code に頼んだ文

空の作業フォルダを1つ決め、Claude Code に次の文を1回だけ渡しました。矢印キーで動く自機の基本はAIに移動と当たり判定を作らせる頼み方で扱っているので、この文では、キーボードに加えてスマートフォンのタッチボタンとパソコンのマウスでも同じように動くことを頼んでいます。

作業フォルダは C:\games\my-game\ だけです。このフォルダの外は読まない・書かないでください。

HTML ファイル1つ（game.htm）で、ブラウザで動く小さなゲームを作ってください。画像のファイルは使わず、四角と色だけで描いてください。
画面の下の床に自機（四角）がいて、左右に動き、ジャンプできます。上から落ちてくる星（小さな四角）に当たるとスコアが1増えます。スコアを画面の左上に出してください。
キーボードでは、左右の矢印キーと A・D キーで左右に動き、スペースキーと上矢印キーでジャンプします。キーを押しているあいだは動き続け、離すと止まるようにしてください。
スマートフォンでも遊べるように、画面の下に「←」「→」「ジャンプ」の3つのボタンを出し、タッチで押しているあいだは同じように動くようにしてください。指を離したり、指がボタンの外へずれたりしたら止まるようにしてください。
パソコンのマウスでボタンを押しても同じように動くようにしてください。
キーボードとタッチを同時に使っても、動きがおかしくならないようにしてください。
作り終えたら、キーボード・タッチ・マウスの入力をどう受け取り、自機の動きにどうつないでいるかを、ふつうの言葉で説明してください。

※ このページの枠の中の作業フォルダの道は、例の道（C:\games\ の下）に置き換えて載せています。ほかの文字はそのままです。

Claude Code は HTML ファイル1つを作り、入力の受け取り方を次のように説明しました。

アクション（左・右・ジャンプ）ごとに、キーボードから押されているかと、タッチ・マウスから押されているかを別々に持たせ、どちらか一方でも押されていれば「そのアクションが有効」と扱う作りだと説明しました。これで、キーボードとタッチを同時に使っても、片方を離してももう片方が押されていれば動き続け、両方離して初めて止まる形になる、とのことです。

タッチとマウスは、どちらも同じ仕組み（Pointer Events）で扱い、画面下の3つのボタンのそれぞれについて、指やマウスがボタンの内側にあるかどうかをそのつど判定して、内側にあるあいだだけ有効にする作りだと説明しました。複数の指で同じボタンを押す場合にも対応できるよう、指ごとに内側にいるかどうかを管理している、とも書いています。

Claude Code は、node -e による埋め込み JS の構文チェックを済ませた、と返しました。この説明は Claude Code 自身の説明で、動いた証拠ではありません。次の節は、その動きを画面を持たないブラウザで確かめた記録です。

頼んだとおりに動くかを確かめる

game.htm の中の自機の位置は外から直接読めないので、ページが読み込まれる前に走る処理を1つ差し込みました。自機は幅44×高さ54ピクセルの四角として描かれる（game.htm を読んで確かめた）ので、この処理は、四角を描く命令が呼ばれるたびに「そのときの色・引数（横の位置・縦の位置・幅・高さ）・時刻」を記録し、幅44×高さ54の記録だけを自機の位置として使いました。あわせて、キーボード・タッチ・マウス・ポインタの出来事が起きた時刻と種類も記録しています。

ブラウザの窓の大きさは幅480×高さ800にし、タッチの出来事を送れるようにしました。game.htm を読むと、自機を描く canvas（ゲームの描く範囲）の幅は480ピクセルでした。自機は横218ピクセルの位置から始まり、右の壁は横436ピクセル（canvas の幅480から自機の幅44を引いた位置）です。以下は、確かめた組ごとにページを開き直して行った結果です。

キーを押しているあいだ動き続け、離すと止まる（矢印・A・D）

4つのキーとも、押しているあいだは横の位置が同じ向きに増え続け（右のキーは増え、左のキーは減り）、離すと450ミリ秒待っても位置は変わりませんでした。ArrowLeft と KeyA、ArrowRight と KeyD は、押した時間ごとの横の位置がほぼ同じ並びで、同じ向きのキーとして扱われていました。

スペースキー・上矢印キーでジャンプする

60ミリ秒だけキーを押して離し、そのあとの縦の位置（値が小さいほど高い位置）を読みました。自機は床の上では縦の位置が606です。

どちらのキーも、押して離したあとに縦の位置がいったん小さくなり（上へ上がり）、900ミリ秒後には606（床の位置）へ戻って、1050ミリ秒後もそのままでした。

画面下のボタンにタッチの出来事を送ると動き、外へずらすと止まる

実機の指では試していないので、ここでは「タッチの出来事を送った」結果を書きます。→のボタン（画面下・右側）の中心の座標へ、タッチの出来事（touchstart）を送って押したままにしました。

指をボタンの外へずらす出来事を送ったあとは、300ミリ秒待っても、タッチを離す出来事（touchend）を送ったあとも、横の位置は317.68のまま変わりませんでした。差し込んだ記録には、ボタンを押した時点のポインタの種類（pointerType）が touch で対象が押した→のボタンであったこと、タッチの出来事は touchstart が1件（接触中の指1本）・touchend が1件（接触中の指0本）だったことも残っていました。

マウスでボタンを押しても動く

←のボタン（画面下・左側）の中心の座標へ、マウスの押す出来事（mousePressed）を送り、離す出来事（mouseReleased）を送るまで押したままにしました。

マウスの離す出来事を送ったあとは、450ミリ秒待っても横の位置は44.50のまま変わりませんでした。差し込んだ記録では、ボタンを押した時点・離した時点のどちらもポインタの種類が mouse でした（ウィンドウの mousedown・mouseup という出来事そのものは、この試しでは記録されませんでした）。

キーとボタンを同時に使ったときの動き

ArrowRight を押したまま、→のボタンへもタッチの出来事を送り、キーを先に離してタッチだけを残す順で試しました。自機は横218の位置から始まり、右の壁は横436の位置です。

タッチも離したあとは、300ミリ秒待っても横の位置は391.34のまま変わりませんでした（右の壁の436より手前の位置です）。この順（キーを先に離す）では、キーを離してもタッチが押されたままのあいだは動き続け、タッチも離すと止まりました。キーとタッチの両方が押されているあいだも、片方だけになったあいだも、増え方（時間あたりの横の位置の増え）はほぼ同じで、動きが速くなることはありませんでした。タッチを先に離す順は、この試しでは確かめていません。

この試しのあいだ、コンソールに出たエラー・警告・例外は0件でした。実機のスマートフォンの指での操作、タッチを先に離してキーをあとから離す順、複数の指で同時に別々のボタンを押したとき、タブを裏に回したときの動き、ジャンプで上がっているあいだにもう一度ジャンプの入力をしたときの動きは、この試しでは確かめていません。

キー・タッチ・マウスの入力の受け方の仕組み

game.htm を読むと、入力の状態は、アクション（左・右・ジャンプ）ごとに、キーボード由来かどうかとタッチ・マウス由来かどうかを別々に持たせ、どちらか一方でも押されていれば「そのアクションが有効」と扱う作りでした。この2系統を分けて持つ形が、キーとボタンを同時に使ったときに、片方を離してももう片方が有効なら動き続ける理由です。

キーボードは window に対して keydown・keyup を張り、ArrowLeft・KeyA を左、ArrowRight・KeyD を右、Space・ArrowUp をジャンプに対応させていました。ウィンドウがフォーカスを失ったとき（blur）には、キーボード由来の状態をすべて戻す作りも入っていて、キーを離す出来事を取りこぼしたまま固まることを防いでいます。

画面下の3つのボタン（←・→・ジャンプ）には、タッチとマウスをまとめて扱う Pointer Events（pointerdown・pointermove・pointerup・pointercancel）を張っていました。指やマウスがボタンの内側にあるかどうかをそのつど判定し、内側にあるあいだだけ有効、外へ出ると無効に戻る作りです。複数の指で同時に押した場合も、1本でも内側にあればそのボタンは有効なままになっていました。ボタンを押した要素は、その後のポインタの出来事（pointermove・pointerup）を受け取り続けるしくみ（ポインタのキャプチャ）も使っていて、指やマウスがボタンの外へ出たあとの出来事も、押した要素側で「外側にあるか」を判定できる作りでした。

自機は幅44×高さ54ピクセルの四角で、床の上では縦の位置が606ピクセルになる作りでした。左右の移動は秒速260ピクセル、ジャンプの初速は秒速640ピクセル（上向き）、落ちる速さは毎秒毎秒1500ピクセルずつ増える作りで、ジャンプは自機が床についているときだけ効く作りでした。

タイトル画面やスコア表示、画面の大きさに合わせた伸び縮みは、Claude Codeにタイトル・スコア・画面サイズ対応を作らせる頼み方で扱っています。

情報源

• Overview（Claude Code の公式ドキュメント）https://code.claude.com/docs/en/overview確認日 2026-09-25
• keydown event（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event確認日 2026-09-25
• Pointer events（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events確認日 2026-09-25
• Element: setPointerCapture() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture確認日 2026-09-25
• Touch events（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Touch_events確認日 2026-09-25
• blur event（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event確認日 2026-09-25