この記事では、Google のAI Google GeminiのCanvasという機能を使って、簡単なゲームが作れるか試してみました。
今回は、AIが作ったプログラムコードは、ぜんぜんイジらずに、AIとの会話だけでゲームを完成させることに挑戦です！
プログラミングの知識がない方でも、気軽に読んでもらえると嬉しいです。
まずは、「テトリス」や「ブロック崩し」など、有名なゲームが簡単に作れるかを試し、次に、AIがまだ学習していないオリジナルのゲームを作れるかを試してみました。
AIを使えば、オリジナルゲームの開発って、誰でも簡単にできるようになるのかな？
それとも、やっぱり難しいのかな？
この記事では、特に、AIにゲームのアイデアを伝えるための「プロンプト」が、どれくらい大切なのかを、具体的な例を交えながら解説していきます。
Geminiに定番のゲームを作ってもらう
まずは、定番のゲームの作成をお願いしてみました。
具体的には、テトリス、ブロック崩しといったものです。
Geminiに「Webブラウザで動くテトリスを作って」「ブロック崩しを作って」というように、とてもシンプルな言葉でお願いしたところ、これらのゲームのコードをすぐに作ってくれました。
しかも、作られたコードは、どれもそのまま動いちゃうんです！
もちろん、ゲームとしての完成度は高くなく、グラフィックやサウンドは、必要最低限のものしかありませんでしたが、ゲームの基本的な機能は、ちゃんと入っていました。
ただ、これらのゲームを、もっと面白くするためには、いくつかの調整が必要でした。
たとえば、テトリスのブロックが落ちる速さを変えたり、ブロック崩しのボールの速さや角度を変えたりする作業ですね。
AIが作ったコードをベースに、GeminiのCanvas機能を使うことで、ゲームの見た目や動きをリアルタイムで確認しながら、AIと協力して調整することで、とても短い時間でゲームを仕上げることができました。
やっぱりGemini Canvasはすごい！
Gemini Canvasについては、以下の記事で解説していますので、ぜひご覧ください。
またWebページの簡単な作り方や基礎についての記事を書きました。
オリジナルゲームの作成に挑戦
次に、AIが学習していないであろう、オリジナルゲームの作成に挑戦してみることにしました。
お題は、「宇宙船からUFOを撃ち落とすゲーム」です。このゲームのアイデアをGeminiに伝え、コードを作ってもらうように依頼しました。
このゲームの基本的なアイデアは、プレイヤーが宇宙船を操作し、砲撃の照準モニターを動かしながら、UFOを撃ち落とすというものです。
以下は、最終的に完成したUFO撃墜ゲームのプレイ動画です。
また、ゲームは以下から試せますので、よかったらプレイしてみてください。
でも、最初は思うように動かなかったんです。
最初のプロンプト（指示）が、あまりハッキリしていなかったため、Geminiが作ったゲームは、私のイメージとは大きく異なるものでした。そもそも、ゲームの画面イメージが大きく異なっていて、さらにスタートボタンを押しても、何も動きませんでした。
以下は、プロンプトの一部です。
宇宙船内のプレイヤーが、敵のUFOを撃って破壊するゲームをJavaScriptで作りたい。
プレイヤーは、砲撃のモニターの方向を変えながら、UFOに照準を合わせ撃破する。
モニターは、5×5の合計25個の長方形で構成される。
ゲーム画面の大部分は、その25個の長方形です。
プレイヤーは、方向キーを操作して砲撃の方向を変え、UFOを照準に合わせる。
方向キーを1回押すと、1個の長方形分、方向を変えることができる。
ここで分かったのは、自分のイメージをAIに正確に伝えることの難しさです。
頭の中にある、なんとなくのアイデアを、具体的な指示に落とし込む作業は、簡単ではありません。
ゲームの目的、ルール、操作方法、登場するキャラクターの動き、背景の世界観など、様々な要素を詳しく説明する必要があると思われます。
最初からすべてを伝えようとするのは、一旦やめて、まずはゲームのステージを作り、次に敵を配置する、というように、段階的に指示をすることにしました。
でも、それでも、出来上がったものは、私のイメージしていたものとは違ったものになってしまいました。
Gemini 2.5 Pro で試してみる
オリジナルゲームの作成に苦戦する中、Geminiの新しいバージョンである2.5 Pro (Experimental)でもCanvas機能を使えるのを知り、試してみることにしました。
2.5 Proは、より高度な自然言語処理能力を持ち、より複雑な指示を理解し、より高品質なコードを作ることができるとのことです。
そこで、2.0 Flashで使用したのと同じプロンプトを、2.5 Proに入力したところ、なんと、一発で私のイメージに近いゲームが作られたのです。
2.5 Pro、本当にすごい！
ゲームのステージ、キー操作なども滑らかで、思っていた通りの動きになっていました。
あまりにも簡単にゲームが作成できたので、ちょっとびっくりしました。まるで、私の頭の中を読まれてしまったかのようです。
全然整理されていないプロンプトでも、2.5 Proは、しっかりと意図をくみ取ってくれたのです。
その後、2, 3回のやり取りを通して、ゲームの細かな部分を調整し、ほぼイメージ通りのゲームを完成させることができました。実際にゲームをプレイしてみると、思った以上に楽しめました。
プロンプトの重要性を検証
ここで、ふと疑問に思いました。「なんで、2.5 Proは私のイメージ通りのゲームを作ることができたんだろう？」。もしかしたら、2.5 Proの性能が高いだけでなく、私が書いたプロンプト自体にも、問題があったのかもしれません。
2.0 Flashでオリジナルゲームの開発に苦戦した原因の一つに、プロンプトの曖昧さがありました。
最初のプロンプトでは、ゲームのアイデアを十分に伝えることができていなかったため、AIが意図したゲームを作ることができなかったのかもしれません。
そこで、2.5 Proに、先ほど作成したゲームのプロンプトを生成してくれるように依頼してみました。
つまり、「私がどんなプロンプトを書けば、このゲームを作ることができるのか」を、AIに教えてもらうということです。
すると、2.5 Proは、ゲームの目的、ルール、操作方法、登場するキャラクターの動き、背景の世界観などが、詳しく書かれたプロンプトを生成してくれました。そのプロンプトは、まるでゲームの設計図のように、具体的で分かりやすいものでした。
このプロンプトを2.0 Flashに戻って入力してみたところ、以前はあんなに苦労したのが嘘のように、1回の指示で私のイメージに近いゲームが作成されたのです。
もちろん、2.5 Proが作ったゲームと比べると、見た目や動きは少し異なりますが、しっかりとプレイできるゲームが出来上がっていました。少し動きはぎこちないものの、十分に楽しめるレベルのゲームになっていました。
実際のプロンプト
ここで、2.5 Proが作ってくれた実際のプロンプトを載せておきます。
依頼内容
HTML, CSS, JavaScript を使用して、ブラウザで動作する「UFOシューター」ゲームを作成してください。
ゲーム概要:
プレイヤーは宇宙船の砲撃手となり、5×5のグリッドで構成される「モニター」を通して見える範囲の敵UFOを撃墜するゲームです。制限時間内にできるだけ多くのUFOを破壊し、高得点を目指します。
必須要件
基本画面構成:
- ゲーム画面中央に、主要なプレイエリアとなる 5×5のグリッドモニター を配置してください。
- 画面右側（または適切な位置）に、スコア、残り時間、スタート/リスタートボタン、UFOの種類とポイントを示す凡例（レジェンド）を表示する情報パネルを配置してください。
- ゲームオーバー時に、最終スコアと破壊したUFOの内訳を表示するオーバーレイ画面を用意してください。
ゲームプレイ
- モニター操作: プレイヤーは 方向キー（上下左右） を使用して、モニターの視点を1マスずつ移動できるようにしてください。（WASDキーにも対応）
- ワールド: モニターが表示している範囲よりも広い仮想的な「ワールド」（例: 25×25マス）を設定してください。モニターの移動範囲はこのワールド内に制限されます。
- UFO出現:
- ワールド内に複数のUFOをランダムに配置してください。
- UFOはモニターの中心が到達できないワールドの端には出現しないようにしてください。
- UFOの種類は最低4種類（例:
🛸,👾,👽,🚀）設定し、それぞれ異なるポイント（例: 10, 20, 30, 5点）を割り当ててください。凡例には絵文字とポイントを表示してください。 - UFOは破壊されると、新しいUFOがワールド内のランダムな（空いている）位置に補充されるようにしてください。
- 射撃:
- モニターの中央のセル（1つ）を照準として明確に（例: 赤い枠線で）表示してください。
- プレイヤーが スペースキー を押したとき、照準セルにUFOがいれば、そのUFOを破壊できるようにしてください。
- スコア: UFOを破壊すると、その種類に応じたポイントが加算され、スコア表示が更新されるようにしてください。
- 制限時間: ゲーム時間は 30秒 とし、スタートボタンでカウントダウンを開始してください。残り時間はリアルタイムで表示し、0になったらゲームオーバー処理を行ってください。
ゲームフロー
- 「スタート」ボタンでゲームを開始できるようにしてください。ゲーム中はボタンを無効化（または「プレイ中」表示に）してください。
- ゲームオーバー画面には、最終スコアと、破壊したUFOの種類ごとの数を表示してください（例: 🛸 x 5, 👾 x 3）。
- ゲームオーバー画面に「もう一度プレイ」ボタンを配置し、クリックするとゲームがリセットされ、再スタートできるようにしてください。
演出・サウンド
- 視覚効果: モニターの各セルの背景色を、ワールドの中心からの距離に応じて変化させてください（中心に近いほど明るく、遠いほど暗く）。
- サウンド効果:
Tone.jsライブラリを使用してください。- 方向キーでモニターを移動させた際に、「カチッ」という短い効果音を再生してください。
- UFOを破壊した際に、爆発音のような効果音を再生してください。
- サウンドは、ユーザーが最初に「スタート」ボタンを押したときに初期化・有効化されるようにしてください。
技術仕様・スタイリング
- 言語: HTML, CSS, JavaScript のみを使用してください。
- スタイリング:
Tailwind CSSを使用して、モダンで見やすいデザインにしてください。- フォントは
Interを使用してください。 - 全体の配色（背景、文字色、ボタン色など）は、宇宙やSFのテーマに合うように調整してください（例: ダーク系の背景）。
- レスポンシブデザインを考慮し、極端に表示が崩れないようにしてください。
- コード:
- JavaScriptコードには、処理内容が理解しやすいように適切なコメント（日本語）を記述してください。
- エラーハンドリングを適切に行い、予期せぬエラーでゲームが停止しないようにしてください（特にサウンド関連）。
まとめ
AIの進化により、テトリスやブロック崩しのような定番ゲームは、「作って」とお願いするだけで、期待通りに動作するものを簡単に作ってくれるようになりました。
オリジナルゲームを作ろうとする場合、AIに的確な指示を出せるかが重要になります。
それとともに、2.5 Proでは、曖昧なプロンプトでもしかり意図をくみ取ってくれました。
あらためて、AIの進化の速さを実感しました。
今回は、AIが作成したプログラムコードを1行も変更せず、AIとの会話のみで簡単なゲームを作成しました。
プログラミング知識がない方でも、簡単なものであれば、AIと会話するだけで作れてしまいます。
興味のある方は、ぜひチェレンジしてみてくださいね。
コメント