Javascript 试图在JS中创建一个乒乓球克隆，但Padles赢了'；不要与球互动

我正试图按照指南用Javascript创建我自己的Pong克隆。到目前为止，我已经成功地画出了画布，创建了一个球和桨，我试图看看球是否会与桨相互作用。问题是它不会与它们交互。我不确定我是否在代码方面遗漏了一些东西，或者我是否对一些巨大的错误完全视而不见。这里关于StackOverflow的所有问题要么是用不同的编码语言，要么是我无法理解它们

我很感激能得到的任何帮助

var animate = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) { window.setTimeout(callback, 1000/60) }; 


var canvas = document.createElement("canvas");
var width = 900;
var height = 600;
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");

window.onload = function() {
 document.body.appendChild(canvas);
 animate(step);
};

var step = function() {
 update();
 render();
 animate(step);
};

var update = function() {
 ball.update(player1.paddle, player2.paddle);
};

Ball.prototype.update = function(spelare1, spelare2) {
 this.x += this.x_speed;
 this.y += this.y_speed;
 var top_x = this.x - 5;
 var top_y = this.y - 5;
 var bottom_x = this.x + 5;
 var bottom_y = this.y + 5;

if(this.y - 5 < 0 ) { 
 this.y = 5;
 this.y_speed = -this.y_speed;
} else if(this.y + 5 > 900) { 
 this.y = 450;
 this.y_speed = -this.y_speed;
}

if(this.x < 0 || this.x > 900) { 
 this.x_speed = 3;
 this.y_speed = 0;
 this.x = 450;
 this.y = 300;
}


if(top_x > 900){

if(top_y > (player2.y + player2.height) && bottom_y < player2.y && top_x > 
  (player2.x + player2.width) && bottom_x < player2.x) {

  this.x_speed = -3;
  this.y_speed += (player2.y_speed / 2);
  this.y += this.y_speed;
}
} else {
if(top_y < (player1.y + player1.height) && bottom_y < player1.y && top_x < 
(player1.x + player1.width) && bottom_x < player1.x) {
  // bollen nuddar player1
  this.x_speed = 3;
  this.y_speed += (player1.y_speed / 2);
  this.y += this.y_speed;
}
}
}; 

var render = function() {
 context.fillStyle = "black";
 context.fillRect(0, 0, width, height);
 player1.render();
 player2.render();
 ball.render();
}; 

function Paddle(x, y, width, height) {
 this.x = x;
 this.y = y;
 this.width = width;
 this.height = height;
 this.x_speed = 0;
 this.y_speed = 0;
};

Paddle.prototype.render = function() {
 context.fillStyle = "white";
 context.fillRect(this.x, this.y, this.width, this.height);
};

function spelare1 () {
 this.Paddle = new Paddle(10, 275, 10, 75);
};
function spelare2 () {
 this.Paddle = new Paddle(880, 275, 10, 75);
}; 

spelare1.prototype.render = function () {
 this.Paddle.render();
}; 

spelare2.prototype.render = function () {
 this.Paddle.render();
}; 

function Ball(x, y) {
 this.x = x;
 this.y = y;
 this.x_speed = 0;
 this.y_speed = 3;
 this.radius = 4;
};

Ball.prototype.render = function() {
 context.beginPath();
 context.arc(this.x, this.y, this.radius, 2 * Math.PI, false);
 context.fillStyle = "white";
 context.fill();
}; 

var player1 = new spelare1(); 
var player2 = new spelare2(); 
var ball = new Ball(450, 300); 

var animate=window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
函数（回调）{window.setTimeout（回调，1000/60）}；
var canvas=document.createElement（“canvas”）；
var宽度=900；
var高度=600；
画布宽度=宽度；
canvas.height=高度；
var context=canvas.getContext（“2d”）；
window.onload=函数（）{
document.body.appendChild（画布）；
设置动画（步骤）；
};
var步骤=函数（）{
更新（）；
render（）；
设置动画（步骤）；
};
var update=函数（）{
更新（player1.patle，player2.patle）；
};
Ball.prototype.update=函数（spelare1、spelare2）{
此.x+=此.x_速度；
this.y+=this.y\u速度；
var top_x=这个.x-5；
var top_y=this.y-5；
var bottom_x=这个.x+5；
var bottom_y=这个.y+5；
如果（this.y-5<0）{
这个y=5；
this.y_speed=-this.y_speed；
}如果（this.y+5>900）{
这个y=450；
this.y_speed=-this.y_speed；
}
如果（this.x<0 | | this.x>900）{
该点x_速度=3；
该速度=0；
这个.x=450；
这个y=300；
}
如果（顶部>900）{
如果（顶部y>（player2.y+player2.height）和底部y
（player2.x+player2.width）和&bottom_x

查看他们是否有联系的功能是什么？“为什么此代码不工作”不是堆栈溢出问题的正确格式。您需要有一个特定的问题/错误。@yBrodsky在“Ball.prototype.update=function（spelare1，spelare2）”、“if（top_x>900）”下。您的桨的位置是动态的。我要做的是：创建一个新对象，即“法庭”。创建此对象时，将球和两个挡板（已创建的对象）作为参数传递。然后，球场的一项功能是检查当前球位和当前桨位之间是否存在碰撞，以及球场边界。如果发生碰撞，你必须改变球的方向。