增加吃果实特效

特效就是在碰撞点画一个半径不断增大的园，当园的半径到一定值的是消失，这里我们可以通过半径与透明度成反比实现，即const alpha = 1 - (this.radius[i] / 80)。画圆通过 arc 函数实现。

创建 save.ts ，记得在 init 初始化和导出它。

这里的 type 字段是为了记录碰撞类型，默认与果实碰撞是 false，与小鱼碰撞是 true，根据不同的类型，使用不同的画笔样式

import { ctx_one } from "./init";
import { deltaTime } from "./game-loop";


class Wave {
  x: number[] = [];
  y: number[] = [];
  alive: boolean[] = [];
  radius: number[] = []
  type: boolean[] = [];
  num = 20 // 定义10个 wave 等待使用

 constructor() {
   for (let i = this.num; i >= 0; i-- ) {
     this.alive[i] = false
     this.type[i] = false;
     this.radius[i] = 0;
   }
 }

 draw(){
   for (let i = this.num; i >= 0; i--) {
     if(this.alive[i]) { // 假如是的存活，开始绘制一个逐渐变大的 ○

       if(this.radius[i] > 50) { // 假如半径大于 50 让它死亡
         this. alive[i] = false
         continue;
       }

       ctx_one.save()
       ctx_one.shadowBlur = 5;
       ctx_one.shadowColor = 'white';
       ctx_one.lineWidth = 5;

       if(this.type[i]) { // true 代表小鱼与大鱼碰撞
         this.radius[i] += deltaTime * 0.04;
         const alpha = 1 - (this.radius[i] / 80)
         ctx_one.strokeStyle = `rgba(203,91,0,${alpha})`
       }else{
         this.radius[i] += deltaTime * 0.05;
         const alpha = 1 - (this.radius[i] / 50)
         ctx_one.strokeStyle = `rgba(255,255,255,${alpha})`
       }

       ctx_one.beginPath()
       ctx_one.arc(this.x[i], this.y[i], this.radius[i], 0, 2 * Math.PI)
       ctx_one.closePath()
       ctx_one.stroke()
       ctx_one.restore()
     }
   }
 }

 born(x: number,y: number, type = false){
   for (let i = this.num; i >= 0; i--) {
     // 找到第一个没有存活的，让他复活。
     if (!this.alive[i]) {
       this.alive[i] = true // 存活代表显示出来
       this.radius[i] = 20;
       this.x[i] = x;
       this.y[i] = y;
       this.type[i] = type // 设置类型为 true; 当为 true 的时候，代表鱼妈妈与鱼宝宝碰撞
       return ;
     }
   }
 }
}

export default Wave;

之后在碰撞逻辑里面调用 born

    // 假如距离小于 900 就喂食给 baby，且必须要鱼妈妈吃到了果实才能喂给小鱼
    if (distance < 900 && score.fruitNum != 0) {
      fish_baby.recover();

      // 把能力给小鱼，果实数清零，计算分数一次
      score.reset()

      // 把大鱼的 bodyindex 恢复成 0
      fish_mother.BodyIndex = 0;

      wave.born(fish_baby.x, fish_baby.y, true) // 出生一个波浪
    }

      // 假如距离小于 500 让果实死亡
      if(distance < 500) {
        fruits.dead(i)
        score.fruitNum++; // 计分系统的果实数加一
        if(fruits.fruitType[i] === FruitType.Blue) { // 假如吃到蓝色道具果实，开启双倍模式
          score.doubleMode = 2;
        }

        // 把鱼儿吃掉果实的位置传过去，（传鱼的坐标或者果实坐标都可以）
        wave.born(fruits.x[i], fruits.y[i])
      }

最后别忘记在 gameLoop 里面调用 draw 函数。

  score.draw() // 绘制分数
  wave.draw()