Photo by
daisaw33
ChatGPT4：ブロック崩しの自動生成（６） 「それっぽくなった！複数カラー対応！」
祝！ついにカラー変更対応完了！！
そして、いよいよエラー修正板を実行すると
おおおお！ついにフルカラー（？）対応してくれました！
失われた基本仕様を再度復活してもらう（余裕）
見た目に騙されてしまいましたが、
大掛かりなオペにより、
・スコア＋５毎にボールを増やす
・フィールドをラインで囲む
という、既に実装済だった機能が欠落してしまいました。
ここまで進めてきているので、
一度実装出来た仕様／機能は、途中で欠落したとしても、復活はイージー！
という自負がありますので、深く考えずに修正を再依頼します。
ChatGPTは、チャットスレッド毎に、会話の流れや重要事項が変数に記憶されているので、自信があります！
いいですね。次の改善をお願いします。
・スコア＋５されるごとにボールが追加されなくなってしまった不具合を修正して下さい
・ボールが跳ね返る壁の位置をラインで囲んでください
すみません、その不具合については見落としてしまっていました。また、ボールが跳ね返る壁の位置をラインで囲むように修正します。以下に修正したコードを示します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="960" height="720"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var initialPaddleWidth = 75;
var paddleWidth = initialPaddleWidth;
var paddleHeight = 10;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var score = 0;
var stage = 1;
var life = 3;
var blockRowCount = 6;
var blockColumnCount = 8;
var blockWidth = 75;
var blockHeight = 20;
var blockPadding = 10;
var blockOffsetTop = 30;
var blockOffsetLeft = (canvas.width - (blockColumnCount * (blockWidth + blockPadding))) / 2;
var gameStarted = false;
var lastScoreForBall = 0;
var balls = [{
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
}];
var blocks = [];
var blockColors = ["red", "green", "blue", "yellow", "orange", "purple"];
function generateBlocks() {
for(var c=0; c<blockColumnCount; c++) {
blocks[c] = [];
for(var r=0; r<blockRowCount; r++) {
blocks[c][r] = { x: 0, y: 0, status: 1, color: blockColors[r] };
}
}
}
generateBlocks();
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
else if(e.key == " " || e.key == "Spacebar") {
gameStarted = true;
}
}
function keyUpHandler(e) {
if(e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
else if(e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function drawBall(ball) {
ctx.beginPath();
ctx.arc(ball.x, ball.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 drawBlocks() {
for(var c=0; c<blockColumnCount; c++) {
for(var r=0; r<blockRowCount; r++) {
if(blocks[c][r].status == 1) {
var blockX = (c*(blockWidth+blockPadding))+blockOffsetLeft;
var blockY = (r*(blockHeight+blockPadding))+blockOffsetTop;
blocks[c][r].x = blockX;
blocks[c][r].y = blockY;
ctx.beginPath();
ctx.rect(blockX, blockY, blockWidth, blockHeight);
ctx.fillStyle = blocks[c][r].color;
ctx.fill();
ctx.closePath();
}
}
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: "+score, 70, 20);
}
function drawLife() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Life: "+life, canvas.width - 100, 20);
}
function drawStage() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Stage: "+stage, canvas.width - 200, 20);
}
function drawStartScreen() {
ctx.font = "40px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("PUSH SPACE KEY", canvas.width/2 - 150, canvas.height/2);
}
function drawBoundaries() {
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
ctx.strokeStyle = "#0095DD";
ctx.stroke();
ctx.closePath();
}
function collisionDetection(ball) {
for(var c=0; c<blockColumnCount; c++) {
for(var r=0; r<blockRowCount; r++) {
var b = blocks[c][r];
if(b.status == 1) {
if(ball.x > b.x && ball.x < b.x+blockWidth && ball.y > b.y && ball.y < b.y+blockHeight) {
ball.dy = -ball.dy;
b.status = 0;
score++;
if(score % 50 == 0) {
life++;
}
if(score == blockRowCount*blockColumnCount*stage) {
if(stage == 10) {
alert("YOU WIN, CONGRATS!");
document.location.reload();
clearInterval(interval);
} else {
stage++;
generateBlocks();
}
}
}
}
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBoundaries();
drawBlocks();
drawPaddle();
drawScore();
drawLife();
drawStage();
if(gameStarted) {
balls.forEach((ball, i) => {
drawBall(ball);
ball.x += ball.dx;
ball.y += ball.dy;
if(ball.x + ball.dx > canvas.width-ballRadius || ball.x + ball.dx < ballRadius) {
ball.dx = -ball.dx;
}
if(ball.y + ball.dy < ballRadius) {
ball.dy = -ball.dy;
}
else if(ball.y + ball.dy > canvas.height-ballRadius) {
if(ball.x > paddleX && ball.x < paddleX + paddleWidth) {
ball.dy = -ball.dy;
}
else {
balls.splice(i, 1);
if(paddleWidth > initialPaddleWidth) {
paddleWidth -= 20;
}
if(!balls.length) {
life--;
if(!life) {
alert("GAME OVER");
document.location.reload();
clearInterval(interval);
} else {
balls.push({
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
});
if(paddleWidth < initialPaddleWidth) {
paddleWidth += 20;
}
}
}
}
}
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
collisionDetection(ball);
});
// Ball addition condition
if (score - lastScoreForBall >= 5) {
balls.push({
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
});
lastScoreForBall = score;
paddleWidth += 20;
}
} else {
drawStartScreen();
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
この修正により、スコアが5ポイント追加されるたびにボールが追加されるようになります。また、キャンバスの境界線を描画する新たな関数 drawBoundaries を追加しました。
高まるゲーム性！高まる完成度！
かなり良い感じに調整出来てきましたね！
パドルの長さが可変することで、
ボール数に応じてパドル移動スピードがアップする不具合も、
ゲーム性として吸収出来ましたね。よきよき。
画面内のボール数に応じて、パドルの長さも可変します！
ここまでくると、
フツーにプレイする気が起きるブロック崩し
になってきました！
続きは、また次回！