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

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

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

    1. import { ctx_one } from "./init";
    2. import { deltaTime } from "./game-loop";
    5. class Wave {
    6.   x: number[] = [];
    7.   y: number[] = [];
    8.   alive: boolean[] = [];
    9.   radius: number[] = []
    10.   type: boolean[] = [];
    11.   num = 20 // 定义10个 wave 等待使用
    13.  constructor() {
    14.    for (let i = this.num; i >= 0; i-- ) {
    15.      this.alive[i] = false
    16.      this.type[i] = false;
    17.      this.radius[i] = 0;
    18.    }
    19.  }
    21.  draw(){
    22.    for (let i = this.num; i >= 0; i--) {
    23.      if(this.alive[i]) { // 假如是的存活，开始绘制一个逐渐变大的 ○
    25.        if(this.radius[i] > 50) { // 假如半径大于 50 让它死亡
    26.          this. alive[i] = false
    27.          continue;
    28.        }
    30.        ctx_one.save()
    31.        ctx_one.shadowBlur = 5;
    32.        ctx_one.shadowColor = 'white';
    33.        ctx_one.lineWidth = 5;
    35.        if(this.type[i]) { // true 代表小鱼与大鱼碰撞
    36.          this.radius[i] += deltaTime * 0.04;
    37.          const alpha = 1 - (this.radius[i] / 80)
    38.          ctx_one.strokeStyle = `rgba(203,91,0,${alpha})`
    39.        }else{
    40.          this.radius[i] += deltaTime * 0.05;
    41.          const alpha = 1 - (this.radius[i] / 50)
    42.          ctx_one.strokeStyle = `rgba(255,255,255,${alpha})`
    43.        }
    45.        ctx_one.beginPath()
    46.        ctx_one.arc(this.x[i], this.y[i], this.radius[i], 0, 2 * Math.PI)
    47.        ctx_one.closePath()
    48.        ctx_one.stroke()
    49.        ctx_one.restore()
    50.      }
    51.    }
    52.  }
    54.  born(x: number,y: number, type = false){
    55.    for (let i = this.num; i >= 0; i--) {
    56.      // 找到第一个没有存活的，让他复活。
    57.      if (!this.alive[i]) {
    58.        this.alive[i] = true // 存活代表显示出来
    59.        this.radius[i] = 20;
    60.        this.x[i] = x;
    61.        this.y[i] = y;
    62.        this.type[i] = type // 设置类型为 true; 当为 true 的时候，代表鱼妈妈与鱼宝宝碰撞
    63.        return ;
    64.      }
    65.    }
    66.  }
    67. }
    69. export default Wave;

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

    1.     // 假如距离小于 900 就喂食给 baby，且必须要鱼妈妈吃到了果实才能喂给小鱼
    2.     if (distance < 900 && score.fruitNum != 0) {
    3.       fish_baby.recover();
    5.       // 把能力给小鱼，果实数清零，计算分数一次
    6.       score.reset()
    8.       // 把大鱼的 bodyindex 恢复成 0
    9.       fish_mother.BodyIndex = 0;
    11.       wave.born(fish_baby.x, fish_baby.y, true) // 出生一个波浪
    12.     }
    1.       // 假如距离小于 500 让果实死亡
    2.       if(distance < 500) {
    3.         fruits.dead(i)
    4.         score.fruitNum++; // 计分系统的果实数加一
    5.         if(fruits.fruitType[i] === FruitType.Blue) { // 假如吃到蓝色道具果实，开启双倍模式
    6.           score.doubleMode = 2;
    7.         }
    9.         // 把鱼儿吃掉果实的位置传过去，（传鱼的坐标或者果实坐标都可以）
    10.         wave.born(fruits.x[i], fruits.y[i])
    11.       }

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

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