Cursorでゲームを作る：初期設定からデバッグまでの使い方
遊びをつくる執筆にClaudeを使用しています。
Cursorは、AIとの対話をコードエディタに組み込んだツールです。「コードを書いてもらう」だけでなく、「エラーの原因を一緒に考える」「既存のコードを読み解く」といった使い方ができるため、ゲーム開発の初心者から中級者まで幅広く使われています。 この記事では、Cursorをゲーム開発に使う場面に絞り、初期設定の判断・プロジェクト構成の考え方・デバッグ時の活用方法を順に説明します。「インストールはしたが、どう使えばいいかわからない」という人が、実際に手を動かせる状態になることを目標にしています。
Cursorを使う前に決めておくこと
Cursorを開いてすぐにコードを書き始めるより、いくつかの設定方針を決めておくほうが後の作業がスムーズになります。
AIモデルの選択は最初の判断です。Cursorは複数のAIモデルを切り替えて使えます。応答速度を重視するか、長いコードへの対応力を重視するかによって選択が変わります。ゲームのロジックは複数ファイルにまたがることが多いため、コンテキスト（AIが一度に読める情報量）が大きいモデルを選ぶと、後半の作業で詰まりにくくなります。具体的なモデル名と料金は変わりやすいため、公式サイトで最新の条件を確認してください。
フォルダ単位でプロジェクトを開くことも重要です。単一ファイルをCursorで開くだけでは、AIが参照できる情報がそのファイル内に限られます。File > Open Folderでプロジェクトのルートフォルダを開くと、AIがフォルダ全体を把握した状態で提案を出せるようになります。
.cursorrules ファイルはプロジェクトのルートに置くテキストファイルで、AIへの指示をあらかじめ書いておける場所です。たとえば「このプロジェクトはCanvas APIを使ったブラウザゲームです。jQueryは使いません。変数名は英語のキャメルケースにしてください」のように書いておくと、質問のたびに前提を説明する手間が省けます。ゲームのジャンルや使用ライブラリが決まっている場合は、最初に作成しておく価値があります。
プロジェクト構成をAIに伝える方法
ゲームを作り始めるとき、ファイル構成を整理してからAIに作業を依頼するほうが、生成されるコードの質が上がります。
最初に行うとよい手順を示します。
- index.html・main.js・style.css の3ファイルを作り、空のプロジェクトとしてフォルダに置く。
- Cursorのチャット（デフォルトは Ctrl+L / Cmd+L）を開き、「このプロジェクトは○○ゲームを作るためのものです。index.htmlはエントリーポイントで、main.jsにゲームのロジックをまとめます」と説明する。
- 続けて「まずゲームループの骨格だけ書いてください」と依頼する。
この手順で重要なのは、最初から「全部作って」と依頼しないことです。ゲームループ・入力処理・描画処理・当たり判定・スコア管理のように機能を分けて依頼すると、生成されるコードが短くなり、何をしているかを追いやすくなります。追いやすいコードはデバッグもしやすくなります。
Cursorには @ファイル名 でチャット内にファイルを引用する機能があります。「@main.js の movePlayer 関数に、壁との衝突判定を追加してください」のように書くと、ファイル全体を貼り付けなくてもAIが対象を把握できます。ゲームが大きくなってきたときに特に便利な機能です。
コードを書いてもらうときの頼み方
Cursorのチャットと、エディタ内でコードを選択して呼び出すCtrl+K（インライン編集）は用途が異なります。
- チャット：新しい機能を追加する・設計を相談する・エラーの原因を調べる、といった「会話が必要な場面」に使います。
- インライン編集（Ctrl+K）：すでに書いてあるコードを「この部分だけ書き直してほしい」という場面に使います。選択範囲を変更するため、影響範囲が小さくコントロールしやすくなります。
ゲーム開発でよくある「頼み方の失敗」は、処理の意図を伝えずに結果だけを求めることです。「ジャンプを実装してください」より「重力加速度を使って、スペースキーを押したときにプレイヤーが上方向に初速を得るジャンプを実装してください。現在の状態変数は player.vy です」のように書くほうが、意図に沿ったコードが返ってきやすくなります。
生成されたコードをそのまま使うよりも、変数名や関数の役割を自分で確認してから取り込む習慣が重要です。理由は単純で、後でバグが出たときに自分で直せるかどうかが変わるからです。
デバッグにCursorを使う
ゲームがうまく動かないとき、Cursorは「エラー文を貼り付けて原因を聞く」以外にも使い方があります。
ブラウザの開発者ツールと組み合わせるのが最も実践的な方法です。Chromeであれば F12 でDevToolsを開き、Consoleタブに出ているエラーメッセージをコピーします。それをCursorのチャットに貼り付け、「@main.js でこのエラーが出ています。どの部分が原因として考えられますか」と聞くと、ファイルの内容と照合して候補を絞ってくれます。
エラーがない場合でも動きがおかしいときは、症状を言語化して聞く方法が有効です。「プレイヤーが壁に当たったあと、反対方向に移動できなくなります」のように具体的に書くと、AIが条件分岐やフラグの管理に問題がないか確認するコードを提案してくれることがあります。
console.log の追加を依頼することも一つの手です。「@main.js の当たり判定関数に、入力値と判定結果を出力するconsole.logを追加してください」と依頼すると、何が渡されて何が返っているかを可視化できます。動作確認が終わったらconsole.logを削除するよう依頼すれば、コードをきれいな状態に戻せます。
デバッグで詰まりやすいのは「何が問題かをAIに伝えきれていないとき」です。症状・再現手順・自分が試したこと・期待していた動作、この四つをチャットにまとめて書くと、的外れな回答が減ります。
ゲームが完成に近づいたときの使い方
機能が一通りそろったあとにCursorが役立つ場面があります。
コードが長くなってきたとき、@main.js を引用して「この関数の役割を一行で説明してください」と聞くと、自分が書いたコードの見直しになります。意図と説明がずれている箇所が、後から問題になりやすい部分です。
スマートフォン対応を検討している場合は、「タッチイベントに対応させたい。現在のキーボード入力処理は @input.js にあります。どのように書き換えますか」のように聞くと、変更箇所を絞った提案を得やすくなります。
ブラウザゲームとしてZIPにまとめてアソバースに投稿する前には、「このゲームをZIPにまとめてブラウザで動かすとき、index.htmlから見たファイルパスに問題はありますか」のようにチェックを依頼することもできます。絶対パスが残っていたり、読み込み順序が正しくなかったりする問題を事前に確認できます。
次の行動
まずCursorをインストールし、新しいフォルダを作ってindex.html・main.js・style.cssの3ファイルを置いてください。フォルダを開いたらチャットで「Canvas APIを使ったシンプルな2Dゲームのゲームループを書いてください」と試してみると、使い方の感覚がつかめます。作ったゲームが動くようになったら、ZIPにまとめてアソバース（https://aso-verse.com）に投稿する形で公開できます。
参考資料
- Cursor 公式ドキュメント（Cursor Docs）
- MDN Web Docs — Canvas API
