打砖块游戏砖块颜色切换过快，求优化方案（附代码）

你当前的砖块颜色切换速度过快，原因是drawBricks函数每帧都会为每个砖块生成新的随机颜色。以下是针对老师提出的两个优化方向的具体实现：

方案一：降低颜色切换速度 #

通过给每个砖块添加计时器，控制颜色切换的时间间隔，比如每2秒切换一次颜色。

修改后的关键代码： #

// 新增全局配置：颜色切换间隔（毫秒）
const colorSwitchInterval = 2000;

// 初始化砖块时添加颜色和计时器属性
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,
      color: randBrick(), // 初始颜色
      lastSwitchTime: Date.now() // 上次切换时间
    };
  }
}

// 修改drawBricks函数
function drawBricks() {
  const now = Date.now();
  for(let c=0; c<brickColumnCount; c++) {
    for(let r=0; r<brickRowCount; r++) {
      const brick = bricks[c][r];
      if(brick.status == 1) {
        // 检查是否到切换时间
        if(now - brick.lastSwitchTime > colorSwitchInterval) {
          brick.color = randBrick();
          brick.lastSwitchTime = now;
        }
        const brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
        const brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
        brick.x = brickX;
        brick.y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = brick.color; // 使用砖块自身的颜色
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}

调整colorSwitchInterval的值可以改变切换速度，数值越大，切换越慢。

方案二：砖块被击中时切换颜色 #

只在砖块被球击中时改变其颜色，而不是自动切换。

修改后的关键代码： #

// 初始化砖块时添加颜色属性
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,
      color: randBrick() // 初始颜色
    };
  }
}

// 修改碰撞检测函数，击中时切换颜色
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 > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
          dy = -dy;
          b.color = randBrick(); // 击中时切换颜色
          // 如果你希望击中后砖块消失，保留b.status=0；如果想让砖块继续存在，注释掉下面这行
          // b.status = 0;
          score++;
          if(score == brickRowCount*brickColumnCount) {
            document.getElementById('gameWin').style.display = 'block';
            clearInterval(interval); 
          }
        }
      }
    }
  }
}

// 修改drawBricks函数
function drawBricks() {
  for(let c=0; c<brickColumnCount; c++) {
    for(let r=0; r<brickRowCount; r++) {
      const brick = bricks[c][r];
      if(brick.status == 1) {
        const brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
        const brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
        brick.x = brickX;
        brick.y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = brick.color; // 使用砖块自身的颜色
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}

注意：如果希望砖块被击中后不消失，而是只变色，需要注释掉b.status = 0这行代码；如果保持原逻辑（击中后消失），则保留该行，此时颜色切换只会在击中瞬间显示一次。

内容的提问来源于stack exchange，提问作者SINNERS_EMBRACE