我们要实现以下几种特效

    • 果实长大 （增加一个图片的大小来实现果实长大）
    • 果实上浮 （减小 y 轴坐标，让果实上浮）

    我们需要思考一下逻辑。

    果实长大，那么它的直径应该是随着时间变大的，当长大到一定的直径就停止生长，然后开始上浮，上浮的过程中，我们需要不同的速度，所以我们需要一个存放速度的数组，同时它也可以限定生长速度。

    随着时间变化，我们之前在 game-loop 文件里面有一个 deltaTime ，通过它我们来实现随时间变化。

    首先在 game-loop.ts 中导出需要的变量。

    1. export { deltaTime }

    修改你的 fruits.ts 文件

    1. import { cvs_height, ctx_two, anemones } from "./init";
    2. import { deltaTime } from "./game-loop";
    5. class Fruits{
    6.   num: number = 30; // 绘画果实的数量
    7.   alive: boolean[] =[];  // 判断果实是否存活
    8.   x : number[]= []; // 果实的 x 坐标数组
    9.   y : number[] = []; // 果实的 y 坐标数组
    10.   diameter : number[] = []; // 果实的直径数组
    11.   speed: number[] = []; // 控制果实成长速度、上浮速度的数组
    12.   orange = new Image(); // 黄色果实
    13.   blue = new Image(); // 蓝色果实
    14.   constructor(){
    15.     for (let i = 0; i < this.num; ++i) {
    16.       this.alive[i] = true; // 先设置它的存活为 true
    17.       this.diameter[i] = 0; // 未生长出来的果实半径为0
    18.       this.speed[i] = Math.random() * 0.02 + 0.005; // 设置速度在区间 0.005 - 0.025 里
    19.       this.born(i);
    20.     }
    21.     this.orange.src = 'assets/img/fruit.png';
    22.     this.blue.src = 'assets/img/blue.png';
    23.   }
    25.   // 绘制果实
    26.   draw(){
    27.     for (let i = 0; i < this.num; ++i) {
    29.       // 只有属性为存活的时候才绘制
    30.       if(this.alive[i]){
    31.         if(this.diameter[i] <= 20) {
    32.           this.diameter[i] += this.speed[i] * deltaTime; // 随着时间半径不断变大 也就是果实长大
    33.         }else{
    34.           this.y[i] -= this.speed[i] * deltaTime; // 果实成熟之后， y 坐标减小，果实开始上升
    35.         }
    37.         // 把果实绘制出来，为了让果实居中，所以要减去图片高度一半，宽度一半
    38.         // 就像实现水平居中一样 left: 50px; margin-left: -(图片宽度 / 2);
    39.         // 第一个参数 图片， 第二三个参数，坐标轴的 x 和 y，第四五个参数，图片的宽高
    40.         ctx_two.drawImage(this.orange, this.x[i] - this.diameter[i] / 2 , this.y[i] - this.diameter[i], this.diameter[i], this.diameter[i]);
    41.       }
    43.       if(this.y[i] <= -10) {
    44.         this.alive[i] = false; // 果实出去了之后 存活状态为 flase
    45.       }
    47.     }
    48.   }
    50.   // 初始化果实的坐标
    51.   born(i){
    52.     let aneId = Math.floor( Math.random() * anemones.num ) // 随机拿到一个果实的 ID
    53.     this.x[i] = anemones.x[aneId]; // 设置果实的 x 坐标为海葵的 x 坐标
    54.     this.y[i] = cvs_height - anemones.height[aneId]; // 设置果实的 y 坐标，为海葵高度的顶点坐标
    55.   }
    56. }
    58. export default Fruits;

    此时的果实上升已经完成了。

    QQ20170104-0