球在Pong比赛中穿过桨

Question

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

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

有没有办法测试球是否与球拍相撞？

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

或

Answer 1

您可以通过确定由桨和增量传输线定义的线是否相交来检测碰撞。如果是这样，那么您可以在交叉点应用反弹逻辑。

希望有所帮助。

鲍勃

看看这里：

http://mathcentral.uregina.ca/QQ/database/QQ.09.97/parsons1.html

请记住，几何体更简单，因为您有一条垂直线作为球拍。这是简化（在这里查看我的数学）：

// 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;
}​

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

Answer 2

复杂的解决方案，矢量东西。

简单的解决方案，相反，如果通过简单地添加10px移动球，将其移动1次10次并每次检查它是否发生碰撞：

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

Answer 3

每当你的球跳十个像素时，你必须计算它们之间的每个位置，以确保它没有试图穿过一个固体物体，正如你所看到的那样。

Answer 4

我假设你有一个dx和dy，它是每个运动的球坐标的增量，或一个角度（比如θ= theta），所以在这种情况下dx是10 * cos （th）和dy是10 * sin（th）。

你只需要看看，x + dx是否超过了桨的x坐标，比如600，如果是这样，为简单起见，说它需要2/3的dx到达那里，所以你可以使用y + dy *（2/3）找出当球到达球拍的x坐标时球将结束的y。

如果y小于桨的顶部边缘（顶部y），或者大于桨底部边缘（底部y），那么它就是未命中。否则，它很受欢迎。