Vue+Websocket实现多人在线王者飞机（一）

看了Vue官方教程，想找个项目练练手（没找到好的），就写个飞机大战吧。
飞机大战总共三个页面：登录、匹配、游戏页面，三个页面的功能：
1、 登录：玩家填写用户名，socket连接
2、匹配：等待其他玩家准备
3、游戏：战斗页面
上述流程仿照了王者荣耀，所以就叫王者飞机（当然和王者荣耀相差十万八千里）最终效果：

git地址：https://gitee.com/djxfire/PlaneWar.git
根据上面的设计，Vue套餐基本就都用上了。
首先，先编写游戏页面（让飞机动起来）：

我们定义一下玩家类player.js：

export default class Player {
  constructor (name, x, y, enermy = false) {
    this.name = name // 玩家名称
    this.position = {} // 位置
    this.position.x = x
    this.position.y = y
    this.speed = 1
    this.direct = 0 //  方向0：朝上，1朝左，2朝下，3朝右
    this.attack = 1 // ***力
    this.flood = 5 // 血量
    this.sock = null // socket连接
    this.state = 0 // 0:停止，1：移动
    this.bullets = [] // 发射的×××
    this.enermys = [] // 敌人
    if (!enermy) {
      this.init()
    }
  }
  init () {
    // TODO: WebSocket连接
  }
  move (direct) {
    this.direct = direct
    switch (direct) {
      case 0:
        if (this.position.y > 0) {
          this.position.y -= this.speed
        }
        break
      case 1:
        if (this.position.x > 0) {
          this.position.x -= this.speed
        }
        break
      case 2:
        if (this.position.y < window.innerHeight - 55) {
          this.position.y += this.speed
        }
        break
      case 3:
        if (this.position.x < window.innerWidth - 55) {
          this.position.x += this.speed
        }
        break
    }
  }
}

玩家类的具体信息参照注释。
接下来编写Game.vue组件

现在点击方向盘飞机就动起来了，然而需要不停的点击按键，显然不合理，所以我们使用requestAnimationFrame()方法实现动画，在Game组件中添加代码：

 mounted () {
    let that = this
    function _callback () {
      for (let monster of that.own.enermys) {
        monster.onframe()
        for (let bullet of monster.bullets) {
          bullet.onframe()
        }
      }
      that.own.onframe()
      for (let bullet of that.own.bullets) {
        bullet.onframe()
      }
      requestAnimationFrame(_callback)
    }
    _callback()
  }

添加player的onframe代码:

onframe () {
    if (this.state === 1) {
      this.move(this.direct)
      this.send({ opt: 'upposition', name: this.name, x: this.position.x, y: this.position.y, direct: this.direct })
    }
  }

当方向盘touchstart时own.state置为1，当touchend时置为0，修改方法：

turn (direct) {
      this.$store.dispatch('move', direct)
    },
    turnEnd () {
      this.$store.dispatch('turnEnd')
    },

至此，当按下方向键时，飞机开始运动，当放开方向键时，飞机停止运动。
下一篇将实现NodeJs实现WebSocket游戏服务端的逻辑