Javascript 当我添加命中检测时，我的画布将消失

我目前正在做一个小js游戏只是为了好玩

但每当我向多维数据集中添加命中检测时，我的整个画布都会消失。我不知道是什么原因造成的，所以我在这里问。我将添加两个片段。一个在我添加命中检测之前，一个在之后。我希望有人能帮助我

var-myGamePiece；
函数startName（）{
myGamePiece=新组件（30,30，“红色”，225,225）；
myGameArea.start（）；
}
var myGameArea={
画布：document.createElement（“画布”），
开始：函数（）{
this.canvas.width=500；
this.canvas.height=500；
this.context=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
这个.frameNo=0；
this.interval=setInterval（updateGameArea，20）；
window.addEventListener（'keydown'，函数（e）{
e、 预防默认值（）；
myGameArea.keys=（myGameArea.keys | | |[]）；
myGameArea.keys[e.keyCode]=（e.type==“keydown”）；
})
window.addEventListener（'keyup'，函数（e）{
myGameArea.keys[e.keyCode]=（e.type==“keydown”）；
})
},
停止：函数（）{
clearInterval（这个.interval）；
},    
清除：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
}
功能组件（宽度、高度、颜色、x、y、类型）{
this.type=type；
这个。宽度=宽度；
高度=高度；
这个速度=0；
这个角度=0；
此.moveAngle=0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
ctx.save（）；
ctx.translate（this.x，this.y）；
ctx.旋转（此角度）；
ctx.fillStyle=颜色；
ctx.fillRect（this.width/-2，this.height/-2，this.width，this.height）；
ctx.restore（）；
}
this.newPos=函数（）{
this.angle+=this.moveAngle*Math.PI/180；
this.x+=this.speed*Math.sin（this.angle）；
this.y-=this.speed*Math.cos（this.angle）；
}
}
函数updateGameArea（）{
myGameArea.clear（）；
myGamePiece.moveAngle=0；
myGamePiece.speed=0；
如果（myGameArea.keys&&myGameArea.keys[37]）{myGamePiece.moveAngle=-2；}
如果（myGameArea.keys&&myGameArea.keys[39]）{myGamePiece.moveAngle=2；}
如果（myGameArea.keys&&myGameArea.keys[38]）{myGamePiece.speed=2；}
如果（myGameArea.keys&&myGameArea.keys[40]）{myGamePiece.speed=-2；}
myGamePiece.newPos（）；
myGamePiece.update（）；
}

当我复制您的第二个代码片段时，我注意到代码在某些地方缺少括号。所以我也没有画布

因此，之后还有一个额外的：

this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
}
 } <-- //This guy

在此之后，我刚开始将myGameArea对象与其他对象一起移动（不是强制性的，但最好将所有变量放在一起），它们称为：

瞧

---

这些类型的错误不会真正出现在控制台中，但是您可以通过在代码上运行一些自动格式化/自动缩进来注意它们如果在此之后代码缩进不好，很有可能您错过了一个括号

代码中有语法错误。检查你的花括号；你过早地关闭了一个函数。此外，这本质上是你先前问题的重复。它可能因此而关闭。如果您想要正确的答案，至少要确保在尝试运行代码段时不会立即出现语法错误。加上HTML，我们有一个。搞错了，意思是大括号，我说的是括号。

    }
    return crash;
  }
"}" <-- //This one is missing

    myGamePiece.update();
    }
"}" <-- //This one is missing too

startGame()