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

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

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

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

如果思路不对请指正。。

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

数据结构算法游戏开发 canvas javascript

阅读 9.2k

5 个回答

✓ 已被采纳

我最近也在做这个游戏，遇见的最难的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 就是因为在检测到碰撞之后，直接反向速度，这样当运动较快时，就会发生“像素穿透”，也就是说，速度反向后，小球有可能仍与砖块有重叠的部分，这样速度还会再次反向，最终就造成了小球在砖块内不停运动的鬼畜效果。