AIとICTの進歩的探求

AIの進化や革新的なテクノロジーにフォーカスし、わかりやすく解説していきます。

【５分で出来る】ChatGPTの"Code Interpreter"（現在のAdvancedDataAnalysis(アドバンスドデータアナライズ)）で簡単なゲームを作ってみよう

ハウツー系 AIツール系

【５分で出来る】ChatGPTのCode Interpreterで簡単なゲームを作ってみよう

１，前提条件

OpenAIのChatGPTPlusに加入していて、Code Interpreterの機能がオンになっている事。

※現在、Code InterpreterはAdvancedDataAnalysis(アドバンスドデータアナライズ)と名称が変わっております（2023/8/29追記）

基本設定はこちらのページを参照。

２，ChatGPTに指示を出そう！

今回は横スクロールアクションゲームを作ってみましょう

イメージは、鳥や戦闘機が障害物（パイプ）をよけるイメージです

まずは、以下のコマンドを入力またはコピペをしてChatGPTに貼り付けてください

write p5.js code for Flappy Bird where you control a yellow bird continuously flying between a series of green pipes.
The bird flaps every time you left click the mouse. If the bird falls to the ground or hits a pipe, you lose.
This game goes on infinitely until you lose and you get points the further you go.

これは直訳でこんな感じの命令です

「Flappy Bird 用の p5.js コードを作成します。このコードでは、一連の緑色のパイプの間を飛び続ける黄色い鳥を制御します。マウスを左クリックするたびに鳥が羽ばたきます。 鳥が地面に落ちたり、パイプにぶつかったりすると負けです。 このゲームは負けるまで無限に続き、先に進むほどポイントを獲得できます。」

３，ChatGPTと共に作業

すぐに先ほどの情報に合ったプログラムを作成してくれます。

こちらの好きな画像を差し込めるように指示を出します。

「鳥の画像や背景を指定する形に出来ますか？」

出来る旨と参考コードが表示されました。

それではこれを、使えるようにZIPファイル圧縮した形でダウンロードできるように指示を出します。

「ありがとう！ではこの修正を加えた完全なものをパッケージとしてZIP圧縮をかけて出力してください」

すぐにZIP化してくれます。ダウンロードをすると以下のファイルが入っていました

ちなみに「background.png」は背景画像、「bird.png」は障害物をよける鳥など画像です。

現時点では何も入っていないのでそれぞれ使いたい画像の名前をこの名前に変更してください。

例では、空の画像と戦闘機の画像をそれぞれ割り当てました。

フォルダの中の「sketch.js」というのがゲームのプログラムになりますので、右クリックして編集をクリックしてください。

メモ帳などで中身が表示されるかと思います。

画像のimage(birdImg, this.x, this.y, 32, 32);の３２を６４に変更してください

これは、障害物をよける戦闘機のサイズを表している分で数字でサイズを調整できます。そのままだと小さそうなので６４にしておきましょう。

これでとりあえず、障害物を回避する動きは出来ているのですがゲームらしく少し修正を加えます。

今回は以下の仕様を加えたいと思います。

  • 時間制限を設ける（30秒）
  • 持ち点を左上に表示（０から開始）、またその下に時間経過を表示
  • 柱をかわすと１００点、５回連続だと１０００点持ち点に追加
  • ３０秒経過時に2000点を超えてたらクリア表示、それ以下だったらゲームオーバーの画面を表示する

そしてもちろん、出来上がったものをZIP化してもらいます。

ZIP化を解いて、先ほど使う予定の画像をこのフォルダに入れて名前をそれぞれ「background.png」と「bird.png」に変更してください

４、ゲームの起動

Pythonの簡易サーバを起動して、PC上で動かしてみましょう。

流れとしましては、

  1. Pythonの簡易サーバを起動する
  2. ディレクトリを移動する
  3. ローカルサーバーの起動コマンド
  4. ブラウザで実行

になります。進めてみましょう。

まずは、Windowsのスタートボタンを押して「cmd」と入力してコマンドプロンプトを起動しましょう。

次に先ほどダウンロードしたフォルダを解凍したと思います。

このフォルダを指定します。

cd C:\Users\User\Downloads\oldflappy_bird_game

※上記は、cdが移動のコマンドで、自分で使っているPCのダウンロードフォルダで解凍した場合の住所をその後に続けてEnterを押すことで指定出来ます。

※場所がよくわからない場合は解凍したデータを右クリック→プロパティを開くと「場所：」とあるはずなのでこれをコピペするのがよいかと思います。

次に以下のコマンドを実行します。

python -m http.server

画像の様に表示されていればローカルサーバーが起動しているかと思います。

あとはブラウザで http://localhost:8000/index.html を開くと、ゲームのプログラムが実行されるはずです。

※index.htmlの部分はChatGPTの判断次第で様々です。game.htmlだったりもしますので適宜調整してください。

※ちなみに私は、さらにプログラムファイルの中をいじって数字の色を見やすくしたりしております。

ある程度、PCに触ったことがある方であれば５分ほどで作成できてしまうかと思います。

もしエラーが出てもChatGPTに聞けばいいというのも頼もしいですね！

また次回の記事でお会いしましょう。