🌬️

ChatGPTでブラウザゲーム作る

2023/02/22に公開

はじめに

記事の目的と概要の説明
ChatGPTと対話しながら簡単なブラウザゲームを作ろうとした過程の記録です。結論、簡単なプログラムは一瞬で生成してくれるが、複雑な思考が必要になると対応できなかったです。ただ、今後AIが進歩したら出来るだろうな～という期待感も大きいです。
ちなみに、この記事の構成もChatGPTに考えてもらいました。

ChatGPTを利用したブラウザゲームの開発の流れの説明
まずは作りたいゲームを考えました。ChatGPTにアイデアを出して、といえば出してくれますし、今回は個人的に作りたかったライツアウトを作りました。
https://ja.wikipedia.org/wiki/ライツアウト
ChatGPTを使ったブラウザゲームの具体的な作り方についての説明
まず、ライツアウトを知っているかChatGPTに確認しました。

・・・知ってますね。すごい。
じゃあいきなり、コードを書いてとお願いしてみます！

全部乗っけると長すぎるのですが、ちゃんとコードを書いてくれました。しかもちゃんと動きます！ほんとすごい！
しかもcssとかもつけてくれています。偉い！
ファイル分けるとか気の利いたことはやってくれないです。

ちょっとした修正依頼も気軽に乗ってくれます。

長文を返そうとすると途中で途切れるようなので、続きを書くよう依頼して書いてもらいます（書いてくれないときもあります。）
さらに、コードの説明もしてくれます。勉強になりますね。

ただ、この変更でバグが生まれました。

自分のセルの状態に応じて背景色を変えるだけなのですが、意外とこのバグを取り除くのに手こずりました。
バグの内容を伝えると、そのバグを修正します、と言うのですが実際のコードではバグが修正されてなかったです。
そういう時は別のChatGPTに質問するなどしてバグを解消してくれました。

自分がコードを理解していたら、よりよい実装について提案して、実装してもらうこともできます。

ただ、私は実装に必要なロジックは分かるのですがChatGPTが何を書いているかを細かくは見ていないです。全体像が分かるくらいの理解があれば、具体的なコーディングはChatGPTにおまかせできるかな、と思いました。

Gameoverの実装もお願いしてみます。
実装のロジックも書いてくれてありがたいですね。

ただ、よく見ると処理を書かないでコメントだけで省いているところを発見ｗ

// クリックされたライトを中心として周囲のライトの状態を変更する処理
// ...

一応、Gameoverの実装まではChatGPTが出来ました。

ここからは、ChatGPTと対話を続けてもできなかったところです。
ライツアウトの解答を表示するプログラムをお願いしてみます。まずはHTML

これは問題ない。
Javascriptもお願いしたら書いてくれる。

しかし、、、答えを表示してもらうが、答えが合わない・・・！
何度か試したり、別のアルゴリズムを考えてもらったり、なんならアルゴリズムを教えても答えが実装されない、、、
理由は分からないです。私の説明が悪いのか、数学的な処理が難しいのか、、、

ブラウザゲーム開発において重要なポイントについての説明
自分が何を作りたいのか、そのために何が必要かを整理する力が必要だと感じました。その整理する際もChatGPT使えるんですけどね（笑）
ゲームのアイデアやストーリーの考え方についての説明
自分で考えるか、ChatGPTに聞けばいいと思います。

ChatGPTを使ったブラウザゲームの魅力や可能性についての総括
自分のプログラミング能力を超えて、何百倍も速いスピードでコーディングができます。可能性めっちゃあると思うので、今後も使っていきたいです。
今後のChatGPTを使ったゲーム開発の展望についての予想
個人ゲーム開発がもっと発展したらいいなー、って思います。

深津さんのChatGPT活用方法。この方法で取りくめば結果も変わってくるかも