ChatGPTでのゲーム開発について
今回は、ブラウザ上で動作するシューティングゲームの制作を行いました。このようなChatGPTと協力してプログラムを作る進め方は、他のプログラム制作でも応用して同様の流れで進めることができます。まず、はじめに必要なことは「何を作るのか」という具体的な内容です。「作りたいもの」と「プログラムの内容（表示や動き）」を要件として箇条書きで書き出して、ChatGPTへの制作依頼分を作るところから始めてみましょう。
■今回のケース
作りたいもの : ブラウザ上で動作するシューティングゲームの制作。
制作依頼分 : 下記要件のスマートフォンでもプレイできるインベーダーゲームのようなシューティングゲームのコードを書いてください。HTML、CSS、JSは一つにまとめて書いてください。
【要件】
・ゲーム画面サイズは縦1280px×横720pxの縦横比率で固定し、プレイ時のブラウザサイズに合わせてスケーリングする。
・ゲームの開始ボタン「スタート」を初期画面の中央に配置。
・プレイヤーの残機をゲーム画面左上に固定で配置。
・敵機を隊列をゲーム画面上部中央に固定で配置。（残機の下段に）
・敵機隊列は縦3列×横7機でで21機を均等に配置
・プレイヤーの自機をゲーム画面の下部中央に配置。（画面の最下部より少し上に配置して指をタッチするスペースを作る）
・「スタート」を押すとボタンが消えてゲームスタート。
・ゲームが始まると自機から弾が2秒間隔で自動的に画面上方向に発射される。
・自機の弾が的に当たると当たった敵が消える。
・すべての敵が消えるとゲームクリアでゲーム画面中央に「クリア！」の文字を表示し、2秒後にゲーム初期画面に戻る。
・ゲームが始まると敵機から弾が2秒間隔でランダムな機体から画面下方向に発射される。
・敵機の弾が自機に当たると残機が「1」減る。
・残機の初期設定は「2」で、「0」の状態で自機に弾が当たるとゲームオーバーでゲーム画面中央に「ゲームオーバー」の文字を表示し、2秒後にゲーム初期画面に戻る。
・自機はキーボードの左右矢印キーで左右に移動できる。
・自機はスマートフォンのタッチ操作で左右に移動できる。
・自機移動範囲はゲーム画面の両サイドまでに制限する。
■使用するプログラミング言語について
制作物が決まると自ずと使用するプログラミング原語が絞られます。今回はWebブラウザで動作するアプリの制作だったので、Webページを制作で使われるプログラミング原語がベースとなりました。自分が作りたいものを表現するためにどのプログラミング言語を使用するのが良いのかわからない時は、はじめにそれもChatGPTに質問して考えてもらいましょう。質問する時も先に制作物の「要件」を決めておき、「下記要件のアプリを作りたいです。（要件を書く）これの作り方を考えてください。」とチャットすれば使用するプログラミング原語も教えてくれます。
■制作の進め方
プログラミング部分は基本的にはChatGPTにプログラムのコードを書いてもらってコピー＆ペーストするだけです。重要なのは、「実際にプログラムを動かしてどうなったか」を理解してその状況を正確にChatGPTに報告する部分です。これを行うとChatGPTが改善方法を考えて修正したコードを書いてくれます。それをコピペで実装してまた動作確認してまたChatGPTに報告。この繰り返しで制作を進めます。下記の動画に今回の制作の流れをまとめました。
このようなChatGPTとの作業を繰り返していると不思議なもので、プログライング初心者でも書かれているコードの構造や内容が断片的にですが何となく理解できるようになります。まずはひたすら壁打ちを行うように作業を進めてみることでコツが掴めてくると思います。どうしても先に進めなくなった場合はもっと機能をシンプルにして制作を進めてみる、もしくは一度別のもっとシンプルなものを作ってみるなどすると新たな気づきやアプロートを見つけられることがあります。まずは何かしらを完成させることを目指してみてください。
完成プログラムの公開
今回はブラウザゲームなので完成品をWebページに公開しました。公開方法は一般的なホームページ制作と同じです。下記ページでプレイできます。
https://ntako.net/shooting/
おわりに
ChatGPTを活用したブラウザゲームの開発は、プログラミングの基礎を学びながらアプリを完成させる楽しさを体験できる機会になります。これからChatGPTを使ったプログラミングを始める方の参考になれば幸いです。