ChatGPT4:ブロック崩しの自動生成(5) 「カオスの継続・・・初の実行不可エラー!」
続くカオス状態
そもそも、ブロック崩しゲームの内容すら崩壊してしまっているので、
1つ1つ細かい修正依頼を続けていきます。
いいですね。次の改善をお願いします。
・パドルが表示されていないので、修正してください。
・スコア表示位置、左端が見切れてしまっているので、修正してください。
<!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="960" 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 gameStarted = false;
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;
}
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 = 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, 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.textAlign = "center";
ctx.fillText("PUSH SPACE KEY", canvas.width/2, canvas.height/2);
}
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();
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(!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(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
collisionDetection(ball);
});
} else {
drawStartScreen();
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
正規ルートへの復帰
ようやくプレイラブルな状態に戻ってこれました。
加えて、
・スコア表示
・ライフ制の導入
・ボールが1つでも画面内に残っている間はプレイ継続
の追加仕様も満たされています。
いい感じです!
忘れられている複数色ブロック
正常なルート(=動く状態)に戻ってこれたので、
改めて、追加仕様と細かい修正依頼を繰り返します。
いいですね。次の改善をお願いします。
・パドルの速度が徐々に速くなっていってしまう不具合の修正
・ボールが跳ね返る壁の位置をラインで囲む
・行ごとにブロックの色を変更するCSSを実装する(3回目)
特に、複数色対応については、報告上ずっと「できました!」となっているものの、実際に画面に反映されていません。
「3回目」とドライな念押し(嫌味)を追加してみました。
以前にも書きましたが、コード内にCSSに関する記述は存在しているので、「準備はしてあるから、クラス指定は自分でやってね!」
という扱いなのかもしれません。
しかし、今回は基本的にコードに手を加える気は無いので、ChatGPTの力だけで実現してもらおうと試みます。
<!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; }
#border { border: 1px solid #0095DD; }
</style>
</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 paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var paddleSpeed = 7;
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 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;
}
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 = 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, 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.textAlign = "center";
ctx.fillText("PUSH SPACE KEY", canvas.width/2, canvas.height/2);
}
function drawBorder() {
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = window.getComputedStyle(document.body).getPropertyValue('#border');
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 % 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);
drawBorder();
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(!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(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += paddleSpeed;
}
else if(leftPressed && paddleX > 0) {
paddleX -= paddleSpeed;
}
collisionDetection(ball);
});
} else {
drawStartScreen();
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
枠線によりゲームキャンバスの見易さは格段に上がりましたが、
「3回目」の嫌味も虚しく、
カラー変更には対応してもらえませんでした。
実装方法そのものを変える!
CSSでの実装ではなく、
別の方法でカラー変更を実装してもらうために、
攻め方(伝え方)を変えることにしました。
合わせて、
パドル速度が徐々に早くなる不具合も、
逆にゲーム性の向上に繋がる気もしたので、
仕様として活かす方向にシフトします。
ボール数に応じてパドルの長さが徐々に長くなる様に
新たな仕様を要求しました。
いいですね。次の改善をお願いします。
・パドルの速度が徐々に速くなっていってしまう不具合がまだ残っているので、再修正してください。
・ボールが増えるごとに、パドルの長さを20pxずつ伸ばしてください。ただし、ボールが1つ減ったら、パドルの長さを−20pxしてください。
・行ごとにブロックの色が変更されないので、CSS実装方法を変更してください
<!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; }
#border { border: 1px solid #0095DD; }
</style>
</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 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, id: `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;
}
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 = window.getComputedStyle(document.getElementById(blocks[c][r].id)).backgroundColor;
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 - 200, canvas.height/2);
}
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);
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);
});
} else {
drawStartScreen();
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
随分色々と報告を挙げてきましたね。
実装方法を変更したつもりでしたが、まだCSSにこだわってますね。
むむむ・・・。
初の実行不可エラー!
上記のコードを実行すると、
例のCSS絡み(呪い)で実行不可のエラーが生じました。
いよいよ、方向性を変えないと悪い方向に進んでしまいそうです。
index_11.html:107 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at drawBlocks (index_11.html:107:48) at draw (index_11.html:169:13)
というエラーが出ているので、修正してください
発生しているエラーメッセージをそのままコピペして、
状況を把握してもらった上で、エラーの修正を要求してみます。
再び謝罪からきましたね。
信頼関係が深まってきている気がします。
<!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 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 - 200, canvas.height/2);
}
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);
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);
});
} else {
drawStartScreen();
}
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
自ら作成した関数の使用方法が違うみたいですねーと、自問自答してくれています。トボけてますねぇ。
しかし!!!
自らのエラーを自らで指摘してくれたことで、
良き代案を生み出してくれました。
いいぞいいぞ!
続きは、また次回!
この記事が気に入ったらサポートをしてみませんか?