加入计分模块

新建 score.ts 文件

import { cvs_one, ctx_one } from "./init";


export default class Socre {
  fruitNum = 0;  // 吃到果实的数量
  doubleMode = 1; // 是否开启双倍模式
  total = 0;
  constructor() {}

  // 进行一轮计分，回到初始状态
  reset(){
    this.total += this.fruitNum * 10 * this.doubleMode;
    this.fruitNum = 0;
    this.doubleMode = 1;
  }

  // 渲染分数到界面上面去
  draw(){
    const w = cvs_one.width;
    const h = cvs_one.height;
    ctx_one.save()
    ctx_one.fillStyle ='white' // 设置画笔颜色
    ctx_one.textAlign = 'center' // 设置对齐方式
    ctx_one.fillText(this.total.toString() , w * .5, h - 50)
    ctx_one.fillText(this.fruitNum.toString(), w * .5, h - 80)
    ctx_one.restore()
  }
}

并在 init.ts 中通过 new 初始化它，并导出。因为我们需要在 game-loop 里面使用它。具体代码我就不写了，因为太简单了，没必要又复制一个文件代码过来，实在不知道看完整源码吧。

在 game-loop.ts 里面添加计分逻辑

因为需要判断果实类型，所以需要从 fruits.ts 里面拿到枚举，当大鱼没有吃到果实的时候，与小鱼碰撞不会生效。

import { bgPic, cvs_width , cvs_height, ctx_two, ctx_one, anemones, fruits, fish_mother, fish_baby, score } from "./init";
import utils from "./utils";

import { FruitType } from "./fruits";


let lastTime: number = Date.now(), // 记录上一次绘制的时间
    deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界

/**
 * 鱼妈妈与果实的碰撞检测
 */
function fishAndFruitsCollision() {
  for (let i = fruits.num; i >= 0; i--) {
    // 假如或者就计算鱼儿与果实的距离
    if(fruits.alive[i]) {
      // 得到距离的平方根
      const distance = utils.getDistance(
        {x: fruits.x[i], y: fruits.y[i]},
        {x: fish_mother.x, y: fish_mother.y}
      );

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

/**
 * 鱼妈妈与鱼宝宝的碰撞检测
 */
function fishMotherAndBabyCollision() {

    // 得到距离的平方根
    const distance = utils.getDistance(
      {x: fish_baby.x, y: fish_baby.y},
      {x: fish_mother.x, y: fish_mother.y}
    );

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

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

}

function gameLoop() {
  const now = Date.now()
  deltaTime = now - lastTime;
  lastTime = now;

  //  给 deltaTime 设置上线
  if(deltaTime > 40) deltaTime = 40;

  // console.log(deltaTime);

  drawBackbround()  // 画背景图片

  anemones.draw()  // 海葵绘制
  fruits.draw()  // 果实绘制
  fruits.monitor() // 监视果实，让死去的果实得到新生

  ctx_one.clearRect(0, 0, cvs_width, cvs_width); // 清除掉所有，再进行绘制，要不然的话会多次绘制而进行重叠。
  fish_mother.draw() // 绘制鱼妈妈
  fish_baby.draw() // 绘制鱼宝宝
  fishAndFruitsCollision() // 每一帧都进行碰撞检测
  fishMotherAndBabyCollision()

  score.draw() // 绘制分数
  requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
}


function drawBackbround() {
  ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
}

export { deltaTime }

export default gameLoop;