Claude Codeにタイトル・スコア・画面サイズ対応を作らせる頼み方【AIでゲーム開発】

Claude Code に頼んだ文

空の作業フォルダを1つ決め、Claude Code に次の文を1回だけ渡しました。ゲームの中身は受け皿で玉を受けるだけの簡単なものにして、タイトル・スコア・画面の伸び縮みの3つを1文ずつ頼んでいます。

作業フォルダは D:\Claude_Game_Site\drafts\W-141-A\title-score-screen.play\ だけです。このフォルダの外は読まない・書かないでください。

ブラウザで開くだけで遊べる HTML ファイル1つ（game.htm）を作ってください。
中身は簡単でいいです：左右キーで受け皿を動かして、上から落ちてくる玉を受けるとスコアが1増えて、3回落としたらゲームオーバー。
それに、タイトル画面（Enter で始まる）→ ゲーム → ゲームオーバー画面（Enter でタイトルに戻る）の流れと、画面の上にスコアの表示を付けてください。
ブラウザの窓の大きさを変えても、ゲームの画面が縦横の比を保ったまま窓に合わせて伸び縮みするようにしてください。
できたら、作ったファイルの道と、どう作ったか（画面の切り替え・スコア・伸び縮みの仕組み）を短く返してください。

Claude Code は HTML ファイルを1つ作り、仕組みを次のように説明しました。

画面の切り替えは、「タイトル」「プレイ中」「ゲームオーバー」のどれにいるかを1つの変数で覚え、毎回の描き直しでその変数を見て描く中身を変える作りです。Enter でタイトルからプレイ中へ、ゲームオーバーからタイトルへ移ります。スコアは、玉が受け皿に重なったら1増え、画面の下を通り過ぎたらミスが1増え、ミスが3でゲームオーバーです。伸び縮みは、ゲームを幅800・高さ600の canvas に描き、表示の大きさだけを変えます。窓の幅÷800と窓の高さ÷600の小さいほうを倍率にするので、縦横比は4:3のまま、余った部分は黒い帯になります。窓の大きさが変わるたびに（resize）計算し直します。

Claude Code は、ブラウザでのキー操作の試しはしていない、とも返しました。

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

画面を持たないブラウザで game.htm を開き、キーを送りながら、画面に描かれた文字（スコア・ミスの数・画面の名前）を描き直しの1回ごとに記録しました。受け皿は、玉の位置を見ながら左右キーで動かしています。描き直しは1秒に60回でした（フレームレート）。

開いた直後はタイトル（題と「Enter キーでスタート」）で、Enter を1回押すとプレイ中になり、「スコア: 0」「ミス: 0 / 3」が出ました。玉を2個受けると、受けるたびに1ずつ増えて「スコア: 2」になりました。玉を3回落とすと、ミスが1・2と増え、3回目でゲームオーバーになって「スコア: 2」が出ました。ゲームオーバーで Enter を1回押すとタイトルに戻り、タイトルで Enter を押して始めた2回目のゲームは、「スコア: 0」「ミス: 0 / 3」に戻っていました。コンソールに、ゲームのコードから出たエラーは0件でした。

窓の大きさも変えて、ゲームの表示の大きさを測りました。

どの大きさでも縦横比は4:3のまま、端は切れず、スクロールも出ませんでした。スマホの画面（375×812 など）として開くと、ページは幅980として組まれ、画面いっぱいに縮めて表示されました。縦横比は同じで、端も切れませんでした。このゲームはキーボードで遊ぶ作りなので、スマホで指で遊ぶことはできません。

1回ずつ押す限りは、頼んだ流れ・スコア・伸び縮みのとおりに動いていました。

困ったこと：Enter の押し方でタイトルが飛び、画面の細かいときに文字がにじんだ

ゲームオーバーで Enter を長めに押すと、次のゲームが勝手に始まった

キーを押したままにすると、少し待ってから同じキーを押した知らせが自動で繰り返し届きます（待ち時間と間隔は OS の設定で変わります）。繰り返しで届いた知らせには repeat という印が付きます。試しでは、押してから500ミリ秒後に、33ミリ秒ごとの繰り返しを送りました。

• ゲームオーバーで Enter を約1秒押したままにすると、22ミリ秒後にタイトルが出て、その517ミリ秒後に、何もしていないのに次のゲームが始まりました。
• Enter を約0.1秒おきに4回押すと、タイトルが見えていたのは134ミリ秒だけで、2回目の押下で次のゲームが始まりました。

ゲームオーバーから戻ったタイトルは、ほとんど見えないまま過ぎていました。玉はすぐ落ち始めるので、受け皿の位置を確かめる前にミスが増えることがあります。

画面の細かいときに、文字と絵の縁がにじんだ

画面の細かさは、devicePixelRatio という値で表されます。CSS の1ピクセルを、画面の実際の画素いくつで描くかを表す値で、ふつうの画面では1、高精細の画面では2が見込まれ、スマホでは2より大きいこともあります。canvas の width と height は、描く絵そのものの画素の数で、CSS の大きさとは別に決まります。描いた絵の画素より表示に使う画面の画素が多いと、絵は引き伸ばされ、にじんで見えます。

このゲームの canvas は、幅800の画素のまま、表示の大きさだけを変えていました。「canvas の画素÷表示に使う画面の画素」を測ると、1なら等倍、1より小さいほど引き伸ばしです。

1280×720・細かさ2で、タイトルの題字のまわりを撮り、白でも背景色でもない「にじんだ画素」が文字の画素に占める割合を数えると、44.6%でした。

1回目に Claude Code に渡した文

コードのどこが悪いかを知らなくても書けることだけで、直すための文を作りました。入れたのは、見た症状（数えた数字つき）、何をしたら起きるか、望む動きの3つです。

作ったときとは別の新しい Claude Code に、次の文をそのまま1回渡しました。1行目は作業フォルダの断りです。

作業フォルダは D:\Claude_Game_Site\drafts\W-141-A\title-score-screen.play\ だけです。このフォルダの外は読まない・書かないでください。直すのは game.htm です。

game.htm の玉受けゲームで、困っていることが2つあります。直してください。

ゲームオーバーの画面で Enter を押したとき、タイトル画面を飛ばして次のゲームが始まってしまうことがあります。

Enter を半秒くらい長めに押すと、タイトルが一瞬（0.5秒ほど）出たあと、何もしていないのに次のゲームが始まりました。
Enter を急いで何回か押すと、タイトルは 0.13 秒くらいしか見えずに次のゲームが始まりました。
望む動き：ゲームオーバーの画面で Enter を押したら、長く押しても何回押しても、いったんタイトル画面で止まってほしいです。タイトルで Enter を押し直したときだけ、ゲームが始まるようにしてください。


スマホや画面の細かいノートPCで開くと、文字や玉・受け皿の縁がぼやけてにじみます。

例：窓の大きさ 1280×720、画面の細かさ（devicePixelRatio）2 のとき、タイトルの文字の縁がにじみました。
普通のパソコンの画面でも、窓を 1920×1080 くらいまで大きくすると、少しぼやけます。
望む動き：窓の大きさや画面の細かさが変わっても、今と同じように縦横比を保ったまま、文字や絵がくっきり表示されてほしいです。ゲームの動き（玉の速さ・受け皿の大きさ・当たり方）は今のままにしてください。
直したら、何を変えたかを短く教えてください。

1回目の直しで直ったこと・残ったこと

Claude Code の説明では、Enter は、repeat の印が付いた知らせを無視し、さらにタイトルに入ってから350ミリ秒は Enter でのスタートを受け付けないようにしました。にじみは、canvas の width と height を「表示の大きさ×devicePixelRatio」にし、描く側の座標は今までの800×600のまま使えるように、描くときの拡大率を設定し直す形です。窓の大きさが変わるたびに計算し直します。

canvas の width を設定し直すと、描くときの設定（色や拡大率など）も初めの状態に戻ります。Claude Code の直し方では、そのたびに拡大率を設定し直していました。

Claude Code は今回も、キーを押す試しはしていないと返したので、直す前と同じやり方で数え直しました。

ゲームオーバーで Enter を約1秒押したままにすると、直す前は517ミリ秒後に次のゲームが始まりましたが、1回目の直しのあとはタイトルで止まりました。約0.12秒おきの連打は、4回でも6回でも4回目の押下で次のゲームが始まりました（1回目の押下から403ミリ秒後と388ミリ秒後）。直す前は、約0.1秒おきの4回で、タイトルが134ミリ秒見えたあと2回目の押下で始まっていました。押し方ごとの結果は、「2回目の直しの結果」の表にまとめています。

画面の細かさは、次のように変わりました。

押したままのときと、開いたときのにじみは直りました。窓の大きさ・縦横比・スコアとミスが0に戻ることも、直す前と同じでした。

残ったのは2つです。連打は、タイトルに入ってから350ミリ秒を過ぎた押下でゲームが始まるため、4回・6回の連打では今も次のゲームに入りました。もう1つは、開いたあとで画面の細かさだけが変わったときです。窓の大きさが変わったときの知らせ（resize）は、この試しでは0回で、canvas の画素は元のままでした。devicePixelRatio は、ページを拡大・縮小したときや、画素の細かさが違う画面へ窓を動かしたときに変わることがあり、その変化は画面の条件に当てはまるかを調べる仕組み（matchMedia）で調べられます。

2回目に Claude Code に渡した文

1回目の直しで直ったことを先に書き、残った2つを、1回目と同じく症状・起こし方・望む動きの形で書きました。直してもらった押したままの動きを変えないことも、望む動きに入れています。また別の新しい Claude Code に、次の文をそのまま1回渡しました。

作業フォルダは D:\Claude_Game_Site\drafts\W-141-A\title-score-screen.play\ だけです。このフォルダの外は読まない・書かないでください。直すのは game.htm です。

game.htm の玉受けゲームを直してもらいました。Enter の押しっぱなしと、開いたときのにじみは直りました。ありがとうございます。まだ困っていることが2つあります。直してください。

ゲームオーバーの画面で Enter を急いで何回も押すと、今もタイトル画面で止まらずに次のゲームが始まります。

0.12 秒おきくらいに4回押すと、タイトルが 0.4 秒ほど見えたあと、次のゲームが始まりました。6回押しても同じでした。
2回だけ押したときは、タイトルで止まりました。
望む動き：ゲームオーバーの画面で Enter を何回続けて押しても、いったんタイトル画面で止まってほしいです。タイトル画面が出てから、あらためて Enter を押したときだけ、ゲームが始まるようにしてください。


ゲームを開いたあとで画面の細かさ（devicePixelRatio）が変わると、文字や絵がにじんだままになります。

例：窓の大きさ 1280×720、画面の細かさ 1 で開いてから、窓の大きさはそのままで画面の細かさを 2 に変えると、タイトルの文字の縁がにじみました。窓の大きさを変えるか、開き直すまで直りませんでした。
ノートPCの画面と外付けの画面のように、細かさの違う画面の間で窓を動かしたときに起きると考えています。
望む動き：開いたあとで画面の細かさが変わっても、くっきり表示されてほしいです。縦横比を保つこと、ゲームの動き（玉の速さ・受け皿の大きさ・当たり方）、直してもらった押しっぱなしの動きは、今のままにしてください。
直したら、何を変えたかを短く教えてください。

2回目の直しの結果

Claude Code の説明では、連打は、タイトルにいる間に Enter が来るたびに、スタートを受け付けない締切をその時点から350ミリ秒先へ延ばし、締切を過ぎてから押された1回だけでゲームを始めるようにしました。画面の細かさは、画面の条件に当てはまるかを調べる仕組み（matchMedia）で「いまの細かさ」に当てはまるかを見張り、当てはまらなくなったら canvas の大きさを計算し直し、新しい細かさで見張り直す形です。

Claude Code はこのときも、キーを押す試しはしていないと返しました。同じやり方で数え直した結果です。

4回の連打は、直す前だけ約0.1秒おき、直したあとの2回は約0.12秒おきに押しました。

連打してもタイトルで止まり、間をおいて押し直したときだけ次のゲームが始まるようになりました。1回ずつ押したときの流れ、スコアとミスが0に戻ること、窓の大きさと縦横比、開いたときのにじんだ画素の割合（15.1%）は、1回目の直しのあとと同じでした。コンソールに、ゲームのコードから出たエラーは0件でした。

開いたあとで画面の細かさだけが変わるときは、この試しでは確かめきれませんでした。画面を持たないブラウザの設定で細かさを1から2に切り替えると、devicePixelRatio は2になり、画面の条件に当てはまるかを調べる仕組み（matchMedia）で調べた当てはまりも変わりましたが、ページが見張っていた変化の知らせは、2秒待っても0回で、canvas の画素は元のまま（0.5）でした。そこで、ページが見張りに登録した受け手に、変化の知らせを試しの側から1回渡すと、canvas は1920×1440になり、canvas の画素÷表示に使う画面の画素は1に戻りました。細かさを1に戻して同じように渡すと、960×720・1に戻りました。

分かったのは、変化の知らせが届けば描き直す作りになっていることまでです。細かさの変化は、どちらの直しの試しでも、画面を持たないブラウザで設定を切り替えて起こしたもので、2つの実物の画面の間で窓を動かしては試していません。

コンソールに赤い文が出て動かないときの渡し方は、コンソールの赤い文を渡して直した例にまとめています。Claude Code でゲームを1から作る手順は、初心者がブラウザゲームを作るにあります。

情報源

• Window: devicePixelRatio property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio確認日 2026-09-24
• HTMLCanvasElement: width property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/width確認日 2026-09-24
• Optimizing canvas（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas確認日 2026-09-24
• Window: resize event（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event確認日 2026-09-24
• Window: matchMedia() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia確認日 2026-09-24
• KeyboardEvent: repeat property（MDN）https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat確認日 2026-09-24
• CanvasRenderingContext2D: setTransform() method（MDN）https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform確認日 2026-09-24
• Best practices for Claude Code（Claude Code の公式ドキュメント）https://code.claude.com/docs/en/best-practices確認日 2026-09-24