微信小游戏_China_Fighting——player类（hero、button）

目录

微信小游戏_China_Fighting——前言

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

微信小游戏_China_Fighting——npc类（enemy、mask、sars）

微信小游戏_China_Fighting——player类（hero、button）

微信小游戏_China_Fighting——runtime类（background、fstart1、fstart2、gameinfo、music）

微信小游戏_China_Fighting——lib类（symbol、weapp-adapter）及databus

微信小游戏_China_Fighting——main.js及index.js

微信小游戏_China_Fighting——game.js、game.json、project.config.json

微信小游戏_China_Fighting——后记

正文

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

英雄类

    玩家可以操作的就是一辆护送口罩的小卡车，可以执行的操作是通过触摸两个箭头按键让小卡车在三条赛道上左右移动来规避病毒，躲避障碍物和获取口罩。
先说一说简单的button类：

import Sprite from '../base/sprite'
export default class Button extends Sprite {
  constructor(imgSrc = '', width = 0, height = 0, x = 0, y = 0) {
    super(imgSrc, width, height, x, y)
  }
}

    可以看出来只是简单的继承了sprite类。这里主要是做了一类封装，让整体代码理解起来更为方便。
再来说一下游戏里的主角 hero类：
    hero类也有一系列的常量，内容同前npc类的类似，只是在部分值上有所不同。同时还定义了两个button的位置常量，方便判断是否触摸在按键。
    在hero.js中相比之前的js增加了一个事件监听绑定。

  initEvent() {
    //触摸开始时事件
    canvas.addEventListener('touchstart', ((e) => {
      e.preventDefault()
      //获取触摸点坐标
      let x = e.touches[0].clientX
      let y = e.touches[0].clientY

      //判断是否触摸在左键上
      if (this.checkIsFingerOnLeft(x, y)) {
        this.left_touched = true
        this.setAirPosAcrossFingerPosZ(1)
      }//判断是否触摸在右键上
      else if (this.checkIsFingerOnRight(x, y)) {
        this.right_touched = true
        this.setAirPosAcrossFingerPosZ(2)
      }

    }).bind(this))
    //触摸结束时事件
    canvas.addEventListener('touchend', ((e) => {
      e.preventDefault()
      this.left_touched = false
      this.right_touched = false
    }).bind(this))
  }

    这里调用了addEventListener（参数1，参数2）函数去增加事件监听。
    参数1是由wx规定的几类触摸事件：

• touchstart 触摸开始时 ，就是刚点击的时候
• touchmove触摸移动时 ，比如拖动的时候
• touchend 触摸结束时，手指离开屏幕的时候
• 等等，还有一系列其他事件，可以参见w3cschool。

    参数2是当该事件触发的时候应该继续执行的函数。
在本游戏中，上述代码主要实现功能是在触摸时判断是触摸的左键还是右键，然后根据规则去更新hero的位置，触摸结束时，更新触摸状态。

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