Javascript 如何在JavaSCIPT中为类的实例定义颜色

我制作了一个突破游戏，我必须制作一些方块，并给它们一个数组中定义的随机颜色，但是为了制作更多的方块，我必须使用for循环。因此，当我将它们添加到更新功能时，颜色会以帧速率闪烁。我想如果你运行这个片段，你会理解得更好

还有一件事：canvasRendering…rundedRectangle是一个绘制圆角矩形的函数。有人请找到解决方案

CanvasRenderingContext2D.prototype.roundedRectangle=函数（x、y、宽度、高度、圆角）{ const radiansInCircle=2*Math.PI； 常数半弧度=（2*Math.PI）/2； 常数四分之一弧度=（2*Math.PI）/4； //左上弧 圆弧（圆角+x，圆角+y，圆角，-四分之一弧度，半弧度，真）； //从左上角到左下角的线条 此.lineTo（x，y+高度-四舍五入）； //左下弧 圆弧（圆角+x，高度-圆角+y，圆角，半弧度，四分之一弧度，真）； //从左下到右下的线条 此.lineTo（x+宽度-圆角，y+高度）； //右下弧 圆弧（x+宽度-圆角，y+高度-圆角，圆角，四分之一弧度，0，真）； //从右下到右上的线条 此.lineTo（x+宽度，y+四舍五入）； //右上弧 弧（x+宽度-圆角，y+圆角，圆角，0，-四分之一弧度，真）； //从右上到左上的线条 此.lineTo（x+四舍五入，y）； }; var canvas=document.getElementById（“gameCanvas”）； var ctx=canvas.getContext（“2d”）； 功能播放器（x、y、w、h）{ 这个.x=x； 这个。y=y； 这个.w=w； 这个，h=h； this.show=函数（）{ ctx.beginPath（）； ctx.rect（this.x，this.y，this.w，this.h）； ctx.fillStyle=“#ffff”； ctx.fill（）； ctx.closePath（）； }; this.move=功能（速度）{ 这个.x+=速度； }; } 功能球（x，y，r）{ 这个.x=x； 这个。y=y； 这个。r=r； this.show=函数（）{ ctx.beginPath（）； 弧（this.x，this.y，this.r，0,2*Math.PI）； ctx.fillStyle=“番茄”； ctx.fill（）； ctx.closePath（）； }; this.move=函数（speedX，speedY）{ this.show（）； 这个速度=2； 这个.x+=speedX； 这个.y+=快速； }; } 变量颜色=['#A5E75A'、'#7254AD'、'#FFD606'、'#FF093D']； 功能块（x、y、w、h）{ 这个.x=x； 这个。y=y； 这个.w=w； 这个，h=h； 这个状态=1； this.show=函数（颜色）{ ctx.beginPath（）； ctx.圆反射角（这个.x，这个.y，这个.w，这个.h，5）； //ctx.arc（this.x，this.y，10,0,2*Math.PI）； //ctx.fillStyle=colors[Math.floor（Math.random（）*colors.length）]； ctx.fillStyle=颜色； ctx.fill（）； ctx.closePath（）； }; } var播放器=新播放器（画布宽度/2-50780100,20）； var ball=新球（player.x+player.w/2，player.y，15）； var righthpressed=false； var leftPressed=false； var块=[]； var行数=5； var列数=6； var noInRow=6； var blockCount=（行计数*列计数）+1； var rc={blockRow:0， blockCol:0}； for（设i=0；icanvas.width player.w）{ player.x=canvas.width player.w； } } 如果（左按）{ 玩家移动（-5）； if（player.x<0）{ player.x=0； } } if（ball.x>canvas.width ball.r | | ball.x<0+ball.r）{ ballSpeedX=-ballSpeedX； } if（/*ball.y>canvas.height ball.r |*/ball.y<0+ball.r）{ 鲍尔斯皮蒂=-鲍尔斯皮蒂； } if（ball.xplayer.x&&ball.y>player.y&&ball.yplayer.x&&ball.x=player.y）{ ballSpeedX=-5； } } 如果（ball.x>player.x+player.w/2&&ball.x=player.y）{ ballSpeedX=5； } } } //Bump（）； } 函数重载（）{ if（ball.y>canvas.height）{ //警报（“游戏结束”）； ball.x=player.x+player.w/2； ball.y=player.y-ball.r； ballSpeedX=0； ball=0； } } var ballSpeedX=0； var=-0； 函数冲突（）{ 对于（设i=1；iblocks[i].x&& ball.xblocks[i].y&&

---

ball.y因为每次更新都会从画布上删除并重新绘制所有矩形，并在显示时指定新颜色，所以每次更新都会为它们指定新颜色。您可以通过向矩形添加属性

color

来避免这种情况，该矩形已初始化（一次，在初始for循环中也是如此）使用随机颜色，并更改

show

函数以使用

this.color

，而不是接受颜色作为参数。这样，您不会在每次更新时为矩形指定新颜色，也不会在每次更新时更改颜色。

因为每次更新时都会从画布中删除并重新绘制所有矩形，并在画布上指定新颜色如何在每次更新时为它们分配新的颜色。您可以通过向矩形添加属性

color

来避免这种情况，该矩形已初始化（一次，因此在初始for循环中）使用随机颜色，并更改

show

函数以使用

this.color

，而不是接受颜色作为参数。这样，您就不会在每次更新时为矩形指定新颜色，也不会在每次更新时更改颜色