创建鱼宝宝 - 《H5 游戏贪吃鱼》

鱼妈妈与鱼宝宝都是鱼，所以我们可以抽象一些它们相同的部分，这里又俩种方式，一种是通过函数去创建，也就是鱼厂，这个是面向过程编程。此时我们写面向对象代码，使用继承来减少代码。

因为鱼宝宝是要跟着鱼妈妈的，所以我们把鱼妈妈跟着鼠标的坐标改一下就能用了。

修改一下鱼宝宝的初始坐标。因为 fish-mother.ts 文件要放鱼妈妈和鱼宝宝，所以叫个个名字就不合适了，我们把它改成 fish.ts ，所以下面代码写到 fish.ts 里面。

import { ctx_one, cvs_height, cvs_width, mouse_x, mouse_y, fish_mother } from "./init";
import utils from "./utils";
// 鱼妈妈
class FishMother{
  x: number = cvs_width / 2; // 坐标轴 x
  y: number = cvs_height / 2 ; // 坐标轴 y
  bigEye = new Image(); // 眼睛
  bigBody = new Image(); // 身体
  BigTail = new Image(); // 尾巴
  angle: number = 0; // 鱼的角度
  constructor(){
    this.bigEye.src = 'assets/img/bigEye0.png';
    this.bigBody.src = 'assets/img/bigSwim0.png';
    this.BigTail.src ='assets/img/bigTail0.png';
  }
  draw(){
    this.x = utils.lerpDistance(mouse_x, this.x , .95)
    this.y = utils.lerpDistance(mouse_y, this.y , .95)
    let instance_X = mouse_x - this.x; // 边 a
    let instance_Y = mouse_y - this.y; // 边 b
    let ag = Math.atan2(instance_Y, instance_X) + Math.PI // [-PI, PI]
    this.angle = utils.lerpAngle(ag, this.angle, .9)
    ctx_one.save();
    ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    ctx_one.rotate(this.angle);
    ctx_one.scale(.8, .8);
    ctx_one.drawImage(this.BigTail, -this.BigTail.width / 2 + 30, -this.BigTail.height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    ctx_one.drawImage(this.bigBody, -this.bigBody.width / 2, -this.bigBody.height / 2);
    ctx_one.drawImage(this.bigEye, -this.bigEye.width / 2, -this.bigEye.height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    ctx_one.restore();
  }
}
// 鱼宝宝
class FishBaby extends FishMother {
  x: number = cvs_width / 2 + 50; // 坐标轴 x
  y: number = cvs_height / 2 + 50; // 坐标轴 y
  constructor() {
    super()
    this.bigEye.src = 'assets/img/babyEye0.png';
    this.bigBody.src = 'assets/img/babyFade0.png';
    this.BigTail.src = 'assets/img/babyTail0.png';
  }
  draw(){
    this.x = utils.lerpDistance(fish_mother.x, this.x , .98)
    this.y = utils.lerpDistance(fish_mother.y, this.y , .98)
    let instance_X = fish_mother.x - this.x; // 边 a
    let instance_Y = fish_mother.y - this.y; // 边 b
    let ag = Math.atan2(instance_Y, instance_X) + Math.PI // [-PI, PI]
    this.angle = utils.lerpAngle(ag, this.angle, .7)
    ctx_one.save();
    ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    ctx_one.rotate(this.angle);
    ctx_one.scale(.8, .8);
    ctx_one.drawImage(this.BigTail, -this.BigTail.width / 2 + 30, -this.BigTail.height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    ctx_one.drawImage(this.bigBody, -this.bigBody.width / 2, -this.bigBody.height / 2);
    ctx_one.drawImage(this.bigEye, -this.bigEye.width / 2, -this.bigEye.height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    ctx_one.restore();
  }
}
export {
  FishMother,
  FishBaby
}

因为修改了文件名和导入导出，所以我们还需要修改一下其他模块的代码。比如 init.ts 文件，我们需要在 init 里面初始化鱼宝宝。

import Anemones from "./anemones";
import Fruits from "./fruits";
import { FishMother, FishBaby } from "./fish";
/****************************/
/** 初始化所有需要初始化的变量 **/
/****************************/
let cvs_one: HTMLCanvasElement,
    cvs_two: HTMLCanvasElement,
    ctx_one: CanvasRenderingContext2D,
    ctx_two: CanvasRenderingContext2D;
let mouse_x: number, // 鱼的x坐标，和鼠标x的坐标
    mouse_y: number; // 鱼的y坐标，和鼠标y的坐标，因为鼠标在哪鱼在哪，所以重合。
let cvs_width: number,
    cvs_height: number;
let anemones: Anemones , fruits: Fruits, fish_mother: FishMother, fish_baby: FishBaby;
const bgPic = new Image();
function getCanvasAndContextById(id: string): [HTMLCanvasElement, CanvasRenderingContext2D] {
  const dom = <HTMLCanvasElement>document.querySelector('#' + id);
  const ctx = dom.getContext('2d');
  return [dom, ctx];
}
// 鼠标移动监听函数
function mouseMove(e: MouseEvent) {
  // offset = layer + 1
  if(e.offsetX || e.layerX) {
    mouse_x = typeof e.offsetX == undefined ? e.layerX : e.offsetX
    mouse_y = typeof e.offsetY == undefined ? e.layerY : e.offsetY
  }
}
function init() {
  [cvs_one, ctx_one] = getCanvasAndContextById('one');
  [cvs_two, ctx_two] = getCanvasAndContextById('two');
  bgPic.src = 'assets/img/background.jpg';
  cvs_width = cvs_one.width;
  cvs_height = cvs_one.height;
  anemones = new Anemones()
  fruits = new Fruits()
  fish_mother = new FishMother()
  fish_baby = new FishBaby()
  mouse_x = cvs_width / 2; // 先把鱼初始化在画布的中间
  mouse_y = cvs_height / 2;
  // 因为鱼是在 canvas one 上面，所以把监听添加到 one 上面
  cvs_one.addEventListener('mousemove', mouseMove, false);
}
export default init;
export {
  bgPic,
  cvs_width,
  cvs_height,
  cvs_one,
  cvs_two,
  ctx_one,
  ctx_two,
  anemones,
  fruits,
  fish_mother,
  fish_baby,
  mouse_x,
  mouse_y
};

在 game-loop.ts 里面画鱼宝宝。

import { bgPic, cvs_width , cvs_height, ctx_two, ctx_one, anemones, fruits, fish_mother, fish_baby } from "./init";
import utils from "./utils";
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)
      }
    }
  }
}
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() // 每一帧都进行碰撞检测
  requestAnimationFrame(gameLoop); // 不断的循环 gameLoop，且流畅性提升
}
function drawBackbround() {
  ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
}
export { deltaTime }
export default gameLoop;

鱼宝宝已经绘制完毕啦。