试图在JavaScript中使游戏组件透明

我一直在关注W3School关于使用JavaScript开发HTML5游戏的教程，以创建一个相当简单的游戏

代码可以工作，但我想在绿色块与红色块发生碰撞时将其更改为透明。 以下是我的代码：

帆布{
边框：1px实心#D3；
背景色：#f1f1；
}
var得分=0；
我的配子；
var myobstackes=[]；
var myScore；
函数startName（）{
myGamePiece=新组件（30,30，“红色”，10,120）；
myScore=新组件（“30px”、“控制台”、“黑色”、280、40、“文本”）；
myGameArea.start（）；
}
var myGameArea={
画布：document.createElement（“画布”），
开始：函数（）{
this.canvas.width=480；
this.canvas.height=270；
this.context=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
这个.frameNo=0；
this.interval=setInterval（updateGameArea，20）；
},
清除：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
}
功能组件（宽度、高度、颜色、x、y、类型）{
this.type=type；
这个。宽度=宽度；
高度=高度；
这是0.speedX=0；
该值为0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
如果（this.type==“text”）{
ctx.font=this.width+“”+this.height；
ctx.fillStyle=颜色；
ctx.fillText（this.text，this.x，this.y）；
}否则{
ctx.fillStyle=颜色；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
}
this.newPos=函数（）{
this.x+=this.speedX；
this.y+=this.speedY；
}
this.crashWith=函数（otherobj）{
var myleft=this.x；
var myright=this.x+（this.width）；
var mytop=this.y；
var mybottom=this.y+（this.height）；
var otherleft=otherobj.x；
var otherright=otherobj.x+（otherobj.width）；
var othertop=otherobj.y；
var otherbottom=otherobj.y+（otherobj.height）；
var-crash=true；
如果（（mybottomotherbottom）| |（myrightotherright））{
崩溃=错误；
}
返回碰撞；
}
}
函数updateGameArea（）{
变量x，高度，间隙，最小高度，最大高度，最小间隙，最大间隙；
对于（i=0；i

左边
右


向下
分数将为你“保持活力”的每一帧计算一分

您需要将

this.color

属性添加到

组件

函数构造函数中（同样

color

必须是

this.color

在

update（）

所述构造函数中的函数）。然后，只要在遍历myobstacks[i]并检测碰撞时更改其

颜色

属性（我相信“透明”是有效的）

---

这是一把小提琴。祝你好运

您需要将

this.color

属性添加到

组件

函数构造函数中（同样

color

必须是

this.color

在

update（）

所述构造函数中的函数）。然后，只要在遍历myobstacks[i]并检测碰撞时更改其

颜色

属性（我相信“透明”是有效的）

---

这是一把小提琴。祝你好运

很好用！谢谢没问题！如果你觉得这个答案有用，你能接受吗？：）很好用！谢谢没问题！如果你觉得这个答案有用，你能接受吗？：）