实现碰撞检测的原理就是每一帧都检测果实和鱼的距离，当距离小于一定值的时候就让果实死亡。

    计算坐标轴上面俩个点的距离，大家应该记得，利用了勾三股四原理，不记得百度一下就会立即想起了。

    首先我们准备一个计算距离的函数，把它放在 utils.ts 文件里面

    1. interface Pointer{
    2.   x: number,
    3.   y: number
    4. }
    6. /**
    7.  * 计算俩个点的距离
    8.  * @param {Pointer} p1 坐标点
    9.  * @param {Pointer} p2 坐标点
    10.  * @returns 距离的平方根
    11.  */
    12. function getDistance(p1: Pointer, p2: Pointer) {
    13.   return Math.pow((p1.x - p2.x) , 2) + Math.pow((p1.y - p2.y), 2)
    14. }

    别忘记导出这个函数

    所有需要实时监测的、动画相关的，我们都需要写到循环里面去，在 game-loop.ts 文件里面准备我们的碰撞检测函数。

    1. /**
    2.  * 鱼妈妈与果实的碰撞检测
    3.  */
    4. function fishAndFruitsCollision() {
    5.   for (let i = fruits.num; i >= 0; i--) {
    6.     // 假如或者就计算鱼儿与果实的距离
    7.     if(fruits.alive[i]) {
    8.       // 得到距离的平方根
    9.       const distance = utils.getDistance(
    10.         {x: fruits.x[i], y: fruits.y[i]}, 
    11.         {x: fish_mother.x, y: fish_mother.y}
    12.       );
    14.       // 假如距离小于 700 让它死亡
    15.       if(distance < 700) {
    16.         fruits.dead(i)
    17.       }
    18.     }
    19.   }
    20. }

    碰撞之后要死亡，尽管我们可以直接在函数里面改，但是为了封装性，我们还是在 fruits.ts 里面增加一个 dead 函数

    1.   // 果实死亡
    2.   dead(i){
    3.     this.alive[i] = false;
    4.   }

    并在 game-loop 的循环里面添加这个函数

    1. function gameLoop() {
    2.   const now = Date.now()
    3.   deltaTime = now - lastTime;
    4.   lastTime = now;
    6.   drawBackbround()  // 画背景图片
    8.   anemones.draw()  // 海葵绘制
    9.   fruits.draw()  // 果实绘制
    10.   fruits.monitor() // 监视果实，让死去的果实得到新生
    12.   ctx_one.clearRect(0, 0, cvs_width, cvs_width); // 清除掉所有，再进行绘制，要不然的话会多次绘制而进行重叠。
    13.   fish_mother.draw() // 绘制鱼妈妈
    14.   fishAndFruitsCollision() // 每一帧都进行碰撞检测
    15.   requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
    16. }

    此时我们的与应该可以吃果实了。

    此时我们再优化一下细节，在 game-loop 给 deltaTime 设置一个上线值，避免切换到其他 tag 的时候，暂停渲染，导致俩次渲染的间隔很大，导致果子巨大失真。

    1. function gameLoop() {
    2.   const now = Date.now()
    3.   deltaTime = now - lastTime;
    4.   lastTime = now;
    6.   if(deltaTime > 40) deltaTime = 40;
    8.   // console.log(deltaTime);
    10.   drawBackbround()  // 画背景图片
    12.   anemones.draw()  // 海葵绘制
    13.   fruits.draw()  // 果实绘制
    14.   fruits.monitor() // 监视果实，让死去的果实得到新生
    16.   ctx_one.clearRect(0, 0, cvs_width, cvs_width); // 清除掉所有，再进行绘制，要不然的话会多次绘制而进行重叠。
    17.   fish_mother.draw() // 绘制鱼妈妈
    18.   fishAndFruitsCollision() // 每一帧都进行碰撞检测
    19.   requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
    20. }

    同时我们此时测试的时候，现在的鱼儿动起来仿佛搭载了核能发动机一样，跑的飞快，且还能横向移动，减小一下我们的趋向百分率来避免这个问题。同时增加鱼妈妈的体型。

    所以我们需要修改下 fish-mother.ts

    1.     this.x = utils.lerpDistance(mouse_x, this.x , .95)
    2.     this.y = utils.lerpDistance(mouse_y, this.y , .95)
    3.     // ....
    4.     ctx_one.scale(.8, .8);