5.pixi.js编写的塔防游戏(类似保卫萝卜)-子弹跟随精灵移动

 游戏说明

一个用pixi.js编写的h5塔防游戏，可以用electron打包为exe，支持移动端，也可以用webview控件打包为app在移动端使用

环境说明

  [email protected]  
  [email protected]  
  [email protected]  
  [email protected]  
  [email protected]  
  
  npm config list  
  electron_mirror = "https://npm.taobao.org/mirrors/electron/"  
  home = "https://www.npmjs.org"  
  registry = "https://registry.npmmirror.com/"  

子弹对象的设计

子弹对象应该有多种移动路径(直线，曲线)，是否跟踪敌人。

游戏中的运动：

通过在每一帧中移动精灵从而让看起来像在移动

子弹的移动是通过一元方程进行直线的移动，对于曲线移动我们通过贝塞尔曲线来进行曲线运动

下面是相关公式在程序中的使用：

  /**
   * 直线贝塞尔曲线运动
   * @param p0 起点
   * @param p1 终点
   * @param t 常量t
   * @returns 返回常量t所在的位置坐标
   */
  oneBezier(p0: number, p1: number, t: number) {
    return (1 - t) * p0 + t * p1
  },

  /**
   * 曲线贝塞尔曲线运动
   * @param p0 起点
   * @param p1 中点
   * @param p2 终点
   * @param t 常量t
   * @returns 返回常量t所在的位置坐标
   */
  twoBezier(p0: number, p1: number, p2:number, t: number) {
    return (1 - t) * (1 - t) * p0 + 2 * t * (1 - t) * p1 + t * t * p2
  },

 在公式中我们可以通过修改常量t(0-1)来控制运动的过程

对于可跟踪子弹我们可以在移动过程中动态的通过修改起点和终点的位置来达到跟踪的效果。

不启用动态修改位置的运动：

 可以看到子弹会打空

开启动态修改位置的运动：

可以看到子弹不会打空

动态修改终点和开始点的代码：

  
  _updateTrack() {
    // 更新结束位置到精灵所在位置
    this.end.x = this.trackTarget.x
    this.end.y = this.trackTarget.y
    // 更新开始位置为子弹当前位置
    this.start.x = this.x
    this.start.y = this.y
    this.userData._bufferXY = undefined
    // 更新常量t为重新开始
    this.t = 0
    if (this.trackMoveType === BULLET_MOVE_TYPE.BEZIER) {
      this._moveTypeBezier()
    } else if (this.trackMoveType === BULLET_MOVE_TYPE.LINE) {
      this.angle = userUtilsPro.pointsAngle(this.start, this.end)
      // 根据子弹移动速度设置常量t的改变量
      this.tMult = this.speed / userUtilsPro.pointsDis(this.start, this.end)
    }
  }

  protected _moveTypeBezier() {
   
    const dis = userUtilsPro.pointsDis(this.start, this.end)
    // 获取贝塞尔曲线的长度
    const c = userUtilsPro.bezierMidPoint(this.start, this.end, userUtilsPro.PI3, Math.round(dis / 4))
    this.center = {
      x: c[0],
      y: c[1]
    }
    // 根据子弹移动速度设置常量t的改变量
    this.tMult = this.speed / userUtilsPro.getCurveLenght(this.start, this.center, this.end)
  }

 代码中我们修改了子弹对象结束位置的坐标，开始位置的坐标，重置了常量t然后根据移动的距离来动态的修改tMult的改变值 从而让移动动画有一种跟踪的感觉

这是我们要做的目标:

项目开源地址:

GitHub - yinhui1129754/towerDefense: 一个使用pixi.js编写的类似保卫萝卜的塔防游戏。