Windows 11 環境で、AI 開発ツール Cursor（無料版）を使い、英語学習用のシューティングゲームを作ってみました。
AI の提案を参考にしつつ、コードの細かい意味は深く理解せず、「動かして確認 → 修正」を繰り返して最終的に形にする――いわば 実践型 AI 開発 です。
この記事では、Cursor の使い方、プロンプト設計、Git による履歴管理、効果音や爆発画像の追加など、試行錯誤の過程をまとめています。
なお、無料枠を使い切ったため、途中から Gemini CLI を使用しています。
完成品：https://yamaichige.shop/englishgame/index.html
※デフォルト以外にも、1 行あたり 7 単語以下（複数行）の英語 TXT ファイルをアップロードして使えます。
準備
Cursorを立ち上げ「表示」→「ターミナル」
任意の場所でmkdirでフォルダを作って、cdで、そのフォルダに移動。
mkdir englishgame
cd englishgame
git管理にする
git init
Cursorで「ファイル」→「フォルダを開く」で今、作ったフォルダを開く。Gitについては、こちら↓↓↓↓を参考にしてください
プロンプト
以下のプロンプトを右のChat欄に入力してEnter。
・英語学習用ゲームをhtmlで作りたい。
・基本はシューティングゲーム。上から1行ずつ落ちてくる。
・行は単語に分かれていて、順番はランダム。それを、文章になるように順番に打っていくゲーム。
・1行目の上に次の行があり、その上にはさらに次の行がある。1行の長さはみな同じにするが、文は同じな単語数でなくてよい。数を合わせるために何かブロックを置いて個数が同じになるようにする。
・ブロックの位置はどこでもいい。
・1行の文章が正解だったら、1行消えて次の行にたまが当たるようにする。それまでは、次の行へは弾は届かない。
・文章の列は、時間とともに下に降りてきて、下まで来てしまったらゲーム終了。
・3回順番が違ったらゲーム終了。
以下3行表示している状態のイメージ。*はブロック
・How are you?.
・I am a tall man.
・This is a pen.
の場合
are * you? How *
man am a I tall
is pen a * This
1回目確認
完成したindex.htmlを右クリック→「エクスプローラーで表示する」。エクスプローラーでindex.htmlをダブルクリックするとブラウザで表示されます。
1回目の完成版を開いたところ、「全然思っていたのと違う😒」という結果に。
そこで以下の修正要望を追加：
・今のものは、キー入力→送信で1ワードずつ入力している。これではない。
・下に弾を打つ戦車があり、その弾で単語のブロックを順番に打っていく。
・なので、対象となる行は1番下になる。
完成したら、ブラウザでF5（リロード）すると新しくなっています。
前より良くなったのでCursorのChat欄で「Keep All」をクリックして確定させます。
修正したい場合、また、プロンプトを入れればいいのですが、Cursorに履歴を任せるのは不安があるのでgitでファイル管理します。
ターミナルを表示して（「表示」→「ターミナル」）以下コマンドを実行。”初回”というのはコメントでなんでもいいです。以降、保存しておきたいところで同じことを実行します。
なので、コメント部分は、どの時点のものなのかが分かるようにちゃんとコメントを書いた方がいいです。
git add .
git commit -m "初回" 先に進んで、戻したくなった時の操作は、こちら↓↓↓↓を参考にしてください。
効果音追加
効果音は 効果音ラボ さんの素材を利用。
soundフォルダを作りダウンロードしたファイル入れます。（他の問題点も書いてあります）
・発射音をsound\ショット.mp3にして
・正解命中音をsound\爆発3.mp3にして
・不正解音をsound\ショット命中.mp3にして
・ゲーム終了の音をsound\ちゃんちゃん♪2.mp3にして
・戦車の左右の動きが遅い
・ブロックが全体的に左よりなので中央寄りにしたい
簡易的な画像
爆発の画像を作って弾が当たったら表示するようにしてみた。
使ったpng画像はGoogle AI Studioのimagenで作ってペイントで 1MB → 128KB に縮小。
手順
Google AI Studioで左メニュー「Generate Media」→「imagen」で「シューティングゲームの爆発画像を作って背景は透明」
できたものをダウンロードしてWindows11付属のペイントで開き、「サイズ変更と傾斜」で「サイズ変更」をピクセル、「サイズ」を128でOK。ファイル→「名前を付けて保存」でpngを選んで保存。
完成画像↓↓↓↓（ここに貼っている画像はWordpressの機能でWebpに変換されています。）
Google AI Studioは、こちらを参考にしてください。
実際、使うと背景が恐らく透明ではなくなっている。（未調査）
Tips
- 更新されているか分からない時、ブラウザで右クリック→「開発者ツールで調査する」→ツールバーの「Sources」で各ソースファイルが見れるので、変更されているか確認できます。
- 表示に関する修正を依頼するときはスクショをとってChat欄の右下に画像を添付できるボタンで画像を添付し、修正依頼するといい。言葉より、全然、伝わる。
You’ve hit your usage limitGet Cursor Pro for more Agents use, unlimited Tab, and more.
Cursor無料だと、すぐに上記のメッセージが表示されて制限にひっかかります。
VSCodeでGemini CLIで続きをやりました。
Gemini CLIはリミット制限になりにくいですが、Cursor（Gemini以外のLLM使用）よりコードの作成能力は劣る感じがします。
完成
ディレクトリ
ENGLISHGAME
│ index.html
│ README.md
│ script.js
│ sentences.txt
│ style.css
│
├─img
│ bakuhatu.png
│ bakuhatu128.png
│ bakuhatu128b.png
│ favicon.ico
│
└─sound
ちゃんちゃん♪2.mp3
ショット.mp3
ショット命中.mp3
ラッパのファンファーレ.mp3
可愛く輝く2.mp3
爆発3.mp3完成品：https://yamaichige.shop/englishgame/index.html
アップロード先は以下
所感と課題
無料制限枠を気にしながらバイブコーディングで作ると、とりあえず動くものを目指して作ることになってしまう。Cursorではやらなかったが、Gemini CLIをつかっているときにgitで変更前に戻す操作をした。やはりgitで管理していると安心感がある。
ゲームを作ったことがなかったが、AIを使うと簡単にできた。
ゲームには欠かせない音は効果音ラボさんのものがすごくいい。
画像は、今回、爆発画像だけ使ったがAIでつくったものを活用できそうな手ごたえはあった。
今回、やり残した課題
・ゲームに適切なサイズが分からない。
・画像で使ったpngの背景が透明でないのはなぜか？
この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。
