Javascript 如何检查与球员和球的碰撞？

我想用一个球和一个球员（平台）做一个砖块游戏。如果球打到球员身上，它就会像乒乓球一样向另一个方向飞去。但是，它没有检测到碰撞

这是密码

html:

Js:

var宽度=400
可变高度=400
var drawRect=函数（x，y）{
ctx.fillRect（x，y，30，5）
};
//球构造函数
var Player=函数（）{
这个.x=395
这个。y=395
这个.xSpeed=5；
这个.ySpeed=0；
};
//根据球的速度更新球的位置
Player.prototype.move=函数（）{
this.x+=this.xSpeed；
this.y+=this.y速度；
如果（此.x<0）{
x=宽度；
}else if（this.x>宽度）{
这个.x=0；
}else if（此.y<0）{
y=高度；
}else if（this.y>高度）{
这个。y=0；
}
};
//在当前位置绘制球
Player.prototype.draw=函数（）{
drawRect（this.x，this.y）；
};
//根据线设置球的方向
Player.prototype.setDirection=函数（方向）{
如果（方向=“左”）{
this.xSpeed=-5；
这个.ySpeed=0；
}否则，如果（方向==“右”）{
这个.xSpeed=5；
这个.ySpeed=0；
}否则如果（方向==“停止”）{
this.xSpeed=0；
这个.ySpeed=0；
}
};
//创建球对象
var player=新玩家（）；
//将键代码转换为操作名称的对象
var键操作={
32:“停止”，
37:“左”，
38:“向上”，
39:“对”，
40：“向下”
};
//每次按键都将调用的keydown处理程序
$（“html”）.keydown（函数（事件）{
var direction=keyActions[event.keyCode]；
player.setDirection（方向）；
});
var Ball=函数（）{
这是x=100；
这个y=100；
this.xSpeed=-2
该速度为3；
};
变量圆=函数（x、y、半径、圆角圆）{
ctx.beginPath（）；
ctx.弧（x，y，半径，0，数学PI*2，假）
如果（填充圆）{
ctx.fill（）；
}否则{
ctx.stroke（）；
}
}
Ball.prototype.move=函数（）{
this.x+=this.xSpeed
this.y+=this.y速度
};
Ball.prototype.draw=函数（）{
圆圈（这个.x，这个.y，3，真）；
};
Ball.prototype.checkCollision=函数（）{
if（this.x<0 | | this.x>400）{
this.xSpeed=-this.xSpeed
}
如果（此.y<0）{
this.ySpeed=-this.ySpeed
}
};
Ball.prototype.checkCollisionPlayer=函数（）{
if（this.x==Player.x | | this.y==Player.y）{
this.ySpeed=-this.ySpeed
this.xSpeed=-this.xSpeed
}
}
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
setInterval（函数（）{
ctx.clearRect（0,040400）；
player.draw（）；
player.move（）；
ball.draw（）；
ball.move（）；
ball.checkCollision（）；
ball.checkCollisionPlayer（）；
}, 40);
var ball=新的ball（）；

---

感谢您的支持。：）

我添加了一个简单的方块碰撞，并更新了类，使其具有球和球员的方块尺寸。请记住，球盒必须调整半径偏移

更新

需要对箱子进行碰撞检测，你必须知道被击中的边或角。我更新了这个例子作为起点，但它需要添加角点，我也不知道最佳检测。这些块是为测试而设置的。我希望这有帮助。

var宽度=400
可变高度=400
功能砖（x、y、w、h、颜色）{
这个.x=x；
这个。y=y；
这个颜色=颜色；
这个.w=w；
这个，h=h；
这是0.hits=0；
}
Brick.prototype.draw=函数（）{
ctx.save（）；
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.w，this.h）；
ctx.fillStyle=“白色”；
ctx.fillText（this.hits，this.x+2，this.y+10）；
ctx.restore（）；
};
var砖=[
新砖（80、120、15、15，‘红色’），
新砖（220、90、15、15，“蓝色”），
新砖（340100 50 20“绿色”）
];
//球构造函数
var Player=function（）{
这个.x=395
这个。y=395
这个.xSpeed=5；
这个.ySpeed=0；
这是w=30；
这个h=5；
};
//根据球的速度更新球的位置
Player.prototype.move=函数（）{
this.x+=this.xSpeed；
this.y+=this.y速度；
如果（此.x<0）{
x=宽度；
}else if（this.x>宽度）{
这个.x=0；
}else if（此.y<0）{
y=高度；
}else if（this.y>高度）{
这个。y=0；
}
};
//在当前位置绘制球
Player.prototype.draw=函数（）{
ctx.fillRect（this.x，this.y，this.w，this.h）；
};
//根据线设置球的方向
Player.prototype.setDirection=函数（方向）{
如果（方向=“左”）{
this.xSpeed=-5；
这个.ySpeed=0；
}否则，如果（方向==“右”）{
这个.xSpeed=5；
这个.ySpeed=0；
}否则如果（方向==“停止”）{
this.xSpeed=0；
这个.ySpeed=0；
}
};
//创建球对象
var player=新玩家（）；
//将键代码转换为操作名称的对象
var键操作={
32:“停止”，
37:“左”，
38:“向上”，
39:“对”，
40：“向下”
};
//每次按键都将调用的keydown处理程序
$（“html”）.keydown（函数（事件）{
var direction=keyActions[event.keyCode]；
player.setDirection（方向）；
});
var Ball=函数（）{
这是x=100；
这个y=100；
this.xSpeed=-2
该速度为3；
这个半径=3；
};
变量圆=函数（x、y、半径、圆角圆）{
ctx.beginPath（）；
ctx.弧（x，y，半径，0，数学PI*2，假）
如果（填充圆）{
ctx.fill（）；
}否则{
ctx.stroke（）；
}
}
Ball.prototype.move=函数（）{
this.x+=this.xSpeed
this.y+=this.y速度
如果（（this.y+this.radius）>ctx.canvas.height）{
//从地板到天花板
这个。y=0；
}
};
Ball.prototype.draw=函数（）{
圆（此.x，此.y，此.radius，true）；
};
Ball.prototype.getBox=函数（）{
返回{
x：这个x-这个半径，
y:这个，y-这个，半径，
w:这个半径*2，
h:这是半径*2
};
};
Ball.prototype.checkCollision=函数（）
<canvas id="canvas" width= "400" height= "400"></canvas>

#canvas{border:1px solid black}

var width = 400
var height = 400

var drawRect = function (x, y) {
  ctx.fillRect(x, y, 30, 5)
};

// The Ball constructor
var Player = function () {
  this.x = 395
  this.y = 395
  this.xSpeed = 5;
  this.ySpeed = 0;
};

// Update the ball's position based on its speed
Player.prototype.move = function () {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0) {
    this.x = width;
  } else if (this.x > width) {
    this.x = 0;
  } else if (this.y < 0) {
    this.y = height;
  } else if (this.y > height) {
    this.y = 0;
  }
};

// Draw the ball at its current position
Player.prototype.draw = function () {
  drawRect(this.x, this.y);
};

// Set the ball's direction based on a string
Player.prototype.setDirection = function (direction) {
    if (direction === "left") {
     this.xSpeed = -5;
     this.ySpeed = 0;
  } else if (direction === "right") {
     this.xSpeed = 5;
     this.ySpeed = 0;
  } else if (direction === "stop") {
     this.xSpeed = 0;
     this.ySpeed = 0;
  }
};

// Create the ball object
var player = new Player();

// An object to convert keycodes into action names
var keyActions = {
  32: "stop",
  37: "left",
  38: "up",
  39: "right",
  40: "down"
};

// The keydown handler that will be called for every keypress
$("html").keydown(function (event) {
  var direction = keyActions[event.keyCode];
  player.setDirection(direction);
});



var Ball = function () {
    this.x = 100;
    this.y = 100;
    this.xSpeed = -2
    this.ySpeed = 3;
};
var circle = function (x, y, radius, fillCircle) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false)
    if (fillCircle) {
        ctx.fill();
    } else {
        ctx.stroke();
    }
}
Ball.prototype.move = function () {
    this.x += this.xSpeed
    this.y += this.ySpeed
};

Ball.prototype.draw = function () {
    circle(this.x, this.y, 3, true);
};

Ball.prototype.checkCollision = function () {
    if (this.x < 0 || this.x > 400) {
        this.xSpeed = -this.xSpeed
    }

    if (this.y < 0) {
        this.ySpeed = -this.ySpeed

    }
};

Ball.prototype.checkCollisionPlayer = function () {
    if (this.x === Player.x || this.y === player.y) {
     this.ySpeed = -this.ySpeed
     this.xSpeed = -this.xSpeed
    }
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
setInterval(function () {
    ctx.clearRect(0, 0, 400, 400);
    player.draw();
    player.move();
    ball.draw();
    ball.move();
    ball.checkCollision();
    ball.checkCollisionPlayer();
}, 40);
var ball = new Ball();