html 颜色变化太快

06odsfpq  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(120)

所以我在做一个突破游戏,并完成了它,所以为了好玩,我的老师在我去圣诞假期之前问我,我让砖块改变颜色,是的我做到了,但它太快了。他说,它是好的-如果它是缓慢的,或者如果颜色改变每一个砖击中。我可以得到一些帮助吗?
第一个

2skhul33

2skhul331#

每次绘制块时都要改变颜色。每次绘制画布时都会调用Math.random(),这意味着每次绘制时都会改变每个块的颜色。
可能的解决方案:

  • 将颜色保存在一个数组中,并在您想要更改颜色时使用a
  • 将颜色保存在数组中并随机更改
  • 每次重绘时不要重绘块(性能更佳)

下面是一个可能的解决方案,它将颜色存储在数组中并随机更改它们:

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();
        
      }
    }
  }
}

On JSFiddle

相关问题