二次贝塞尔需要三个点，开始点，控制点（控制杆顶部所在的点），结束点。

    我们通过改变结束点的位置来实现摇摆。

    加入 alpha 添加透明度，根据近实远虚原理构建空间感，加入 amp，摆动振幅。

    1. import { deltaTime } from "./game-loop";
    4. enum FruitType{
    5.   Blue = 1,
    6.   Orange
    7. }
    9. class Fruits{
    10.   num: number = 30; // 绘画果实的数量
    11.   alive: boolean[] =[];  // 判断果实是否存活
    12.   x : number[]= []; // 果实的 x 坐标数组
    13.   y : number[] = []; // 果实的 y 坐标数组
    14.   diameter : number[] = []; // 果实的直径数组
    15.   speed: number[] = []; // 控制果实成长速度、上浮速度的数组
    16.   fruitType: FruitType[] = []; // 控制果实类型的枚举数组
    17.   orange = new Image(); // 黄色果实
    18.   blue = new Image(); // 蓝色果实
    19.   aneNum: number[] = []; // 记录出生时候所在的海葵
    20.   constructor(){
    21.     for (let i = 0; i < this.num; ++i) {
    22.       this.aneNum[i] = 0; // 初始化
    23.       this.born(i);
    24.     }
    25.     this.orange.src = 'assets/img/fruit.png';
    26.     this.blue.src = 'assets/img/blue.png';
    27.   }
    29.   // 绘制果实
    30.   draw(){
    31.     for (let i = 0; i < this.num; ++i) {
    33.       // 只有属性为存活的时候才绘制
    34.       if(this.alive[i]){
    36.         if(this.diameter[i] <= 17) {
    37.           this.diameter[i] += this.speed[i] * deltaTime; // 随着时间半径不断变大 也就是果实长大
    38.           this.x[i] = anemones.headx[this.aneNum[i]]
    39.           this.y[i] = anemones.heady[this.aneNum[i]] // 得到海葵顶点的 x 和 y
    42.         }else{
    43.           this.y[i] -= this.speed[i] * deltaTime; // 果实成熟之后， y 坐标减小，果实开始上升
    44.         }
    46.         // 把果实绘制出来，为了让果实居中，所以要减去图片高度一半，宽度一半
    47.         // 就像实现水平居中一样 left: 50px; margin-left: -(图片宽度 / 2);
    48.         // 第一个参数 图片， 第二三个参数，坐标轴的 x 和 y，第四五个参数，图片的宽高
    49.         ctx_two.drawImage(img, this.x[i] - this.diameter[i] / 2, this.y[i] - this.diameter[i], this.diameter[i], this.diameter[i]);
    52.       }
    54.       if(this.y[i] <= -10) {
    55.         this.alive[i] = false; // 果实出去了之后 存活状态为 flase
    56.       }
    58.     }
    59.   }
    61.   // 初始化果实
    62.   born(i){
    63.     let aneId = Math.floor( Math.random() * anemones.num ) // 随机拿到一个果实的 ID
    64.     this.aneNum[i] = aneId
    65.     this.speed[i] = Math.random() * 0.04 + 0.007; // 设置速度在区间 0.003 - 0.03 里
    66.     this.alive[i] = true; // 先设置它的存活为 true
    67.     this.diameter[i] = 0; // 未生长出来的果实半径为0
    70.   }
    72.   // 监视果实
    73.   monitor() : void {
    74.     let num = 0;
    75.     for (let i = 0; i < this.num ; ++i) {
    76.       if(this.alive[i]) num++; // 计数存活果实的数量
    78.       if(num < 15) {
    79.         // 产生一个果实
    80.         this.reset()
    81.         return ;
    82.       }
    83.     }
    84.   }
    86.   //重置果实的状态
    87.   reset() {
    88.     for (let i = 0; i < this.num; ++i) {
    89.       if(!this.alive[i]) {
    90.         this.born(i); // 假如存活为 false ， 让它重新出生。
    91.         return ; // 每次只重置一个果实
    92.       }
    93.     }
    94.   }
    95.   // 果实死亡
    96.   dead(i){
    97.     this.alive[i] = false;
    98.   }
    99. }
    102. export default Fruits;
    103. export { FruitType };