新建 score.ts 文件

    1. import { cvs_one, ctx_one } from "./init";
    4. export default class Socre {
    5.   fruitNum = 0;  // 吃到果实的数量
    6.   doubleMode = 1; // 是否开启双倍模式
    7.   total = 0;
    8.   constructor() {}
    10.   // 进行一轮计分，回到初始状态
    11.   reset(){
    12.     this.total += this.fruitNum * 10 * this.doubleMode;
    13.     this.fruitNum = 0;
    14.     this.doubleMode = 1;
    15.   }
    17.   // 渲染分数到界面上面去
    18.   draw(){
    19.     const w = cvs_one.width;
    20.     const h = cvs_one.height;
    21.     ctx_one.save()
    22.     ctx_one.fillStyle ='white' // 设置画笔颜色
    23.     ctx_one.textAlign = 'center' // 设置对齐方式
    24.     ctx_one.fillText(this.total.toString() , w * .5, h - 50)
    25.     ctx_one.fillText(this.fruitNum.toString(), w * .5, h - 80)
    26.     ctx_one.restore()
    27.   }
    28. }

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

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

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

    1. import { bgPic, cvs_width , cvs_height, ctx_two, ctx_one, anemones, fruits, fish_mother, fish_baby, score } from "./init";
    2. import utils from "./utils";
    4. import { FruitType } from "./fruits";
    7. let lastTime: number = Date.now(), // 记录上一次绘制的时间
    8.     deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界
    10. /**
    11.  * 鱼妈妈与果实的碰撞检测
    12.  */
    13. function fishAndFruitsCollision() {
    14.   for (let i = fruits.num; i >= 0; i--) {
    15.     // 假如或者就计算鱼儿与果实的距离
    16.     if(fruits.alive[i]) {
    17.       // 得到距离的平方根
    18.       const distance = utils.getDistance(
    19.         {x: fruits.x[i], y: fruits.y[i]},
    20.         {x: fish_mother.x, y: fish_mother.y}
    21.       );
    23.       // 假如距离小于 500 让果实死亡
    24.       if(distance < 500) {
    25.         fruits.dead(i)
    26.         score.fruitNum++; // 计分系统的果实数加一
    27.         if(fruits.fruitType[i] === FruitType.Blue) { // 假如吃到蓝色道具果实，开启双倍模式
    28.           score.doubleMode = 2;
    29.         }
    30.       }
    31.     }
    32.   }
    33. }
    35. /**
    36.  * 鱼妈妈与鱼宝宝的碰撞检测
    37.  */
    38. function fishMotherAndBabyCollision() {
    40.     // 得到距离的平方根
    41.     const distance = utils.getDistance(
    42.       {x: fish_baby.x, y: fish_baby.y},
    43.       {x: fish_mother.x, y: fish_mother.y}
    44.     );
    46.     // 假如距离小于 900 就喂食给 baby，且必须要鱼妈妈吃到了果实才能喂给小鱼
    47.     if (distance < 900 && score.fruitNum != 0) {
    48.       fish_baby.recover();
    50.       // 把能力给小鱼，果实数清零，计算分数一次
    51.       score.reset()
    52.     }
    54. }
    56. function gameLoop() {
    57.   const now = Date.now()
    58.   deltaTime = now - lastTime;
    59.   lastTime = now;
    61.   //  给 deltaTime 设置上线
    62.   if(deltaTime > 40) deltaTime = 40;
    64.   // console.log(deltaTime);
    66.   drawBackbround()  // 画背景图片
    68.   anemones.draw()  // 海葵绘制
    69.   fruits.draw()  // 果实绘制
    70.   fruits.monitor() // 监视果实，让死去的果实得到新生
    72.   ctx_one.clearRect(0, 0, cvs_width, cvs_width); // 清除掉所有，再进行绘制，要不然的话会多次绘制而进行重叠。
    73.   fish_mother.draw() // 绘制鱼妈妈
    74.   fish_baby.draw() // 绘制鱼宝宝
    75.   fishAndFruitsCollision() // 每一帧都进行碰撞检测
    76.   fishMotherAndBabyCollision()
    78.   score.draw() // 绘制分数
    79.   requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
    80. }
    83. function drawBackbround() {
    84.   ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
    85. }
    87. export { deltaTime }
    89. export default gameLoop;