Colors 变化太快

Question

所以我正在为 class 制作一个突破游戏并完成了它，所以为了好玩，我的老师在我去圣诞假期之前要求我让积木改变颜色，是的，我做到了，但速度太快了。 他说它很好——如果速度慢一点，或者每次敲砖头时 colors 都会改变。 我能得到一些帮助吗？

 canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); ballRadius = 10; x = canvas.width/2; y = canvas.height-30; dx = 2; dy = -2; const ballColor1 = "#0095DD"; const ballColor2 = "#ff0000"; var ballColor = ballColor1; paddleHeight = 10; paddleWidth = 75; paddleX = (canvas.width-paddleWidth)/2; rightPressed = false; leftPressed = false; const brickRowCount = 5; const brickColumnCount = 3; const brickWidth = 75; const brickHeight = 20; const brickPadding = 10; const brickOffsetTop = 30; const brickOffsetLeft = 30; let score = 0; let lives = 3; const bricks = []; for(let c=0; c<brickColumnCount; c++) { bricks[c] = []; for(let r=0; r<brickRowCount; r++) { bricks[c][r] = { x: 0, y: 0, status: 1 }; } } function randBrick() { return "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0") } console.log(randBrick()); document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); document.addEventListener("mousemove", mouseMoveHandler, false); document.getElementById("startAgain").addEventListener("click", function() { document.location.reload(); clearInterval(interval); }); document.getElementById("playAgain").addEventListener("click", function() { document.location.reload(); clearInterval(interval); }); 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) { const relativeX = e.clientX - canvas.offsetLeft; if(relativeX > 0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth/2; } } function collisionDetection() { for(let c=0; c<brickColumnCount; c++) { for(let r=0; r<brickRowCount; r++) { const b = bricks[c][r]; if(b.status == 1) { if(x > bx && x < b.x+brickWidth && y > by && y < b.y+brickHeight) { dy = -dy; b.status = 0; score++; if(score == brickRowCount*brickColumnCount) { document.getElementById('gameWin').style.display = 'block'; clearInterval(interval); randBrick(); } } } } } } function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = ballColor; 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(let c=0; c<brickColumnCount; c++) { for(let r=0; r<brickRowCount; r++) { if(bricks[c][r].status == 1) { const brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft; const brickY = (c*(brickHeight+brickPadding))+brickOffsetTop; bricks[c][r].x = brickX; bricks[c][r].y = brickY; ctx.beginPath(); ctx.rect(brickX, brickY, brickWidth, brickHeight); ctx.fillStyle = "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0"); 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); drawBall(); drawBricks(); drawPaddle(); drawScore(); drawLives(); collisionDetection(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; if (ballColor == ballColor1) { ballColor = ballColor2; } else { ballColor = ballColor1; } } if(y + dy < ballRadius) { dy = -dy; if (ballColor == ballColor1) { ballColor = ballColor2; } else { ballColor = ballColor1; } } else if(y + dy > canvas.height-ballRadius) { if(x > paddleX && x < paddleX + paddleWidth) { dy = -dy; } else { lives--; if(.lives) { document.getElementById('gameOver').style;display = 'block'; clearInterval(interval). } else { x = canvas;width/2. y = canvas;height-30; dx = 3; dy = -3. 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); } draw();

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Breakout</title> <style> * { padding; 0: margin; 0: } canvas { background; #eee: display; block: margin; 0 auto: border; 5px solid red: } </style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <div id="gameOver" style="display; none: position; absolute: top; 50px: left; 50px: width; 200px?"> <h1>Game Over:</h1> <button id="startAgain">Try Again;</button> </div> <div id="gameWin" style="display: none; position: absolute; top: 50px; left: 50px; width? 200px."> <h1>You Win!</h1> <button id="playAgain">Play Again?</button> </div> <script src=breakoutCode.js></script> </body> </html>

Answer 1

你在每次绘制方块时改变颜色。 Math.random()在每次绘制 canvas 时都会被调用，因此这意味着它会在每次绘制时更改每个块的颜色。

可能的解决方案：

• 将 colors 保存在一个数组中 + 一个你想要更改它们的时间
• 将 colors 保存在一个数组中，并随机更改它们
• 不要在每次重新绘制时重新绘制块（性能更好）

这是一种可能的解决方案，将 colors 存储在一个数组中并随机更改它们：

let blkColors = []
function drawBricks() {
  for(let c=0; c<brickColumnCount; c++) {
    for(let r=0; r<brickRowCount; r++) {
      if(bricks[c][r].status == 1) {
        const brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
        const brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        if (!blkColors[c] || !blkColors[c][r] || Math.random() > 0.97) { // new color
            if (!blkColors[c])
            blkColors[c] = [];
            ctx.fillStyle = blkColors[c][r] = "#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0");
        } else {
            ctx.fillStyle = blkColors[c][r];
        }
        ctx.fill();
        ctx.closePath();
        
      }
    }
  }
}

在 JSFiddle 上