Photo by
daisaw33
ChatGPT4：ブロック崩しの自動生成（３） 「ライフ制の導入！ゲーム性を高める」
表示位置を直したい
ブロックの表示位置の指示をどうすべきか少し悩みました。
いいですね。次の改善をお願いします。
・ブロックの表示位置を画面中央に合わせて整列させてください
・ブロックの色を行ごとに変化させてください
ブロックの色は、「そろそろ派手な画面が見たいぜ！ということで、再依頼をしました。
ご要望に基づき、以下のようにブロックの表示位置を中央に揃え、各行でブロックの色を変更するようにスクリプトを更新しました。行の数（blockRowCount）に合わせて、異なる色のCSSクラス（.block1, .block2, ...）を作成してください。
<!DOCTYPE html>
<html>
<head>
<style>
.block1 { background-color: red; }
.block2 { background-color: green; }
.block3 { background-color: blue; }
.block4 { background-color: yellow; }
.block5 { background-color: orange; }
.block6 { background-color: purple; }
</style>
</head>
<body>
<canvas id="myCanvas" width="1280" height="720"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var score = 0;
var stage = 1;
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 balls = [{
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
}];
var blocks = [];
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, class: `block${r+1}` };
}
}
}
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;
}
}
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 = window.getComputedStyle(document.body).getPropertyValue(blocks[c][r].class);
ctx.fill();
ctx.closePath();
}
}
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: "+score, 8, 20);
}
function drawStage() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Stage: "+stage, canvas.width - 100, 20);
}
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 % 5 == 0) {
balls.push({
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
});
}
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);
drawBlocks();
balls.forEach(ball => drawBall(ball));
drawPaddle();
drawScore();
drawStage();
balls.forEach(ball => collisionDetection(ball));
balls.forEach((ball, i) => {
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 {
alert("GAME OVER");
document.location.reload();
clearInterval(interval);
}
}
ball.x += ball.dx;
ball.y += ball.dy;
});
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
なお、ブロックの色の配列はCSSクラスを用いて指定していますが、JavaScript内で直接色の配列を定義し、ブロックの色を決定することも可能です。今回の方法は、CSSの変更によりブロックの色を簡単に変更できるため選択しました。
こちらの要件としてCSSを指定していましたが、
ここへきて「JavaScriptでも直接変更できますよ」と提案を頂きました。
また、CSSクラスは色数を増やして貰えた模様。
異なる色のCSSクラス（.block1, .block2, ...）を作成してください。
と言われても、既に作成して貰えているよーな？
相変わらず、ブロック色は変化なし。
この辺は放置しつつ、次の指示に。
そうだ！ライフ制にしよう！
１ボールでも落ちたら即死！も困るので、ライフのルールと合わせて、「画面内の全てのボールが落下したらライフを減らす」ことにします。
また、あらかじめライフの初期値も指定しておきます。
いいですね。次の改善をお願いします。
・画面内の全てのボールを下に落としたらライフを−１してください。
・ライフは最初３から始めて、５０点ごとに＋１してください。
・ライフが０になったらゲームオーバーとしてください
指示に従ってライフの概念を追加し、50点ごとにライフが1増え、すべてのボールが下に落ちたときにライフが1減り、ライフが0になったときにゲームが終了するように修正しました。
<<!DOCTYPE html>
<html>
<head>
<style>
.block1 { background-color: red; }
.block2 { background-color: green; }
.block3 { background-color: blue; }
.block4 { background-color: yellow; }
.block5 { background-color: orange; }
.block6 { background-color: purple; }
</style>
</head>
<body>
<canvas id="myCanvas" width="1280" height="720"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
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 balls = [{
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
}];
var blocks = [];
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, class: `block${r+1}` };
}
}
}
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;
}
}
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 = window.getComputedStyle(document.body).getPropertyValue(blocks[c][r].class);
ctx.fill();
ctx.closePath();
}
}
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: "+score, 8, 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 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 % 5 == 0) {
balls.push({
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2
});
}
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);
drawBlocks();
balls.forEach(ball => drawBall(ball));
drawPaddle();
drawScore();
drawLife();
drawStage();
balls.forEach(ball => collisionDetection(ball));
balls = balls.filter((ball, i) => {
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;
return true;
}
else {
life--;
if(life == 0) {
alert("GAME OVER");
document.location.reload();
clearInterval(interval);
}
return false;
}
}
ball.x += ball.dx;
ball.y += ball.dy;
return true;
});
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
これでライフが0になるとゲームが終了し、ライフが3から始まり、50点ごとにライフが1増えるようになりました。また、すべてのボールが下に落ちたときにライフが1減るようになりました。
こちらの全ての指示に対してオウム返ししてくるので、
安心していましたが・・・やられましたね。
リスタートしない
ちゃんとライフは３から始まりますし、
５０点ごとにライフも増えますし、
ボール落とした際にライフも１減ります。
が
ライフ１を減らした後、ゲームはフリーズします。
（ゲームオーバーですらない）
…ライフ制の意味とは？？？
こちらのプロンプトとして、
「ライフ１減らした後、プレイ続行」
という指示をしていないことが原因ですね。
プログラミングと同じく、
こちら（人間）の伝えた（入力した）通りに、
コンピュータは処理をする、と。
学びがありますね！
続きは、また次回！