动画的原理非常简单，就是在一定的间隔里面切换下一章图片而已。

只要我们把鱼的身体部位的图片序列放到一个数组里面，我们通过一些变量控制它循环起来就是成了动画。

为了避免一些代码重复我们写了 checkImageIndex 用来检测，具体渲染序列里面的哪张图片 和 checkMove 移动函数，其实还有不少需要优化的，暂时咱先这样。

游戏逻辑就是，大鱼吃果实，吃了果实就有能量，然后喂给小鱼，当一定时间里面，小鱼没有得到能量就会游戏失败。

修改我们的 fish.ts，取余的作用是为了让它一直在某个区间里面。

然后我们再添加一下小鱼与大鱼碰撞的逻辑，在我们的 game-loop.ts 里面

import utils from "./utils";
let lastTime: number = Date.now(), // 记录上一次绘制的时间
    deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界
/**
 * 鱼妈妈与果实的碰撞检测
 */
function fishAndFruitsCollision() {
  for (let i = fruits.num; i >= 0; i--) {
    // 假如或者就计算鱼儿与果实的距离
    if(fruits.alive[i]) {
      // 得到距离的平方根
      const distance = utils.getDistance(
        {x: fruits.x[i], y: fruits.y[i]},
        {x: fish_mother.x, y: fish_mother.y}
      );
      // 假如距离小于 500 让它死亡
      if(distance < 500) {
        fruits.dead(i)
      }
    }
  }
/**
 * 鱼妈妈与鱼宝宝的碰撞检测
 */
function fishMotherAndBabyCollision() {
    // 得到距离的平方根
    const distance = utils.getDistance(
      {x: fish_baby.x, y: fish_baby.y},
      {x: fish_mother.x, y: fish_mother.y}
    );
    // 假如距离小于 900 就喂食给 baby
    if(distance < 900) {
      fish_baby.recover();
    }
}
function gameLoop() {
  const now = Date.now()
  deltaTime = now - lastTime;
  lastTime = now;
  //  给 deltaTime 设置上线
  // console.log(deltaTime);
  drawBackbround()  // 画背景图片
  anemones.draw()  // 海葵绘制
  fruits.draw()  // 果实绘制
  fruits.monitor() // 监视果实，让死去的果实得到新生
  ctx_one.clearRect(0, 0, cvs_width, cvs_width); // 清除掉所有，再进行绘制，要不然的话会多次绘制而进行重叠。
  fish_mother.draw() // 绘制鱼妈妈
  fish_baby.draw() // 绘制鱼宝宝
  fishAndFruitsCollision() // 每一帧都进行碰撞检测
  fishMotherAndBabyCollision()
  requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
}
function drawBackbround() {
  ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
}
export { deltaTime }
export default gameLoop;