ChatGPTでとても簡単なブラウザゲームを作る

皆さんこんにちは！
スペースマーケット エンジニアのreyです。

3月も終わりに近づき、段々と春の暖かい陽気になってきましたね！

今回は、いま話題になっている「ChatGPT」について試してみたことをまとめました！

試したこと

試したことは、「ChatGPTに簡単なブラウザゲームを対話形式で作ってもらう」です。

指示方法は、前半はざっくりとした指示で作ってもらい、後半に少し細かい指示を入れることにしました。

使用環境は、新しく出ていたGPT-4が気になったので、有料版のChatGPT Plusで試してみました。
使用モデル：GPT-4
使用言語：日本語

ざっくりとお願いしてみる

まずは、ざっくりとお願いしてみます。

ちょっと長いので省略していますが、ChatGPTは、html、css、jsのコードをそれぞれ生成してくれました。

ブラウザで開いてみると、シンプルなクリックゲームができています！

ただ、これだとシンプルすぎるので、もう少し「面白く」するようにお願いしてみます。

もう一度、「さらに面白く」するようにお願いします。

「面白く」という抽象的な表現を汲み取って、新しく「タイマー」と「ボタンが直線移動する」機能をつけてくれました。

ただ、見た目がシンプルなので、今度は「おしゃれ」にお願いしてみます。

「おしゃれ」という抽象表現を汲み取って、CSSで画面を少し飾ってくれました。

画像のため分かりづらくて申し訳ないのですが、画面のボタンをクリックすると、ランダムな方向に「ボタンが直線移動」します。
この動きが、何かに似ていると感じました。それは...「カエルのジャンプ」です！

細かく指示を出してみる

そこで、ボタンを「カエル」に変えてもらうことにしました。
・ボタンを「カエル」の画像に変更

他にも、細かい指示を加えて行きましょう。
・ボタンのクリックの文字を消す
・ボタン(カエル)を丸くする
・背景を池のような色にする
・タイトルを「カエルクリックゲーム」に変える
・タイトルの文字を綺麗な色に変える

この後も何回か対話を繰り返した結果、こちらのゲームが誕生しました。
（※カエルの画像のダウンロードだけ人力で実施しました。）

制限時間(30秒)内にカエルをクリックした数が、スコアとしてカウントされていきます。
（カエルはクリックするたびに直線移動して、位置を変えていきます。）

これで、ちょっとしたブラウザクリックゲームが完成しましたね！

気づいたことをまとめます。

・「面白く」や「おしゃれ」といった抽象的な表現でも自然言語から意味を汲み取り、ソースコードに反映してくれる
・細かく指示すると、その通りにソースコードを実装してくれる
・今回の検証では、コード(HTML,CSS,JS)はエラーなく動いた

他にも色々と工夫すれば、ChatGPTで実現できることの幅が広がりそうですね！

さいごに

スペースマーケットでは一緒に働く仲間を募集しています！
カジュアルに話を聞きたいという方でも大歓迎ですので、ぜひ以下からご応募お待ちしております！