游戏结束逻辑

修改我们的 score.ts

import { cvs_one, ctx_one } from "./init";
import { deltaTime } from "./game-loop";


export default class Socre {
  fruitNum = 0;  // 吃到果实的数量
  doubleMode = 1; // 是否开启双倍模式
  total = 0; // 总分
  gaveOver = false; // 游戏结束
  alpha = 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.font = "30px 黑体";
    ctx_one.fillStyle ='white' // 设置画笔颜色
    ctx_one.textAlign = 'center' // 设置对齐方式
    ctx_one.shadowBlur = 10;  // 设置阴影
    ctx_one.shadowColor = "white"; // 设置阴影颜色

    if (this.gaveOver) {
      this.alpha += deltaTime * 0.0005
      if(this.alpha > 1) {
        this.alpha = 1
      }
      ctx_one.fillStyle = `rgba(255,255,255,${this.alpha})` // 控制颜色透明的添加动画
      ctx_one.fillText("游戏结束", w * .5, h * .5)
    }
    ctx_one.fillText("总分: "+this.total.toString() , w * .5, h - 50)
    // ctx_one.fillText(this.fruitNum.toString(), w * .5, h - 80)
    ctx_one.restore()
  }
}

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

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

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

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

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

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

// 鼠标移动监听函数
function mouseMove(e: MouseEvent) {

  // offset = layer + 1
  if( !score.gaveOver && (e.offsetX || e.layerX)) {
    mouse_x = typeof e.offsetX == undefined ? e.layerX : e.offsetX
    mouse_y = typeof e.offsetY == undefined ? e.layerY : e.offsetY
  }

}

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

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