Javascript 为什么这个物体消失了？

嗯 我是一个新的编码，并试图使一个小乒乓克隆。 不知何故，当这个对象碰到canvas元素的底部时，它就消失了

这是我的密码：

var padle = {

x: 0,
y: 150,
w: 20,
h: 50,
// Add vx and vy properties here:
vx: 0,
vy: 100,
ax: 0,
ay: 0,

color: "#FAFAFA",

draw: function() {
        ctx.beginPath();
        ctx.fillRect(this.x, this.y, this.w, this.h );
        ctx.fillStyle = this.color;
        ctx.fill();
},
update: function() {
    // Update the particle's position
    this.vx += this.ax / FPS;
    this.vy += this.ay / FPS;
    this.x += this.vx / FPS;
    this.y += this.vy / FPS;

    if ( this.x < 0 ) {
            this.x = 0;
            this.vx = -this.vx;
    }
    if ( this.x > canvas.width ) {
    this.x = canvas.width;
    this.vx = -this.vx;
    }
    if (this.y  < 0 ) {
        this.y = 0;
        this.vy = -this.vy;
    }
    if ( (this.y + this.h)> canvas.height ) {
        this.y = canvas.height;
        this.vy = -this.vy;
    }
} 
};`

var padle={
x:0,，
y:150，
w:20，
h:50，
//在此处添加vx和vy属性：
vx:0，
vy:100，
ax:0，
艾:0,，
颜色：“FAFAFA”，
绘图：函数（）{
ctx.beginPath（）；
ctx.fillRect（this.x，this.y，this.w，this.h）；
ctx.fillStyle=this.color；
ctx.fill（）；
},
更新：函数（）{
//更新粒子的位置
this.vx+=this.ax/FPS；
this.vy+=this.ay/FPS；
this.x+=this.vx/FPS；
this.y+=this.vy/FPS；
如果（此.x<0）{
这个.x=0；
this.vx=-this.vx；
}
if（this.x>canvas.width）{
这个.x=canvas.width；
this.vx=-this.vx；
}
如果（此.y<0）{
这个。y=0；
this.vy=-this.vy；
}
如果（（this.y+this.h）>canvas.height）{
this.y=canvas.height；
this.vy=-this.vy；
}
} 
};`

怎么了？我真的不明白你的话

if ( (this.y + this.h)> canvas.height ) {
    this.y = canvas.height;
    this.vy = -this.vy;
}

---

将

this.y

设置为

canvas.height

，而实际上应该将其设置为

canvas.height-this.h

。发生的情况是，您告诉该项“如果您的下边缘位于画布下方，则将您的上边缘设置为正好位于画布底部”，并导致该代码在循环中每次都进行求值，这就是它似乎“消失”的原因。它卡在画布底部下方。

可以吗？虽然当前配置中没有问题，但宽度也存在类似问题。