【ChatGPT】PCでもスマホでも遊べるブロック崩し完成版【Cursor】

どもっ!ROBO艦長です。

前回、ChatGPTでささっとブロック崩しっぽいものを作ってみたのですが、一応ブロック崩しではあるものの、いまいち動き的に面白くない。。。というわけで、自分で遊んでもちゃんと面白いと思えるものに作り直しました。

前回の記事はこちら

完成版の作成時間は約2時間(ゲームバランスの調整含む)

ブロック崩しゲーム(無料・PC/スマホ)実際に遊べます

下記の画像をクリックすると別タブで遊べます。
PCでもスマホでも大丈夫です。パドルはタッチorマウスで左右に操作できます。
全5ステージクリア出来るかな?

ChatGPT プロンプト

ChatCPTに渡したプロンプトは下記。これで返ってきたソースコードでも大体動きましたが、ゲームバランスの調整やステージの追加(だんだんブロックが小さくなる)などはCursorを使って半手動で修正しました。

ブラウザで動くブロック崩しゲームを作りたいと思いますので協力してください。

前提条件
・プロのゲームプログラマーとして考えてください。
・PCとスマートフォンのWEBブラウザ上で動作するようにしてください。
・ソースコードはコードブロックで囲って書いてください。
・ソースコードは省略せず、完成したものをすべて記載してください。
・PCとスマホの両方のブラウザで動作するようにしてください。

プログラムの構成
・ソースコードのフォルダ構成・ファイル構成を提示してください。
・各ソースファイルごとにファイル名が分かるようにしてください。
・HTML、JavaScript、CSSで作成してください。

画面表示
・初期表示(スタート画面)は「ブロック崩し」というタイトルを画面中央に表示してその少し下に「スタート」の文字をゆっくり明滅させてください。
・スタート時、および再スタート時はパドルを画面下部中央に配置してください。
・スタート時はスコア0、残機3としてください。
・スコアは画面左上、残機は画面右上に表示してください。
・スコアが増えたり、残機が減るたびに値を再描画してください。

ゲームのオブジェクトについて
・ブロックのサイズは横幅100px、高さ50pxとしてください。
・ボールのサイズは縦横30pxとしてください。
・パドルのサイズは横幅200px、高さ50pxとしてください。
・ブロックを画面の上部30%に横幅いっぱいに隙間なく並べてください。
・ブロックは緑、パドルは白、ボールは青にしてください。

ゲームのルールについて
・ブロックを1つ崩したらスコア+1とにして、画面左上にスコアを表示してください。
・パドルにボールが当たったら反射してください。
・パドルのない画面下部に当たったらボールを赤にしてアウトにしてください。
・アウトになったら残機-1としてください。
・3回アウトになったら画面中央に白字でゲームオーバーと表示してボールを停止してください。(ゲームオーバー画面)

操作方法
・スタート画面でマウスの左クリックまたはタップでゲームスタートしてください。
・PCの場合はマウスカーソルに合わせて、スマートフォンの場合は画面を押している指の位置に合わせてパドルを表示して下さい。
・マウスの移動や指の動きに合わせてパドルのX軸を操作できるようにしてください。
・ゲームオーバー画面で左クリックまたはタップしたらスコア0、残機委3の状態から再スタートしなおしてください。

前提条件やルールなどを具体的に描くのがコツです。

Cursorについて

CursorはVisual Studio Code互換のプログラミング用のエディタで、エディタの中でChatGPTを使用できます。

ChatGPTにプログラムを指示すると部分的なコードを返してきたり、自分がファイルに直接修正した内容がGPT側に伝わっていなかったりすることでお互いの認識がずれていくことがあるあるですよね。

Cursorはエディタの中で使用できることで、常に同じソースコード全体をユーザーとGPTが共有しているため齟齬が起きにくいのが最大のメリットだと思います。

ファイルに直接ユーザーが書き込んだソースコードやコメントもGPTがちゃんと見てくれます。
しかもプロジェクト全体をまとめて見てくれます。

プロジェクト全体を見てくれるのは類似のAI開発環境であるGithub Copilotにはない特徴です(2024年1月末現在)

※Github Copilotの最大にメリットはエディタとセットじゃないため様々な開発ツールと組み合わせられることだと思っていますが、それはまた別の機会に。

Cursorではエディタ内でGPT3.5、GPT4ともに使うことができますし無料でGPT4も使えます。

しかも、GPTの回答をそのままソースコードに反映することもできます(Gitのマージリクエストみたいな感じで)

CursorでChatGPTが使えて、しかもGPT4まで無料ならもうChatGPTに課金する必要ないじゃん!と思っちゃうところですが、ちょっと待ってください。

Cursorは無料版だとGPT3.5、GPT4どちらも回数が限られています。
Cursor価格・使用回数比較表(公式)

それに対して、ChatGPTをサイトで直接使用する場合は無料でもGPT3.5には使用回数に制限がありません。

その為、どちらも課金していない方は、このような流れが良いと思います。

  • まずChatGPTのサイトでプロンプトのやり取りをして大枠のソースコードを作る
  • ファイルに保存したソースコードをCursorで開いて細かいところをCursor内のChatGPT3.5で質問する
  • GPT3.5で解決しなけければCursor内のGPT4で質問する
  • Cursorの使用回数を節約したいときや回数上限に達した場合はサイトのGPT3.5を使用する

また、どちらか一方だけ課金している人は、どちらを使う方が回数的に得なのか比較してみてください。

ChatGPTだけ課金しているなら無料版Cursorより有料版ChatGPTの方がGPT4の使用制限は緩いですが、Cursorに課金しているなら Slow(遅い、というか普通の)GPT4なら無制限で使えます。

私のおすすめは両方課金ですが、まずは短期で試してみるのがよいかと思います。

まとめ

ChatGPTやCursorなどのAIツールでゲームプログラミングは本当に簡単になってきました。
私が昔、MSXのBasicでブロック崩しを作ったときは何か月もかかりましたが、今なら小一時間です。

全くのゲームプログラミング未経験のかたでも試行錯誤で1日から数日程度でそこそこのものができると思います。凄い時代ですね。

逆にプログラミングを普段からしている人にとっても、ざっと枠組みを作るとか、ちょっと思い出したり調べたりするのが面倒だけどたしかできるはず、みたいなことを軽く質問するだけで答えてくれて本当に便利。

エラーの調査からソースコードの修正までしてくれるなんてもう作業効率10倍アップ!てな感じなので使わない人とはものすごい差が出てきますね。

業務で使うには会社のルールとかいろいろあるかもしれませんが、まずはゲームプログラミングとか趣味レベルのことからでも使い始めることをお勧めします。

本日はここまで。ROBO艦長でした。でわっ!

コメント

タイトルとURLをコピーしました