JavaScript，can'；不要在乒乓球中划桨和打球。谁能解释一下原因吗？

有人能解释一下为什么这个代码不起作用吗？到目前为止，它应该在画布上画两个桨和一个球（长方形）。我是JavaScript新手，我正在关注这个YouTube教程，但我几乎在一开始就被卡住了。除了不知道为什么它没有画出游戏的所有元素之外，我也不理解主函数中var=loop函数的含义。请帮帮我

var宽度=700；
var高度=500；
var-pi=Math.pi；
var帆布；
var-ctx；
var-keystate；
var播放器；
var ai；
var球；
玩家={
x:null，
y:空，
宽度：20，
身高：100，
更新：函数（）{}，
绘图：函数（）{
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
}
ai={
x:null，
y:空，
宽度：20，
身高：100，
更新：函数（）{}，
绘图：函数（）{
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
}
球={
x:null，
y:空，
方:20,，
更新：函数（）{}，
绘图：函数（）{
ctx.fillRect（this.x，this.y，this.side，this.side）；
}
}
函数main（）{
canvas=document.createElement（“canvas”）；
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
init（）；
var循环=函数（）{
更新（）；
draw（）；
requestAnimationFrame（循环，画布）；
};
requestAnimationFrame（循环，画布）；
}
函数init（）{
player.x=player.width；
player.y=（高度-player.HEIGHT）/2；
ai.x=宽度-（player.WIDTH+ai.WIDTH）；
ai.y=（高度-ai.HEIGHT）/2；
ball.x=（高度-球侧）/2；
ball.y=（高度-球侧）/2；
}
函数更新（）{
更新（）；
player.update（）；
ai.update（）；
}
函数绘图（）{
ctx.fillRect（0,0，宽度，高度）；
ctx.fillStyle=“#fff”；
ball.draw（）；
player.draw（）；
ai.draw（）；
}
main（）；

---

您正在用白色绘制所有内容。 这就是为什么你什么都看不见。背景是白色的，你画的形状也是白色的

试一试

---

不确定您是否在意，但第61行有一个错误，错误是在将

canvas

附加到主体时发生的。错误表示不能附加null的子级。我建议您执行以下操作：

body=document.getElementsByTagName（'body'）[0]；body.appendChild（画布）请务必告诉我这是否有帮助，或者你是否认为它无关紧要，因为希望至少有一个人能从中学习。我做了你们建议的两件事，另外我在主体部分而不是主体部分重写了脚本，并且成功了。非常感谢你！
function draw(){
    ctx.fillStyle = "#fff";
    ctx.fillRect(0,0,WIDTH,HEIGHT);

    ctx.save();
    ctx.fillStyle = "#000"
    ball.draw();
    player.draw();
    ai.draw();
    ctx.restore();
}