修改我们的 score.ts

    1. import { cvs_one, ctx_one } from "./init";
    2. import { deltaTime } from "./game-loop";
    5. export default class Socre {
    6.   fruitNum = 0;  // 吃到果实的数量
    7.   doubleMode = 1; // 是否开启双倍模式
    8.   total = 0; // 总分
    9.   gaveOver = false; // 游戏结束
    10.   alpha = 0 // 控制游戏结束字体的透明度
    11.   constructor() {}
    13.   // 进行一轮计分，回到初始状态
    14.   reset(){
    15.     this.total += this.fruitNum * 10 * this.doubleMode;
    16.     this.fruitNum = 0;
    17.     this.doubleMode = 1;
    18.   }
    20.   // 渲染分数到界面上面去
    21.   draw(){
    22.     const w = cvs_one.width;
    23.     const h = cvs_one.height;
    26.     ctx_one.save()
    27.     ctx_one.font = "30px 黑体";
    28.     ctx_one.fillStyle ='white' // 设置画笔颜色
    29.     ctx_one.textAlign = 'center' // 设置对齐方式
    30.     ctx_one.shadowBlur = 10;  // 设置阴影
    31.     ctx_one.shadowColor = "white"; // 设置阴影颜色
    33.     if (this.gaveOver) {
    34.       this.alpha += deltaTime * 0.0005
    35.       if(this.alpha > 1) {
    36.         this.alpha = 1
    37.       }
    38.       ctx_one.fillStyle = `rgba(255,255,255,${this.alpha})` // 控制颜色透明的添加动画
    39.       ctx_one.fillText("游戏结束", w * .5, h * .5)
    40.     }
    41.     ctx_one.fillText("总分: "+this.total.toString() , w * .5, h - 50)
    42.     // ctx_one.fillText(this.fruitNum.toString(), w * .5, h - 80)
    43.     ctx_one.restore()
    44.   }
    45. }

    这里我们通过 fillStyle = `rgba… 添加了透明动画效果，通过 alpha 变量来控制

    同时游戏结束的时候，我们还需要把 gameOver 设置为 true，在小鱼的 checkImageIndex 函数里面。

    1.      if(this.BodyIndex > 19) {
    2.         this.BodyIndex = 19
    3.         console.log('game over');
    4.         score.gaveOver = true;
    5.       }

    游戏结束的时候不再进行碰撞检测，在 gameLoop 函数中

    1.   if(!score.gaveOver) {
    2.     fishAndFruitsCollision() // 每一帧都进行碰撞检测
    3.     fishMotherAndBabyCollision()
    4.   }

    当游戏结束的时候，鱼儿不再游动

    1. // 鼠标移动监听函数
    2. function mouseMove(e: MouseEvent) {
    4.   // offset = layer + 1
    5.   if( !score.gaveOver && (e.offsetX || e.layerX)) {
    6.     mouse_x = typeof e.offsetX == undefined ? e.layerX : e.offsetX
    7.     mouse_y = typeof e.offsetY == undefined ? e.layerY : e.offsetY
    8.   }
    10. }

    这个时候，我们发现小鱼在上面，当游戏结束时，白色小鱼覆盖大鱼太难看了，我们先画小鱼，在 game-loop 中

    1. fish_baby.draw() // 绘制鱼宝宝
    2. fish_mother.draw() // 绘制鱼妈妈