Javascript 为什么我的球什么都没弹出来？

我正在做一个简单的乒乓球游戏，当你用“w”向上移动红色方块时，球仍然会在没有任何东西的情况下反弹回左边。我觉得边界框可能设置得不正确。我想不出我做错了什么

var画布；
var语境；
无功定时器；
var区间=1000/60；
var-player1；
var-player2；
var球；
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
//player=新玩家（）；
player1=新游戏对象（）；
player2=新游戏对象（）；
ball=新游戏对象（）；
定时器=设置间隔（动画，间隔）；
函数animate（）{
clearRect（0，0，canvas.width，canvas.height）；
ball.move（）；
//将玩家移到右边
如果（w）{
控制台日志（“”）；
player1.y+=-8；
}
若有(s){
控制台日志（“”）；
player1.y+=8；
}
如果（d）{
控制台日志（“”）；
player2.y+=-8；
}
如果（u）{
控制台日志（“”）；
player2.y+=8；
}
如果（player1.y>canvas.height-player1.height/2）{
player1.y=canvas.height-player1.height/2；
}
如果（播放器1.y<播放器1.H/2）{
player1.y=player1.height/2；
}
如果（player2.y>canvas.height-player2.height/2）{
player2.y=canvas.height-player2.height/2；
}
如果（player2.ycanvas.width-ball.width/2）{
ball.vx=-ball.vx；
//球x=300；
color=“#ff0000”；
}
如果（球x<0+球宽/2）{
//如果是负号，它会翻转。
ball.vx=-ball.vx；
//球x=300；
color=“#FF4500”；
}
//-------------------------------------------------------
//为每个关键点定义布尔值
var w=假；
var s=假；
var u=假；
var d=假；
//添加事件侦听器
文件。添加文本列表器（“向下键”，按）；
文件。附录列表（“键控”，发布）；
文件。添加文本列表器（“向下键”，按）；
文件。附录列表（“键控”，发布）；
//事件函数
功能按钮（e）{
//---这会将关键代码记录到浏览器的控制台中。
控制台日志（“按下”+e.keyCode）；
如果（e.keyCode==87）{
w=真；
}
如果（e.keyCode==83）{
s=真；
}
}
功能释放（e）{
//---这会将关键代码记录到浏览器的控制台中。
//控制台日志（“已发布”+e.keyCode）；
如果（e.keyCode==87）{
w=假；
}
如果（e.keyCode==83）{
s=假；
}
}
功能按钮（e）{
//---这会将关键代码记录到浏览器的控制台中。
//控制台日志（“按下”+e.keyCode）；
如果（e.keyCode==40）{
u=真；
}
如果（e.keyCode==38）{
d=正确；
}
}
功能发布（e）{
//---这会将关键代码记录到浏览器的控制台中。
//控制台日志（“已发布”+e.keyCode）；
如果（e.keyCode==40）{
u=假；
}
如果（e.keyCode==38）{
d=假；
}
}
//JavaScript文档
函数GameObject（）{
//玩家位置
这个.x=canvas.width/4；
这个.y=canvas.height/2；
//玩家维度
这个宽度=50；
这个高度=250；
//障碍物
//每个轴上的球速度或速度
这是1.vx=8；
这是0.vy=0；
//球员的颜色
var red=“#ff0000”；
this.blue=“#0000FF”；
this.color=“#ff0000”；
this.other=“#0000FF”；
//这会将玩家吸引到屏幕上
this.drawRect=函数（）{
context.save（）；
context.fillStyle=this.color；
翻译（this.x，this.y）；
context.fillRect（（-this.width/2），（-this.height/2），this.width，this.height）；
restore（）；
}
this.second_drawRect=函数（）{
context.save（）；
context.fillStyle=this.blue；
context.translate（canvas.width/1.5，this.y）；
context.fillRect（（-this.width/2），（-this.height/2），this.width，this.height）；
restore（）；
}
this.drawCircle=函数（）{
context.save（）；
context.fillStyle=this.color；
翻译（this.x，this.y）；
context.beginPath（）；
弧（0,0,50,0,360*Math.PI/180，真）
context.fill（）；
stroke（）；
//context.fillRect（（-this.width/2）、（-this.height/2）、this.width、this.height）；
restore（）；
}
//这会改变球员的位置
this.move=函数（）{
this.x+=this.vx；
this.y+=this.vy；
}
this.left=函数（）{
返回此.x-此.width/1；
}
this.right=函数（）{
返回此.x+此.width/2；
}
this.top=函数（）{
返回this.y-this.height/4；
}
this.bottom=函数（）{
返回此.y+此.height/4；
}
//////////////////////////////////////////////////////////////
this.leftt=函数（）{
返回此.x-此.width/2；
}
this.rightt=函数（）{
返回此.x+此.width/2；
}
this.topp=函数（）{
返回this.y-this.height/2；
}
this.bottomm=函数（）{
返回此.y+此.height/2；
}
this.hitTestObject=函数（obj）{
如果（this.left（）obj.left（）&&
this.top（）obj.top（））{
返回真值
}
返回false；
}
}

您的浏览器已过时，不支持HTML5。请更新至最新版本。

debug it

console.log（ball.x，'>'，canvas.width，'-'，ball.width/2）

代码中多余的空白是怎么回事？