9.pixi.js编写的塔防游戏(类似保卫萝卜)-群炮弹发射逻辑-Toy模板网

这篇具有很好参考价值的文章主要介绍了9.pixi.js编写的塔防游戏(类似保卫萝卜)-群炮弹发射逻辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

游戏说明

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

环境说明

  cnpm@6.2.0  
  npm@6.14.13  
  node@12.22.7  
  npminstall@3.28.0  
  yarn@1.22.10  
  
  npm config list  
  electron_mirror = "https://npm.taobao.org/mirrors/electron/"  
  home = "https://www.npmjs.org"  
  registry = "https://registry.npmmirror.com/"

曲线移动

通过控制炮弹移动的曲线方向速度中点位置来控制炮弹的移动位置。

起点和终点：

起点为导弹发射单位的位置

终点为要攻击目标的位置

中点可以通过随机数计算出来：

9.pixi.js编写的塔防游戏(类似保卫萝卜)-群炮弹发射逻辑,PIXI实战教程,游戏流程开发,javascript,游戏,开发语言,typescript,游戏开发,animation

中点为灰色我们需要计算中点

起点和终点可以构成一条直线

9.pixi.js编写的塔防游戏(类似保卫萝卜)-群炮弹发射逻辑,PIXI实战教程,游戏流程开发,javascript,游戏,开发语言,typescript,游戏开发,animation 我们要获取两点的中点可以i通过公式：

  /**
   * 获取两点的中点
   * @param p1 点一
   * @param p2 点二
   * @returns 返回中点
   */
  midPoint(p1:POINT, p2:POINT) {
    const returnPoint = [0, 0]
    returnPoint[0] = (p1.x + p2.x) / 2
    returnPoint[1] = (p1.y + p2.y) / 2
    return returnPoint
  },

获取两点的中点但是中点还在直线上我们还需要极坐标来位移中点

  /**
   * 极坐标位移
   * @param p1 位移的起始点
   * @param dir 位移的方向 弧度制
   * @param dis 位移的距离
   */
  coorTranslate(p1:POINT, dir:number, dis:number) {
    const returnPoint = [0, 0]
    const sin = Math.sin(dir)
    const cos = Math.cos(dir)
    const y = dis * sin
    const x = dis * cos
    returnPoint[0] = x + p1.x
    returnPoint[1] = y + p1.y
    return returnPoint
  },

方向我们可以是角度和距离可以是随机的这样我们的曲线就像是做的目标的移动了只需要在固定的时间创建多个炮弹并设置炮弹的速度就可以达到目标。

详细代码：

            // 发射子弹数量
            let bulletNumber = 6
            // 开始点根据绑定单位的坐标获取
            const startPoint = { x: p.x, y: p.y }
            const f = function() {
              Main.setTimeoutGame(function() {
                bulletNumber--
                const count = userUtilsPro.randIntBetween(1, 3)
                for (let i = 0; i < count; i++) {
                  if (bulletNumber >= 0) {
                    const end = { x: p2.x, y: p2.y }
                    // 创建子弹对象
                    const b = Bullet.create(bulletName, startPoint, end, BULLET_MOVE_TYPE.BEZIER) as Bullet
                    // 计算两点间的距离
                    const dis = userUtilsPro.pointsDis(startPoint, end)
                    // 随机方向
                    const fx = userUtilsPro.randIntBetween(0, 1) === 0 ? 1 : -1
                    // 中点计算随机位置
                    // 中点随机角度
                    const c = userUtilsPro.bezierMidPoint(startPoint, end, Math.PI * userUtilsPro.randBetween(0, 2), fx * Math.round(dis) * userUtilsPro.randBetween(0.5, 1.5))
                    b._userCenter = true
                    b.center = {
                      x: c[0],
                      y: c[1]
                    }
                    // 随机速度
                    b.setSpeed(2.6 + 4 * userUtilsPro.randBetween(0.1, 1))
                    // 子弹的创建单位
                    b.use = p.id
                    // 添加子弹到场景
                    Main.getMain().getNowScene().addGameObject(b)
                  }
                }

先设置发射炮弹数量然后通过延时计时器来执行有下面的操作：

起点，终点固定。一次发射执行数量随机，方向随机，中点极坐标位置随机，速度随机就可以达到下面的效果。