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

どもっ！ROBO艦長です。

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

前回の記事はこちら

【ChatGPT】実際に遊べる！ブロック崩しをプログラミング無しで生成AIに作らせてみた【プロンプト・ソースコード全公開】

今回はChatGPTを使いプログラミング無しでブロック崩しを作ってみたので実際に遊べるようにしています。プロンプト公開、ソースコード公開、全部省略せずに公開します。プログラマーはもちろん、プログラマーではない方も、ミニゲームを遊びたい方も是非ご覧下さい。

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

ブロック崩しゲーム（無料・PC/スマホ）実際に遊べます
ChatGPT プロンプト
Cursorについて
まとめ

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

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

ChatGPT プロンプト

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

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

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

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

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

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

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

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

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