ChatGPT4：ブロック崩しの自動生成（最終回） 「とりあえずの完成！」
コード手修正は一切無し！
ChatGPT4との対話だけで、
とりあえずブロック崩しが完成しました！
ステージ10までプレイしましたが、
ちゃんと最後までプレイ可能でした。
・スコアによるボールの増加や、
・それに応じたパドル長さの可変、
・ライフ制の道入
など、ゲーム性を高める追加仕様も入れることができ、
プレイフィールもまずますな感じです！
＊何となく、個人制作フリーゲームの名作「ぶろっくでポン」を思い出させるところが愛らしいですね。
追加可能な要素
まだまだ、追加出来る要素はたくさんあります。
・ステージ毎にブロックの配置を変化させる
・２回以上当てないと壊れない”金属”ブロック
・追加ボールのスピード変更
・タイトル
・ゲームクリア時の演出
・SE／効果音
・アイテム要素
etc・・・
ゲーム性を高める工夫に、夢が膨らみますね！？
バージョン管理の提案
ただ、この状態で要素を次々と追加していくのは不安を感じましたので、
一度、このタイミングでバックアップを取っておこうと思います。
最近はオートセーブが基本（主流）ですが、
世界を救う勇者も「教会で自らお祈りを捧げる」ことで安心感を得る
という行動心理は理解しているつもりです。
そこで、ChatGPTにいつでも戻ってこれるセーブポイントの提案をしてみました。
良い出来ですね！すばらしい！
今後も仕様を追加していきますが、 バージョンごとにprototype_番号で復元できるようにしておきましょう。
ここまでのバージョンに名前をつけておきます。
#バージョン名 prototype_01
ご承認いただき、ありがとうございます！
バージョン名の記録も素晴らしいアイデアですね。
バージョンごとに名前をつけ、それぞれのバージョンのコードを保管しておくことで、後からどのバージョンでも簡単に復元できるようになります。
現在のバージョンは「prototype_01」とし、これに対するコード変更や改善が行われるたびにバージョン番号を増やしていきましょう。
これにより、各バージョンの違いを明確に追跡でき、必要に応じて以前のバージョンに戻すことも可能となります。
ありがたい！お互いの信頼関係がMAXになった瞬間です。
暗闇からの抵抗
その後、上述した仕様を試してみようと、指示を数回続けてみます。
ハシャぎ過ぎてしまい、複雑な仕様を複数同時に依頼してしまいました。
反省しています。
その結果、ナゼか背景を黒にされた上に、ブロックも単色に戻される等、意図に反する抵抗が見られる様になりました。
ボールの視認性を高めてくれたのでしょうか？
ふっかつのじゅもん
その後も、またCSSに手を出して（手を出させて）しまったらしく、
実行不可エラーも発生し、収集がつかなくなってきてしまいました。
仕方がないので、バージョンを戻してリスタートを試みます。
バージョンをprototype_01に戻してください。
もう一度、そこからカスタマイズしていきましょう！
「さぁ！もう一度やり直しましょう！」と、前向きに指示をしてみました。
もちろんです、以下がprototype_01のコードです。
<!DOCTYPE html>
<html>
<head>
<style>
* { padding: 0; margin: 0; }
canvas { background: #000; display: block; margin: 20px auto; }
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var lives = 3;
var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
bricks[c] = [];
for(var r=0; r<brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function mouseMoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
if(relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth/2;
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for(var c=0; c<brickColumnCount; c++) {
for(var r=0; r<brickRowCount; r++) {
if(bricks[c][r].status == 1) {
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: "+score, 8, 20);
}
function drawLives() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Lives: "+lives, canvas.width-65, 20);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
drawLives();
collisionDetection();
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy < ballRadius) {
dy = -dy;
}
else if(y + dy > canvas.height-ballRadius) {
if(x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
}
else {
lives--;
if(!lives) {
alert("GAME OVER");
document.location.reload();
}
else {
x = canvas.width/2;
y = canvas.height-30;
dx = 2;
dy = -2;
paddleX = (canvas.width-paddleWidth)/2;
}
}
}
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
function collisionDetection() {
for(var c=0; c<brickColumnCount; c++) {
for(var r=0; r<brickRowCount; r++) {
var b = bricks[c][r];
if(b.status == 1) {
if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
dy = -dy;
b.status = 0;
score++;
if(score == brickRowCount*brickColumnCount) {
alert("YOU WIN, CONGRATULATIONS!");
document.location.reload();
}
}
}
}
}
}
draw();
</script>
</body>
</html>
やってくれたな。
ツッコミどころが多過ぎて困る。
セーブポイントは良いアイディアだと思っていましたが、
上手く機能していない（させられていない）様です。
ChatGPT3.5での別の対話では、
変数として名前を付けて、
値の参照／更新はフツーに出来ていたのですが。
前回の対話から18時間程度経過した後で復旧を試みたことで、
セッション情報が失われてしまったのでしょうか。
それとも、文字数／トークン数の問題でしょうか。
ChatGPTに完全再現させる為に、
別の工夫（より信頼を得る）を考えてみなければいけません。
新たな課題を見つけはしましたが、
当初の目的であった
「コードに手を加えず、ChatGPT4との対話のみでゲームを生成する！」
については、予想以上に良い形でゴール出来たと感じています！
また、次のテーマにて。
お疲れ様でした！