微信小游戏_China_Fighting——基础支撑类（sprite、animation、pool）

正文

本文主要讲解sprite.js、animation.js、pool.js的内容。
由于将整个js全部粘贴到博文里过于占位置，只对于一些关键部分以及该js代码实现的功能进行讲解。若想获取整个js文件，可以去目录–>前言–>资源链接里下载，内含超详细注释。

1.sprite.js

整个游戏里的基础精灵类，其他诸多类都是继承于精灵类。
构造函数：

  constructor(imgSrc = '', width = 0, height = 0, x = 0, y = 0) {
    this.img = new Image() //新生成一个Image对象
    this.img.src = imgSrc   //指定图像的地址
    this.width = width      //设置图像的宽度
    this.height = height    //设置图像的高度
    this.x = x              //设置图像的起始横坐标
    this.y = y              //设置图像的起始纵坐标
   	this.visible = true     //设置是否可见，在画到画布上的时候进行判断
  }

这里有一个Image对象，就是一个图像对象，是这个精灵类的核心。因为你想想游戏里一个对象也就是一个图像（或者动画）到处动呗。

  drawToCanvas(ctx) {        //形参是一个canvas对象
    if (!this.visible)       //不可见就不画
      return 
    ctx.drawImage(           //调用画布对象的drawImage()方法将图像按照指定位置和指定宽度画到画布上
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }

    这是精灵类的绘制函数，就是在绘制前判断一下是否可见。
    这里的ctx是一个canvas类型的对象，就是前面说的画布对象。你可以把你的设备屏幕想做是一个画布。只不过实际上比这更为复杂一点。
canvas分为上屏canvas和离屏canvas。
    上屏canvas是你在整个小游戏第一次调用createcanvas方法生成一个canvas对象时产生的。有且仅有一个上屏canvas。
    离屏canvas是你在整个小游戏中在非第一次调用create方法生成的所有canvas对象都是离屏canvas,你可以使用离屏canvas让你的小游戏模块化更为清晰。
    sprite.js里还有一个碰撞检测方法，这个检测方法可以根据你自己的小游戏去自行设置。这里简单介绍下两种常用的碰撞检测方法：
    中心点检测法：一个精灵类的中心是否在另一个精灵的图像范围内，这种方法可以容忍部分接触。
    边缘碰撞检测法：把两个物品当作两个刚性的矩形，即使有一点点接触或重叠就会检测出碰撞。

2.animation.js

    这个是一个动画类，也是继承于sprite类的。虽然本项目中未使用到，但是还是和大家讲解一下。
    动画就是多个图片在人眼能够不能够分辨的情况下切换。
    其实一个简单的动画类和精灵类区别不大。普通精灵类就是每一帧都只绘制同一个图片，动画类就是每一帧按照图片的顺序依次绘制。
    在animation中定义了一个Databus类型的全局变量数据总线，是为了将此动画推入到全局动画池里面，便于全局绘图的时候遍历和绘制当前动画帧。
    关于DataBus的内容会在后续的博客中讲解。

3.pool.js

简易的对象池实现，用于对象的存贮和重复使用，可以有效减少对象创建开销和避免频繁的垃圾回收，从而提高游戏性能。
为每一个会使用到的类对象都建立一个内存池，当使用时从对象池中取出一个对象，若对象池为空则新实例化一个对象。在使用后且不再被使用时回收到对象池中。由于本游戏每一个类仅仅需要几个实例化的对象对象池没必要实现收缩扩张等操作。

若有错误或者不解，欢迎评论区留言！