【無料】ほぼAI任せでスマホ向けゲームを作ってみた【初心者向け】

無料枠があるAI GithubCopilotを使って、スマホ向けのライトウェブゲームを作成してみました。（PCでも一応動きます）

スキル周りと敵の出方とステータスのバランスがまだ要検討だけど、暇つぶしになるゲームが作れたかなと思っています。
課金要素はありません。Googleログインを必須にしたけど、あくまで会員登録機能を簡素化したかっただけで個人情報は収集してません。

背景

世の中ではAIがトレンドになり、今後AIに仕事を奪われるとかAIを使える人の需要が上がるとかいろんなことが言われているので
そもそもAIでどんなことができるのか試してみたくなり興味がある分野であるゲームに着手してみました。

友達とくだらない雑談から生まれた企画・設計なのでクオリティやバランスは『お察しください』レベルです。

今後もブラッシュアップはしていきたいと思ってるので少しづつよくなっていく予定。

開発環境

PC：Windows11
言語：Javascript、PHP
DB：Mysql
エディタ：VSCode、Cursor
AI：GithubCpilot

プログラムはVSCodeというエディタで書きました。

VSCodeは、Githubと連携ができてチャットでAIとやり取りができます。
他にも、Zed・Webstormといったエディタもあるのですが私はVSCodeをもともと使っていたので利用することにしました。

Githubを利用すると、CopilotというAIが利用できるようになります。
Githubはもともと仕事で活用しているので問題なく使えましたが、Copilotでどんな開発ができるのか、無料でどこまでできるのかが初体験でした。

また、Githubの無料枠を使い切ってしまったあとに、Cursorという無料エディタもちょっと使いました。こちらもAIとチャットでやり取りができるのですが、CursorオリジナルのAIだそうです。
AIとのやり取りはGithubと変わらない感覚で使えたのですが、『いつ無料枠を使い切るかわからない』ストレスがありました。（Githubは「今何％AIを使っているのか」がわかりやすくなっています。）

ゲームのメイン部分はJavascriptで、通信部分はPHPで作りました。
PHPは当ブログで利用しているサーバを間借りして動かしています。（そういう意味ではゲーム全てが無料で動作しているわけではありません）
ローカル環境でPHPを動作させるDockerやXamppを使えば、自分のPCでだけ動くゲームとしては動作します。

AIでの開発準備

VSCodeをインストールして、Githubアカウントを登録したら
VSCodeの拡張機能「Github Copilot Chat」をインストールします。

似たような名前の拡張機能があったりして多少戸惑いましたが、開発元が『GitHub』であることだけ注意すれば大丈夫です。

続いて、VSCodeでGithubアカウントにログインします。
左下にある人型アイコンを押すと現れるウィンドウから「バックアップと同期の設定」を選択します。

すると、ツール上部にサインインのボタンが現れるので押します。

次にサインインするアカウントの選択が出ますので、「Github でサインイン」を選択します。

この時、Githubのアカウントですでにログイン済みのブラウザを用意しとくと円滑になります。
以下のように、ブラウザで、アカウントとVSCodeを接続していいか確認されるので『Continue』『Authorize Visual-Studio-Code』を押します。

以上を行って認証されると、何やら英語の画面が現れます。
この時点でVSCodeの方には、サインイン中の表示が出ているはずです。

たまに失敗することがありますが、何度か同じ処理を試したり、サインインに失敗すると8桁の認証コードが表示されて『ブラウザで入力してください』的な誘導をされる場合もありますが、基本的にはサインインして同期されるはずです。

ここまで準備で来たら、VSCodeの右側にある『チャット』というウィンドウで指示するだけです。

チャットが表示されていなかったら、左上のメニューの『表示』>『チャット』から表示させます。

AIに指示をする

AIは、「いい感じにやっといて」と言ってもうまく対応してくれません。
できるだけ具体的にやりたいことを指示することで、より良い仕事をしてくれます。

だけど、何をどういう風に指示したらAIにとってやりやすいのかが初めはわかりませんでした。

そこで、AIのことはAIに聞こうと思い、ChatGPTやGeminiに質問しました。（GithubCopilotに聞いたら無料枠消費しちゃうため）
『〇〇を作りたいんだけど、AIになんて指示したらいい？』という感じで聞いたところ、質問攻めされました。

このAIからの質問に答えることで、私自身が気が付いていなかった決めなきゃいけないことや企画の背景、対応端末や世界観色々なことが固まっていきました。

最終的にGeminiにプロンプト（AIへの指示文のことらしい）を作ってもらい、それをそのままコピペしてCopilotに渡しました。

AIもミスをする

今回、ほとんどのプログラムをAIに書いてもらったのですが
結構くだらないミスも発生しました。

括弧の閉じ忘れ、タイピングミス、ファイルの呼び出し漏れなどなど、「人間じゃないんだから」と思うミスを結構やらかします。

あと、指示が具体的にできなかったときにやりたかったのと違う実装をされてしまったときに「そうじゃなくて、〇〇にして」みたいな修正依頼をすると、結構失敗します。

おそらく、AIとしては最初に受けた指示と修正依頼で受けた指示が異なるのでどっちに従えばいいのか混乱しているのかなと思いました。
そういう場合は、一度実装を取り消して改めて指示を具体的にし直すか、違う実装を完成として受け入れて別の依頼として「今ある〇〇機能を〇〇に仕様変更して」とお願いする方がきれいに対応してくれます。

無料枠の復活ロジックが良くわからない

今回、お金を掛けずにAIを使ってみたかったので
無料枠がなくなったら、復活するまで待ちました。

VSCodeの右下のCopilotのアイコンをクリックするか、ブラウザでGithubにログインしてCopilotの情報を見ると、無料枠の使用状況と復活日（リセットされるまでの日付）が確認できます。

が、これをあてにしてその日付まで待ってアクセスすると、復活日が30日先まで伸びていることがあります。
そのままその日のお昼過ぎ・夕方ごろにアクセスすると無料枠が復活していることがあります。
また、無料枠使い切った直後に復活日を確認すると15日後となっている場合もありました。

具体的な理由はわかっていないのですが、AI曰く「使用状況によって変わるから、お待ちください」だそうです。

終わりに

AIを使ったプログラム開発や、ライトゲームを作ってみたい人の参考になればと思い初心者向けの記事を書いてみました。

今後AIの技術が必要な時代になっていくのは確実だとは思っていますが
『やりたいこと（やるべきこと）を簡潔で具体的に話す』というのは、AIと一緒に仕事をするにしても、人間と一緒に仕事をするにしても大事だなと感じました。