Javascript 当onclick事件触发时，游戏卡在第一帧上

我正在使用html canvas元素在网页中制作一个游戏，我将游戏的所有代码都放在一个名为playPong（）的函数中，当代码没有存储在函数中时，它工作得非常好，但是当从onclick事件调用函数时，游戏的所有元素都会显示出来，但什么都不会发生。这是我的密码

函数playPong（）{
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（）{
这个.xSpeed*=-1；
},
reverseY:function（）{
这是1.y速度*=-1；
},
重置：函数（）{
警惕（'分数现在是'+this.playerscore+'到'+this.aiscore'）；
这个.x=20；
这个y=24；
这个.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（）；
ball.aiscore=ball.aiscore+1；
}
如果（球x>640）{
ball.reset（）；
ball.playerscore=ball.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]；
}，假）；
勾选（）；
}
函数getOff（）{
警惕（“你已经开机五分钟了，该休息了。”）；
setTimeout（function（）{alert（“已经10分钟了，回去工作吧”）；
close（）；
var body=document.getElementById（'hide5'）
body.style.display='none'
},300000);
}
设定间隔（起飞，300000）
}
如果您想按按钮开始游戏，请玩乒乓球。您可以创建函数playPong（）来只覆盖tick（）代码行

如下图所示



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）；
var球=