打砖块游戏中 怎么判断小球与方块撞击后运动的方向呢？

Question

正在用JavaScript+Canvas实现一个打砖块游戏，碰撞算法参考的实现思路是https://www.zhihu.com/questio...

现在的问题是检测到小球与矩形方块碰撞后 怎么判断小球接下来的运动方向？
我认为这里有两种情况 第一种是从上下左右四个边撞击 然后让小球一个方向（比如x轴）上的速度值不变 让另一个方向（比如y轴）的速度取负数 这样小球就有一个反弹的效果了（类似于镜面反弹）
第二种情况我觉得应该是从四个角撞击 这个时候就应该把两个方向的速度都取负值 小球就会向运动来的方向“弹回去”

第一种情况很好实现，，关键是第二种情况该怎么判断呢？ 我不知道该用什么来判断小球是否是撞击的四个角

如果思路不对 请指正。。

/2017-8-10更新/
利用我在评论里发现的那种夹角的办法把判断边和角撞击实现了。。但是新的问题是 我是在移动小球位置之后才判断是否碰撞的 有的时候会出现小球的位置已经在砖块里面去了 才去判断撞击 这样就会形成死循环在小球在砖块内不停运动的鬼畜效果。。。然后我查到一个叫“分离轴定理”的算法，，貌似可以判断这个“最小平移量”
http://blog.mn886.net/chenjia...
http://web.jobbole.com/90472/
但是这两个链接里的代码看不太懂。。有大神能简单用js写写利用分离轴定理来实现矩形与圆碰撞的算法么。。包括碰撞以后反弹的效果（也就是沿着最小平移量的反方向）

Answer 1

我最近也在做这个游戏，遇见的最难的bug也就是：小球在砖块内不停运动的鬼畜效果，这个问题其实和用到算法没有关系。后来我在一个开源的打砖块游戏的源码里找到了解决办法，这里简单叙述下：小球和砖块碰撞之后，速度是要取反的，所以没碰撞之前，小球中心和砖块中心的距离，一定是大于下一次小球中心和砖块中心的距离的，而下一次小球的中心坐标是通过当前坐标 + 速度计算出来的。文字描述不太容易理解，看代码：

if(collision) { // 检测到碰撞
  var ballCenter = ball.y + ball.height / 2;    // 小球的中心的垂直坐标
  var brickCenter = brick.y + brick.height / 2; // 砖块的中心的垂直坐标
 
  // 小球向着砖块运动，速度取反
  if ((ballCenter - brickCenter ) > (ballCenter + speedY - brickCenter )) {
    ball.speedY *= -1;
  } else { // 小球背着砖块运动，这时候仍有可能检测到小球和砖块碰撞，
           // 如果仍取反速度，就会出现小球卡进砖块的鬼畜bug
    ball.speedY *= 1;
  }
}

总的来说就是，检测到碰撞之后，再检测小球的运动趋势是远离砖块还是靠近砖块，如果是靠近就反向速度，如果是远离，速度方向就不变。

原来小球会进入砖块的 bug 就是因为在检测到碰撞之后，直接反向速度，这样当运动较快时，就会发生“像素穿透”，也就是说，速度反向后，小球有可能仍与砖块有重叠的部分，这样速度还会再次反向，最终就造成了小球在砖块内不停运动的鬼畜效果。

Answer 2

碰撞时 |h| + |r| == |v| 不就是碰到角了

Answer 3

得到最短距离矢量后可以进一步得到 "碰撞点"，即 矢量p - 矢量u 得到的点。在角上碰撞的时候，这个碰撞点也应该在矩形的角上。

另外 "小球就会向运动来的方向弹回去" 这个和生活经验是不一致的，可以试试朝桌脚滚一个球看看。你可能需要再想一下球的受力和运动情况。

Answer 4

给你的砖块加一个AABB包围，实际在游戏开发中，不会真正按照物理定律来实现。简单的办法，你可以给你的砖块加一个圆形，或是矩形的检测范围，其半径大于你真正的砖块，这样就不会出现小球欠入砖块了。

这种小游戏，是否遵循物理是其次的，快速开发，效果好才是第一的。

Answer 5

建议先玩玩星际弹球游戏。