在Pong游戏中通过桨的球

Question

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

如果球是在10px的每帧中移动，我不能只是测试如果球正在触摸桨，因为它是可能在该步骤中球已经超过桨。

有什么方法可以测试球是否与桨相撞？

编辑：只有2个解决方案，我能想到的此刻是：

或

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

每次你的球跳十个像素，你算算确保它不会穿过一个坚实的物体，就像你看到的那样。

Answer 3

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

简单的解决方案，而不是如果通过简单地添加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; 
    } 
} 

Answer 4

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

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

如果y小于桨叶的顶边（顶部y）或大于桨叶底部边缘（底部y），那么这是一个未命中。否则，这是一个打击。