Geminiをちょっと使ったら、簡単にゲームができた。音も出ます。
完成品：
https://yamaichige.shop/geminigame/zevigame2.html
ゲーム終了時の「AIによる戦績レポート」はエラーになります。（APIキーを登録していないため）
注意：このゲームのようなhtmlアプリで、htmlにAPIキーを書いたものを公開するとAPIキーが誰でも見られるので注意してください。
その他、今まで作った簡易ゲームは以下
やったこと
Geminiにアクセス。
モデルはデフォルトで2.5proなので、そのまま。ただし、使用上限があるので、上限に達すると、数時間使用できなくなります。その間、2.5flashに切り替わり使用可能です。ただし、コード生成能力は落ちる。
ツールでCanvasをクリック。
プロンプト「ゼビウスみたいなゲームを作って」
右のプレビューでゲームができる。
音がなかったので
プロンプト「音を追加できますか」
できたゲームはゼビウスではなく普通のシューティングゲームですが、このまま良しとしました。
修正したかったら、指示すれば修正してくれます。
指示した後、元に戻したくなったら
前のバージョーンというボタンがありますが、あまり信用せず、下記方法で都度、保存しておいたほうが安心です。
htmlで保存
右側のCanvasの画面の上の「コード」をクリックするとコードが表示します。
右にある「共有」から「内容をコピー」をクリック。
Windowsの場合メモ帳にコピペします。
index.htmlというファイル名で保存。（ファイルの種類は「すべてのファイル」）indexという名前でなくても大丈夫ですが、.htmlは必須です。また、ファイルの種類を「テキストドキュメント(*.txt)」で保存しないように注意してください。
このファイルを開けば、ブラウザでゲームができます。
注意点
APIキーは注意が必要
APIキーをhtmlファイルに書いて公開すると誰でも見れてしまいます。
なので、APIキーを使うアプリ、つまりAIを利用したアプリの公開はこの方法ではできません。
今回作ったアプリは指示してないのに、「AIによる戦績レポート」というAI機能を盛り込んできました。これはGeminiのCanvasで動かしているときは動作します。
const apiKey = ""; // APIキーは空のままにします公開
今回は、こちらのサーバーで公開しました。
htmlが公開できるところだったら、どこでも大丈夫です。
修正
上記サーバーは、サーバーにより広告を入れてくるので、そのままでは、広告が入る位置が左、ゲーム画面が右という以下のような画面になってしまった。
なので、サーバー側が追加した広告コード部分と上記画像を添付しGeminiに依頼しました。
プロンプト
このゲームをxreaのサーバーの無料プランにアップロードするとサーバーでコードが変更され以下のように広告が入る。現状、左に入ってしまうが、XREAのサーバーが広告を上に入れるようにソースを変更してほしい。
<div id="vdbanner" style="display:block!important;position:relative!important;top:0!important;left:0!important;margin:10px 0 !important;padding:0!important;text-align:center!important;"><a href="https://www.colorfulbox.jp/?adref=xrea_ad&utm_source=xrea&utm_medium=banner&utm_campaign=xrea_ad" target="_blank" rel="nofollow" style="display:inline-block!important;position:relative!important;top:0!important;left:0!important;margin:0!important;padding:0!important;"><img src="https://www.colorfulbox.jp/common/img/bnr/colorfulbox_bnr01.png" alt="月額480円〜の高速レンタルサーバー ColorfulBox" style="display:inline-略"></a></div>
その結果、サイズがおかしかったので、
プロンプト「画面に一部しか表示されなくなりました。」
その結果、改善したけどまだおかしかったので
プロンプト「前より改善しましたが、まだ全体が表示されていません」
これでうまく修正できましたが、依頼の仕方はhtmlがわかっていないと意図が伝わる指示をするのは難しいかもしれません。
また、今回、時間かけてないので、ちょっと確認したところ画面サイズを変えると結果画面が一部しかみえなくなります。こういうところを修正しようとすると、ぐちゃぐちゃになって途中で嫌になることが多いと思います。ということで修正や機能追加は、AIに完全にお任せするのはうまくいかないと思います。
所感
ということで、それなりに動くものはできるが、希望や修正を自分の意図通りに作るのは相変わらず大変だと思った。（今回、音を出すぐらいしかゲームの修正は依頼していないが、依頼すると直感的に、ぐちゃぐちゃになるだろうなという感じがしてる。）
段々と、依頼に対する完成度は高まっているようにおもうが、意図を伝えて自分の思い通りにAIをコントロールするのは今後も難しいのではないかと思う。
何度かAIでゲームを作っていたが、音をmp3ではなく波形から作っていることに驚いた。
* 射撃音（レーザー音）を再生
*/
function playShootSound() {
if (!audioCtx || !isAudioInitialized) return;
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
const now = audioCtx.currentTime;
osc.type = 'square'; // 矩形波 (8ビット風)
osc.connect(gain);
gain.connect(audioCtx.destination);
// ピッチ（周波数）の変化
osc.frequency.setValueAtTime(1200, now);
以下、略