给蓝色的大鱼身体加点反馈，当吃了蓝色果实，启动双倍模式的时候，大鱼的身体变成蓝色。

    这里新建一个私有的存放蓝色身体的序列数组，私有变量不会被继承。

    1. private _pBigBody: Array<HTMLImageElement> = []; // 只属于鱼妈妈的特殊颜色身体
    1. import { ctx_one, cvs_height, cvs_width, mouse_x, mouse_y, fish_mother, score } 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.   private _pBigBody: Array<HTMLImageElement> = []; // 只属于鱼妈妈的特殊颜色身体
    14.   BigTail : Array<HTMLImageElement> = []; // 尾巴
    15.   angle: number = 0; // 鱼的角度
    16.   EyeIndex = 0; // 需要渲染哪个眼睛的索引值
    17.   BodyIndex = 0;
    18.   TailIndex = 0;
    19.   EyeTimer = 0; // 计算眼睛时间
    20.   BodyTimer = 0;
    21.   TailTimer = 0;
    22.   EyeInterval = 300; // 通过这个变量动态的设置眨眼睛的间隔
    23.   BodyInterval = 300;
    24.   TailInterval = 50;
    25.   constructor(){
    27.     for (let i = 0; i < 2; ++i) {
    28.       this.bigEye[i] = new Image();
    29.       this.bigEye[i].src = `assets/img/bigEye${i}.png`;
    30.     }
    31.     for (let i = 0; i < 8; ++i) {
    32.       this._pBigBody[i] = new Image();
    33.       this._pBigBody[i].src = `assets/img/bigSwimBlue${i}.png`;
    34.     }
    36.     for (let i = 0; i < 8; ++i) {
    37.       this.bigBody[i] = new Image();
    38.       this.bigBody[i].src = `assets/img/bigSwim${i}.png`;
    39.     }
    41.     for (let i = 0; i < 8; ++i) {
    42.       this.BigTail[i] = new Image();
    43.       this.BigTail[i].src = `assets/img/bigTail${i}.png`;
    44.     }
    45.   }
    47.   checkImageIndex(){
    48.     this.EyeTimer += deltaTime;
    49.     this.TailTimer += deltaTime;
    50.     this.BodyTimer += deltaTime;
    52.     // 当计时器大于某个值的时候才进行修改
    53.     if(this.EyeTimer > this.EyeInterval) {
    54.       this.EyeIndex = (this.EyeIndex + 1) % 2;
    56.       // 重置一下定时器
    57.       this.EyeTimer %= this.EyeInterval;
    59.       // 判断是眨眼的哪个过程
    60.       if(this.EyeIndex === 0) {
    61.         this.EyeInterval = Math.random() * 1500 + 2000 // 设置下一次眨眼的间隔长一点
    62.       }else{
    63.         // 先闭眼后睁眼，这个过程应该非常短
    64.         this.EyeInterval = 300;
    65.       }
    66.     }
    68.     if(this.TailTimer > this.TailInterval) {
    69.       this.TailIndex = (this.TailIndex + 1) % 8;
    70.       this.TailTimer %= this.TailInterval
    72.     }
    74.     if(this.BodyTimer > this.BodyInterval) {
    75.       this.BodyIndex = this.BodyIndex + 1;
    76.       this.BodyTimer %= this.BodyInterval
    77.       if(this.BodyIndex > 7) {
    78.         this.BodyIndex = 7
    79.       }
    80.     }
    81.   }
    83.   checkMove(){
    84.     this.x = utils.lerpDistance(mouse_x, this.x , .95)
    85.     this.y = utils.lerpDistance(mouse_y, this.y , .95)
    88.     let instance_X = mouse_x - this.x; // 边 a
    89.     let instance_Y = mouse_y - this.y; // 边 b
    91.     let ag = Math.atan2(instance_Y, instance_X) + Math.PI // [-PI, PI]
    93.     this.angle = utils.lerpAngle(ag, this.angle, .9)
    94.   }
    96.   draw(){
    98.     this.checkMove()
    99.     this.checkImageIndex()
    101.     ctx_one.save();
    102.     ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    103.     ctx_one.rotate(this.angle);
    104.     ctx_one.scale(.8, .8);
    105.     ctx_one.drawImage(this.BigTail[this.TailIndex], -this.BigTail[this.TailIndex].width / 2 + 30, -this.BigTail[this.TailIndex].height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    107.     if(score.doubleMode === 2) {
    108.       ctx_one.drawImage(this._pBigBody[this.BodyIndex], -this._pBigBody[this.BodyIndex].width / 2, -this._pBigBody[this.BodyIndex].height / 2);
    110.     }else{
    111.       ctx_one.drawImage(this.bigBody[this.BodyIndex], -this.bigBody[this.BodyIndex].width / 2, -this.bigBody[this.BodyIndex].height / 2);
    112.     }
    114.     ctx_one.drawImage(this.bigEye[this.EyeIndex], -this.bigEye[this.EyeIndex].width / 2, -this.bigEye[this.EyeIndex].height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    116.     ctx_one.restore();
    118.   }
    119. }
    121. // 鱼宝宝
    122. class FishBaby extends FishMother {
    123.   x: number = cvs_width / 2 + 50; // 坐标轴 x
    124.   y: number = cvs_height / 2 + 50; // 坐标轴 y
    125.   constructor() {
    126.     super()
    128.     for (let i = 0; i < 2; ++i) {
    129.       this.bigEye[i] = new Image();
    130.       this.bigEye[i].src = `assets/img/babyEye${i}.png`;
    131.     }
    132.     for (let i = 0; i < 20; ++i) {
    133.       this.bigBody[i] = new Image();
    134.       this.bigBody[i].src = `assets/img/babyFade${i}.png`;
    135.     }
    137.     for (let i = 0; i < 8; ++i) {
    138.       this.BigTail[i] = new Image();
    139.       this.BigTail[i].src = `assets/img/babyTail${i}.png`;
    140.     }
    141.   }
    144.   checkImageIndex(){
    145.     this.EyeTimer += deltaTime;
    146.     this.TailTimer += deltaTime;
    147.     this.BodyTimer += deltaTime;
    149.     // 当计时器大于某个值的时候才进行修改
    150.     if(this.EyeTimer > this.EyeInterval) {
    151.       this.EyeIndex = (this.EyeIndex + 1) % 2;
    153.       // 重置一下定时器
    154.       this.EyeTimer %= this.EyeInterval;
    156.       // 判断是眨眼的哪个过程
    157.       if(this.EyeIndex === 0) {
    158.         this.EyeInterval = Math.random() * 1500 + 2000 // 设置下一次眨眼的间隔长一点
    159.       }else{
    160.         // 先闭眼后睁眼，这个过程应该非常短
    161.         this.EyeInterval = 300;
    162.       }
    163.     }
    165.     if(this.TailTimer > this.TailInterval) {
    166.       this.TailIndex = (this.TailIndex + 1) % 8;
    167.       this.TailTimer %= this.TailInterval
    169.     }
    171.     if(this.BodyTimer > this.BodyInterval) {
    172.       this.BodyIndex = this.BodyIndex + 1;
    173.       this.BodyTimer %= this.BodyInterval
    174.       if(this.BodyIndex > 19) {
    175.         this.BodyIndex = 19
    176.         console.log('game over');
    177.       }
    178.     }
    179.   }
    181.   // 重置身体的图片，也就是得到能量满血复活
    182.   recover(){
    183.     this.BodyIndex = 0;
    184.   }
    186.   checkMove(){
    187.     this.x = utils.lerpDistance(fish_mother.x, this.x , .98)
    188.     this.y = utils.lerpDistance(fish_mother.y, this.y , .98)
    190.     let instance_X = fish_mother.x - this.x; // 边 a
    191.     let instance_Y = fish_mother.y - this.y; // 边 b
    193.     let ag = Math.atan2(instance_Y, instance_X) + Math.PI // [-PI, PI]
    195.     this.angle = utils.lerpAngle(ag, this.angle, .7)
    196.   }
    198.   draw(){
    199.     this.checkMove()
    200.     this.checkImageIndex()
    202.     ctx_one.save();
    203.     ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    204.     ctx_one.rotate(this.angle);
    205.     ctx_one.scale(.8, .8);
    206.     ctx_one.drawImage(this.BigTail[this.TailIndex], -this.BigTail[this.TailIndex].width / 2 + 24, -this.BigTail[this.TailIndex].height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    207.     ctx_one.drawImage(this.bigBody[this.BodyIndex], -this.bigBody[this.BodyIndex].width / 2, -this.bigBody[this.BodyIndex].height / 2);
    208.     ctx_one.drawImage(this.bigEye[this.EyeIndex], -this.bigEye[this.EyeIndex].width / 2, -this.bigEye[this.EyeIndex].height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    209.     ctx_one.restore();
    210.   }
    211. }
    213. export {
    214.   FishMother,
    215.   FishBaby
    216. }

    此时我们在喂给小鱼之后还需要重置大鱼图片序列的索引为0，以及身体的定时器改大一点。

    1.       // 把能力给小鱼，果实数清零，计算分数一次
    2.       score.reset()
    4.       // 把大鱼的 bodyindex 恢复成 0
    5.       fish_mother.BodyIndex = 0;
    1. BodyInterval = 1000;

    此时我们发现小鱼的身体变化又太慢了，所以我们重新定义一个覆盖父类的

    1. // 鱼宝宝
    2. class FishBaby extends FishMother {
    3.   x: number = cvs_width / 2 + 50; // 坐标轴 x
    4.   y: number = cvs_height / 2 + 50; // 坐标轴 y
    5.   BodyInterval = 300;
    6.   constructor() {