这里的素材更新了一下 点击下载。

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

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

    当然这里我们需要一个定时器，和具体显示哪一张的索引，因为定时器需要时间，所以这里需要从 game-loop 拿到 deltaTime 变量。

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

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

    小鱼在没有得到喂食的时候，身体会慢慢变透明。大鱼本身是透明的，当吃了果实之后就会变得有颜色。

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

    1. import { ctx_one, cvs_height, cvs_width, mouse_x, mouse_y, fish_mother } from "./init";
    2. import { deltaTime } from "./game-loop";
    4. import utils from "./utils";
    7. // 鱼妈妈
    8. class FishMother{
    9.   x: number = cvs_width / 2; // 坐标轴 x
    10.   y: number = cvs_height / 2 ; // 坐标轴 y
    11.   bigEye : Array<HTMLImageElement> = []; // 眼睛
    12.   bigBody : Array<HTMLImageElement> = []; // 身体
    13.   BigTail : Array<HTMLImageElement> = []; // 尾巴
    14.   angle: number = 0; // 鱼的角度
    15.   EyeIndex = 0; // 需要渲染哪个眼睛的索引值
    16.   BodyIndex = 0;
    17.   TailIndex = 0;
    18.   EyeTimer = 0; // 计算眼睛时间
    19.   BodyTimer = 0;
    20.   TailTimer = 0;
    21.   EyeInterval = 300; // 通过这个变量动态的设置眨眼睛的间隔
    22.   BodyInterval = 300;
    23.   TailInterval = 50;
    24.   constructor(){
    26.     for (let i = 0; i < 2; ++i) {
    27.       this.bigEye[i] = new Image();
    28.       this.bigEye[i].src = `assets/img/bigEye${i}.png`;
    29.     }
    30.     for (let i = 0; i < 8; ++i) {
    31.       this.bigBody[i] = new Image();
    32.       this.bigBody[i].src = `assets/img/bigSwim${i}.png`;
    33.     }
    35.     for (let i = 0; i < 8; ++i) {
    36.       this.BigTail[i] = new Image();
    37.       this.BigTail[i].src = `assets/img/bigTail${i}.png`;
    38.     }
    39.   }
    41.   checkImageIndex(){
    42.     this.EyeTimer += deltaTime;
    43.     this.TailTimer += deltaTime;
    44.     this.BodyTimer += deltaTime;
    46.     // 当计时器大于某个值的时候才进行修改
    47.     if(this.EyeTimer > this.EyeInterval) {
    48.       this.EyeIndex = (this.EyeIndex + 1) % 2;
    50.       // 重置一下定时器
    51.       this.EyeTimer %= this.EyeInterval;
    53.       // 判断是眨眼的哪个过程
    54.       if(this.EyeIndex === 0) {
    55.         this.EyeInterval = Math.random() * 1500 + 2000 // 设置下一次眨眼的间隔长一点
    56.       }else{
    57.         // 先闭眼后睁眼，这个过程应该非常短
    58.         this.EyeInterval = 300;
    59.       }
    60.     }
    62.     if(this.TailTimer > this.TailInterval) {
    63.       this.TailIndex = (this.TailIndex + 1) % 8;
    64.       this.TailTimer %= this.TailInterval
    66.     }
    68.     if(this.BodyTimer > this.BodyInterval) {
    69.       this.BodyIndex = this.BodyIndex + 1;
    70.       this.BodyTimer %= this.BodyInterval
    71.       if(this.BodyIndex > 7) {
    72.         this.BodyIndex = 7
    73.       }
    74.     }
    75.   }
    77.   checkMove(){
    78.     this.x = utils.lerpDistance(mouse_x, this.x , .95)
    79.     this.y = utils.lerpDistance(mouse_y, this.y , .95)
    82.     let instance_X = mouse_x - this.x; // 边 a
    83.     let instance_Y = mouse_y - this.y; // 边 b
    85.     let ag = Math.atan2(instance_Y, instance_X) + Math.PI // [-PI, PI]
    87.     this.angle = utils.lerpAngle(ag, this.angle, .9)
    88.   }
    90.   draw(){
    92.     this.checkMove()
    93.     this.checkImageIndex()
    95.     ctx_one.save();
    96.     ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    97.     ctx_one.rotate(this.angle);
    98.     ctx_one.scale(.8, .8);
    99.     ctx_one.drawImage(this.BigTail[this.TailIndex], -this.BigTail[this.TailIndex].width / 2 + 30, -this.BigTail[this.TailIndex].height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    100.     ctx_one.drawImage(this.bigBody[this.BodyIndex], -this.bigBody[this.BodyIndex].width / 2, -this.bigBody[this.BodyIndex].height / 2);
    101.     ctx_one.drawImage(this.bigEye[this.EyeIndex], -this.bigEye[this.EyeIndex].width / 2, -this.bigEye[this.EyeIndex].height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    103.     ctx_one.restore();
    105.   }
    106. }
    108. // 鱼宝宝
    109. class FishBaby extends FishMother {
    110.   x: number = cvs_width / 2 + 50; // 坐标轴 x
    111.   y: number = cvs_height / 2 + 50; // 坐标轴 y
    112.   constructor() {
    113.     super()
    115.     for (let i = 0; i < 2; ++i) {
    116.       this.bigEye[i] = new Image();
    117.       this.bigEye[i].src = `assets/img/babyEye${i}.png`;
    118.     }
    119.     for (let i = 0; i < 20; ++i) {
    120.       this.bigBody[i] = new Image();
    121.       this.bigBody[i].src = `assets/img/babyFade${i}.png`;
    122.     }
    124.     for (let i = 0; i < 8; ++i) {
    125.       this.BigTail[i] = new Image();
    126.       this.BigTail[i].src = `assets/img/babyTail${i}.png`;
    127.     }
    128.   }
    131.   checkImageIndex(){
    132.     this.EyeTimer += deltaTime;
    133.     this.TailTimer += deltaTime;
    134.     this.BodyTimer += deltaTime;
    136.     // 当计时器大于某个值的时候才进行修改
    137.     if(this.EyeTimer > this.EyeInterval) {
    138.       this.EyeIndex = (this.EyeIndex + 1) % 2;
    140.       // 重置一下定时器
    141.       this.EyeTimer %= this.EyeInterval;
    143.       // 判断是眨眼的哪个过程
    144.       if(this.EyeIndex === 0) {
    145.         this.EyeInterval = Math.random() * 1500 + 2000 // 设置下一次眨眼的间隔长一点
    146.       }else{
    147.         // 先闭眼后睁眼，这个过程应该非常短
    148.         this.EyeInterval = 300;
    149.       }
    150.     }
    152.     if(this.TailTimer > this.TailInterval) {
    153.       this.TailIndex = (this.TailIndex + 1) % 8;
    154.       this.TailTimer %= this.TailInterval
    156.     }
    158.     if(this.BodyTimer > this.BodyInterval) {
    159.       this.BodyIndex = this.BodyIndex + 1;
    160.       this.BodyTimer %= this.BodyInterval
    161.       if(this.BodyIndex > 19) {
    162.         this.BodyIndex = 19
    163.         console.log('game over');
    164.       }
    165.     }
    166.   }
    168.   // 重置身体的图片，也就是得到能量满血复活
    169.   recover(){
    170.     this.BodyIndex = 0;
    171.   }
    173.   checkMove(){
    174.     this.x = utils.lerpDistance(fish_mother.x, this.x , .98)
    175.     this.y = utils.lerpDistance(fish_mother.y, this.y , .98)
    177.     let instance_X = fish_mother.x - this.x; // 边 a
    178.     let instance_Y = fish_mother.y - this.y; // 边 b
    180.     let ag = Math.atan2(instance_Y, instance_X) + Math.PI // [-PI, PI]
    182.     this.angle = utils.lerpAngle(ag, this.angle, .7)
    183.   }
    185.   draw(){
    186.     this.checkMove()
    187.     this.checkImageIndex()
    189.     ctx_one.save();
    190.     ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    191.     ctx_one.rotate(this.angle);
    192.     ctx_one.scale(.8, .8);
    193.     ctx_one.drawImage(this.BigTail[this.TailIndex], -this.BigTail[this.TailIndex].width / 2 + 24, -this.BigTail[this.TailIndex].height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    194.     ctx_one.drawImage(this.bigBody[this.BodyIndex], -this.bigBody[this.BodyIndex].width / 2, -this.bigBody[this.BodyIndex].height / 2);
    195.     ctx_one.drawImage(this.bigEye[this.EyeIndex], -this.bigEye[this.EyeIndex].width / 2, -this.bigEye[this.EyeIndex].height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    196.     ctx_one.restore();
    197.   }
    198. }
    200. export {
    201.   FishMother,
    202.   FishBaby
    203. }

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

    1. import { bgPic, cvs_width , cvs_height, ctx_two, ctx_one, anemones, fruits, fish_mother, fish_baby } from "./init";
    2. import utils from "./utils";
    5. let lastTime: number = Date.now(), // 记录上一次绘制的时间
    6.     deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界
    8. /**
    9.  * 鱼妈妈与果实的碰撞检测
    10.  */
    11. function fishAndFruitsCollision() {
    12.   for (let i = fruits.num; i >= 0; i--) {
    13.     // 假如或者就计算鱼儿与果实的距离
    14.     if(fruits.alive[i]) {
    15.       // 得到距离的平方根
    16.       const distance = utils.getDistance(
    17.         {x: fruits.x[i], y: fruits.y[i]},
    18.         {x: fish_mother.x, y: fish_mother.y}
    19.       );
    21.       // 假如距离小于 500 让它死亡
    22.       if(distance < 500) {
    23.         fruits.dead(i)
    24.       }
    25.     }
    26.   }
    27. }
    29. /**
    30.  * 鱼妈妈与鱼宝宝的碰撞检测
    31.  */
    32. function fishMotherAndBabyCollision() {
    34.     // 得到距离的平方根
    35.     const distance = utils.getDistance(
    36.       {x: fish_baby.x, y: fish_baby.y},
    37.       {x: fish_mother.x, y: fish_mother.y}
    38.     );
    40.     // 假如距离小于 900 就喂食给 baby
    41.     if(distance < 900) {
    42.       fish_baby.recover();
    43.     }
    45. }
    47. function gameLoop() {
    48.   const now = Date.now()
    49.   deltaTime = now - lastTime;
    50.   lastTime = now;
    52.   //  给 deltaTime 设置上线
    53.   if(deltaTime > 40) deltaTime = 40;
    55.   // console.log(deltaTime);
    57.   drawBackbround()  // 画背景图片
    59.   anemones.draw()  // 海葵绘制
    60.   fruits.draw()  // 果实绘制
    61.   fruits.monitor() // 监视果实，让死去的果实得到新生
    63.   ctx_one.clearRect(0, 0, cvs_width, cvs_width); // 清除掉所有，再进行绘制，要不然的话会多次绘制而进行重叠。
    64.   fish_mother.draw() // 绘制鱼妈妈
    65.   fish_baby.draw() // 绘制鱼宝宝
    66.   fishAndFruitsCollision() // 每一帧都进行碰撞检测
    67.   fishMotherAndBabyCollision()
    68.   requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
    69. }
    72. function drawBackbround() {
    73.   ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
    74. }
    76. export { deltaTime }
    78. export default gameLoop;