Javascript 未在画布上渲染的元素

我正在做一个乒乓球游戏，一切都很顺利，直到我编码了计分系统，它有两个变量，一个是玩家的分数，另一个是人工智能的分数。当球经过一个球拍时，它会检测到它撞到了哪面墙，并在右得分变量中加1，然后提醒得分。现在，当我运行游戏时，canvas元素是空的。我想知道这里是否有人能知道发生了什么。这是我的密码

var canvas=document.getElementById（“我的”）；
var ctx=canvas.getContext（“2d”）；
功能挡板（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
这个.speedModifier=0；
this.hasCollidateWith=函数（球）{
var-paileftwall=this.x；
var PapperRightWall=this.x+this.width；
var-pailedtopwall=这个.y；
var BadderBottomWall=this.y+this.height；
如果（ball.x>左墙&&
ball.x<右墙&&
球.y>桨顶墙&&
球体y<船桨底部壁）{
返回true；
}
返回false；
};
this.move=函数（键代码）{
var nextY=this.y；
如果（键代码==40）{
nextY+=5；
此参数为1.5；
}else if（keyCode==38）{
nextY+=-5；
这个.speedModifier=1.5；
}否则{
这个.speedModifier=0；
}
nextY=nextY<0？0:nextY；
nextY=nextY+this.height>480？480-this.height:nextY；
y=nextY；
};
}
var播放器=新的桨（5200,25100）；
var ai=新桨叶（610、200、25、100）；
变量球={
x:320，
y:240，
半径：7，
速度:2,，
Y速度：0，
var playerscore=0
var aiscore=0
reverseX:function（）{
这个.xSpeed*=-1；
},
reverseY:function（）{
这是1.y速度*=-1；
},
重置：函数（）{
警惕（'分数现在为'
playerscore+“至”+aiscore）；
这个.x=20；
这个。y=24 30；
这个.xSpeed=2；
这个.ySpeed=0；
},
isBouncing:function（）{
回球速度！=0；
},
modifyXSpeedBy:函数（修改）{
修改=this.xSpeed<0？修改*-1：修改；
var nextValue=this.xSpeed+修改；
nextValue=Math.abs（nextValue）>9？9:nextValue；
this.xSpeed=nextValue；
},
modifyYSpeedBy:函数（修改）{
修改=此。y速度<0？修改*-1：修改；
this.ySpeed+=修改；
}
};
函数tick（）{
updateGame（）；
画（）
setTimeout（“tick（）”，1000/60）；
}
函数updateGame（）{
ball.x+=ball.x速度；
ball.y+=ball.y速度；
如果（球x<0）{
ball.reset（）；
aiscore=aiscore+1；
}
如果（球x>640）{
ball.reset（）；
playerscore=playerscore+1
}
如果（球y=480）{
ball.reverseY（）；
}
var collidedWithPlayer=player.hascolidedwith（球）；
var collidedWithAi=ai.hascolidedwith（ball）；
如果（CollizedWithPlayer | | CollizedWithAI）{
ball.reverseX（）；
修改速度为（0.25）；
var speedUpValue=collidedWithPlayer？player.speedModifier:ai.speedModifier；
ball.modifyYSpeedBy（加速值）；
}
for（heldDown中的var键码）{
玩家移动（按键代码）；
}
var aiMiddle=ai.y+（ai.height/2）；
if（aiMiddleball.y）{
大赦国际（38）；
}
}
函数绘图（）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0,060480）；
renderPaddle（玩家）；
renderPaddle（ai）；
伦德尔球；
}
函数renderPaddle（拨片）{
ctx.fillStyle=“蓝色”；
ctx.fillRect（桨.x，桨.y，桨.宽，桨.高）；
}
函数renderBall（球）{
ctx.beginPath（）；
弧（ball.x，ball.y，ball.radius，0，2*Math.PI，false）；
ctx.fillStyle=“粉红色”；
ctx.fill（）；
}
var heldDown={}；
window.addEventListener（“向下键”），函数（keyInfo）{
heldDown[event.keyCode]=true；
}，假）；
window.addEventListener（“键控”，函数（keyInfo）{
删除heldDown[event.keyCode]；
}，假）；
勾选（）；

错误似乎出现在您的

重置

功能中-您已转到新行，但未连接该行的其余部分

reset: function() {
        alert('The score is now '
        playerscore + ' to ' + aiscore);
        this.x = 20;
        this.y = 24 30;
        this.xSpeed = 2;
        this.ySpeed = 0;
        
    },

应该是

reset: function() {
        alert('The score is now ' + playerscore + ' to ' + aiscore);
        this.x = 20;
        this.y = 24 30;
        this.xSpeed = 2;
        this.ySpeed = 0;
    },

更新 在发布这个答案后，我发现了更多的问题

this.y = 24 30;

应为24或30

这些都在球对象中定义不正确

var playerscore=0 var aiscore=0

应该是

playerscore: 0,
aiscore: 0,

var canvas=document.getElementById（“我的”）；
var ctx=canvas.getContext（“2d”）；
功能挡板（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
这个.speedModifier=0；
this.hasCollidateWith=函数（球）{
var-paileftwall=this.x；
var PapperRightWall=this.x+this.width；
var-pailedtopwall=这个.y；
var BadderBottomWall=this.y+this.height；
如果（ball.x>左墙&&
ball.x<右墙&&
球.y>桨顶墙&&
球体y<船桨底部壁）{
返回true；
}
返回false；
};
this.move=函数（键代码）{
var nextY=this.y；
如果（键代码==40）{
nextY+=5；
此参数为1.5；
}else if（keyCode==38）{
nextY+=-5；
这个.speedModifier=1.5；
}否则{
这个.speedModifier=0；
}
nextY=nextY<0？0:nextY；
nextY=nextY+this.height>480？480-this.height:nextY；
y=nextY；
};
}
var播放器=新的桨（5200,25100）；
var ai=新桨叶（610、200、25、100）；
变量球={
x:320，
y:240，
半径：7，
速度:2,，
Y速度：0，
playerscore:0，
aiscore:0，
reverseX:function（）{
playerscore: 0,
aiscore: 0,