碰撞判断

碰撞，指的是窗口中两张图片是否有交集。如果有交集，则认为两张图片发生碰撞。
image.png

碰撞判断原理

判断两张图片是否有交集不太好做，所以为了判断方便，
我们把每张图片都看做一个圆，这个圆，就是我们通常所说的假想圆。
有了假想圆，在判断碰撞时就容易多了，我们只需要判断两个假想圆是否有交集就可以了。
当A、B两张图片中心点距离小于A、B两个假想圆的半径之和时 ,就认为两张图片发生了碰撞。
想要获得AB两个中心点距离，那么必须要用上勾股定理了。
image.png

勾股定理：在直角三角形中，两条直角边的平方和，等于斜边的平方
虽然现在AB边的距离我们不知道，但BC边和AC边的距离我们是能求出来的
BC边的距离 = 子弹的x坐标 – 飞机的x坐标
AC边的距离 = 子弹的y坐标 – 飞机的y坐标
所以通过勾股定理，我们同样可以求出AB边的距离
AB AB = AC AC + BC * BC
image.png
image.png

碰撞判断
现在AB边的距离求出来了，那么接下来就是用AB边的距离与AB两假想圆半径之和做对比。
A图片假想圆半径：A图片宽高大约为80像素，那么假想圆的半径约为40像素
B图片假想圆半径：B图片宽高大约为40像素，那么假想圆的半径约为20像素
通过以上得出，碰撞条件为：AB边的距离 < 60，这时我们就认为发生碰撞

代码示例

  1. 碰撞判断    
  2.      function crash(){    
  3.         var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y);    
  4.         if(pos < 60 * 60) {    
  5.             enemy.y -= 5;    
  6.             bullet.y = 400;    
  7.         }    
  8.     }    
  9.     var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y)：    
  10.     通过勾股定理，求出enemy、bullet两张图片中心点距离的平方，并存储在pos变量中    
  11.     if(pos < 60 * 60) {    
  12.        enemy.y -= 5;    
  13.        bullet.y = 400;     
  14.    }    
  15.    因为enemy、bullet两张图片假想圆半径之和为60，而pos是两张图片中心点距离的平方，     
  16.    所以判断条件 pos < 60*60 成立时，我们就认为发生碰撞。