Javascript 乒乓球比赛中通过球拍的球

我正在使用HTML5画布和JavaScript制作另一个Pong克隆。我遇到的问题可以在下图中最好地描述：

如果球以每帧10px的速度移动，我不能仅仅测试球是否接触到球拍，因为球有可能在该帧步中超过了球拍

有没有办法测试球是否与划桨相撞

编辑：目前我能想到的唯一两种解决方案是：

或

---

每当你的球跳跃10个像素时，你必须计算其间的每个位置，以确保它不会像你看到的那样试图通过一个固体物体。

复杂的解决方案，向量的东西

简单的解决方案，如果只需添加10px移动球，则将其移动1px 10次，并检查每次是否发生碰撞：

for(var i = 0; i < 10; i++) {
   moveBallByOne();
   if (ballCollision()) { // you could check for a simple bounding box overlap here
       invertBallDirection();
       break;
   }
}

for（变量i=0；i<10；i++）{
移动一个球（）；
如果（ballCollision（））{//您可以在此处检查简单的边界框重叠
反转方向（）；
打破
}
}

您可以通过确定拨杆定义的线与增量运输线是否相交来检测碰撞。如果有，则可以在交点应用反弹逻辑

希望有帮助

鲍勃

请看这里：

请记住，几何体更简单，因为有一条垂直线作为桨。以下是简化（请检查我的数学）：

---

我相信这是最有效的方法，会提供准确的答案。如果没有足够的分辨率，沿对角线在像素矩阵中移动将导致伪影。

我假设你有一个

dx

和

dy

，这是每次移动球坐标的增量，或者一个角度（比如θ=θ），因此在这种情况下dx是10*cos（th），dy是10*sin（th）

---

你只需要看看x+dx是否超过了桨的x坐标，比如说600，如果是的话，为了简单起见，假设需要2/3的dx才能到达那里，所以你可以使用y+dy*（2/3）来找出当球到达桨的x坐标时球将到达的y

---

如果该y小于桨的上边缘（上y），或大于桨的下边缘（下y），则为未命中。否则，它就是成功的。

+1这是解决方案的精髓-他需要跟踪最后显示的帧和当前帧之间的任何更改。我同意，但在没有看到他的任何代码的情况下，我只能建议这样做。同样，这不是最有效的。他的应用程序是一个具有两行和一个圆圈的画布，在现代浏览器上运行。我会突然想到一个更简单的方法来解决这个问题，而不是“高效”的解决方案。这是低效的。最好是直接计算碰撞点。呃，这完全取决于，调用一些数学函数时加入一些向量的东西可能和进行少量比较一样慢。我可能会使用这个解决方案，但只有当球距离球拍10像素以内时，才能看到球拍的x位置是恒定的。Hrm，我必须用谷歌搜索一下如何在JavaScript中实现这一点。如果必须应用这一点，可以通过查看y1和y2值来进一步缩小范围。如果它们没有穿过桨的y值，跳过计算。非常感谢Bob！我将使用您提出的解决方案以及最后一条评论来提高效率。“假设需要2/3的dx才能到达那里”——这是很难解决的问题。

// line 1 (x1,y1) to (x2,y2)
var x1 = -1.0;
var y1 = 1.0;
var x2 = 1.0;
var y2 = -1.0;
// line 2 (x3,y3) to (x4,y4)
// note: this is the paddle and y3=y4
var x3 = -1.0;
var y3 = 0.5;
var x4 = 1.0;
var y4 = 0.5;

​var ix, iy;
function calculateIntersection(){
  var ixtop = x1*(y2-y3) + x2*(y3-y1);
  var ixbot = y2 - y1;
  var ix = ixtop/ixbot;

  var iy = y3;
}​