3.pixi.js编写的塔防游戏(类似保卫萝卜)-四叉树使用

最新推荐文章于 2024-06-07 15:37:13 发布

灰灰_世界

最新推荐文章于 2024-06-07 15:37:13 发布

阅读量197

点赞数

分类专栏： PIXI实战教程游戏流程开发文章标签： javascript 游戏前端 typescript 游戏开发

本文链接：https://blog.csdn.net/baidu_38766085/article/details/131261728

版权

游戏流程开发同时被 2 个专栏收录

34 篇文章 2 订阅

订阅专栏

PIXI实战教程

9 篇文章 0 订阅

订阅专栏

游戏说明

一个用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/"

四叉树的应用：

对于复杂的运算，循环次数多的应用我们可以使用四叉树来减少运算。

四叉树对象的封装：


/**
 * 四叉树
 */
export class Quadtree {
  /**
   * 拆分的最大数量
   */
  maxObjects:number

  /**
   * 拆分递归等级
   */
  maxLevels:number

  /**
   * 当前等级
   */
  level:number

  /**
   * 视图大小
   */
  bounds:RECT

  /**
   * 区域拥有的对象
   */
  objects:RECT[]

  /**
   * 子四叉树
   */
  nodes:Quadtree[]

  /**
   * 构造函数
   * @param bounds 视图大小
   * @param maxObjects 拆分的最大数量
   * @param maxLevels  拆分等级
   * @param level 当前等级
   */
  constructor(bounds:RECT, maxObjects:number, maxLevels:number, level:number) {
    this.maxObjects = maxObjects || 10
    this.maxLevels = maxLevels || 4

    this.level = level || 0
    this.bounds = bounds

    this.objects = []
    this.nodes = []
  }

  /**
   * 分割
   */
  split() {
    const nextLevel = this.level + 1
    const subWidth = this.bounds.width / 2
    const subHeight = this.bounds.height / 2
    const x = this.bounds.x
    const y = this.bounds.y

    // top right node
    this.nodes[0] = new Quadtree({
      x: x + subWidth,
      y: y,
      width: subWidth,
      height: subHeight
    }, this.maxObjects, this.maxLevels, nextLevel)

    // top left node
    this.nodes[1] = new Quadtree({
      x: x,
      y: y,
      width: subWidth,
      height: subHeight
    }, this.maxObjects, this.maxLevels, nextLevel)

    // bottom left node
    this.nodes[2] = new Quadtree({
      x: x,
      y: y + subHeight,
      width: subWidth,
      height: subHeight
    }, this.maxObjects, this.maxLevels, nextLevel)

    // bottom right node
    this.nodes[3] = new Quadtree({
      x: x + subWidth,
      y: y + subHeight,
      width: subWidth,
      height: subHeight
    }, this.maxObjects, this.maxLevels, nextLevel)
  }

  /**
   * 获取矩形所在的范围
   * @param pRect
   * @returns 返回范围索引
   */
  getIndex(pRect:RECT) {
    const indexes = []
    const verticalMidpoint = this.bounds.x + (this.bounds.width / 2)
    const horizontalMidpoint = this.bounds.y + (this.bounds.height / 2)

    const startIsNorth = pRect.y < horizontalMidpoint
    const startIsWest = pRect.x < verticalMidpoint
    const endIsEast = pRect.x + pRect.width > verticalMidpoint
    const endIsSouth = pRect.y + pRect.height > horizontalMidpoint

    // top-right quad
    if (startIsNorth && endIsEast) {
      indexes.push(0)
    }

    // top-left quad
    if (startIsWest && startIsNorth) {
      indexes.push(1)
    }

    // bottom-left quad
    if (startIsWest && endIsSouth) {
      indexes.push(2)
    }

    // bottom-right quad
    if (endIsEast && endIsSouth) {
      indexes.push(3)
    }

    return indexes
  }

  /**
   * 插入矩形
   * @param pRect 要插入的矩形
   * @returns
   */
  insert(pRect:RECT) {
    let i = 0
    let indexes

    // 如果拆分了就取子集node插入
    if (this.nodes.length) {
      indexes = this.getIndex(pRect)

      for (i = 0; i < indexes.length; i++) {
        this.nodes[indexes[i]].insert(pRect)
      }
      return
    }

    // 储存矩形对象
    this.objects.push(pRect)

    // 拆分逻辑判断
    if (this.objects.length > this.maxObjects && this.level < this.maxLevels) {
      // 拆分状态判断
      if (!this.nodes.length) {
        this.split()
      }

      // 拆分了重置对象
      for (i = 0; i < this.objects.length; i++) {
        indexes = this.getIndex(this.objects[i])
        for (let k = 0; k < indexes.length; k++) {
          this.nodes[indexes[k]].insert(this.objects[i])
        }
      }

      // 拆分了清除储存的对象
      this.objects = []
    }
  }

  /**
   * 获取矩形周围的对象
   * @param pRect
   * @returns 返回四分算法的矩形数据
   */
  retrieve(pRect:RECT) {
    const indexes = this.getIndex(pRect)
    let returnObjects = this.objects

    // 如果拆分了就用拆分的子集
    if (this.nodes.length) {
      for (let i = 0; i < indexes.length; i++) {
        returnObjects = returnObjects.concat(this.nodes[indexes[i]].retrieve(pRect))
      }
    }

    // 移除重复项
    returnObjects = returnObjects.filter(function(item, index) {
      return returnObjects.indexOf(item) >= index
    })

    return returnObjects
  }

  /**
   * 获取圆范围的矩形对象
   * @param p 圆心点
   * @param r 圆半径
   * @returns 返回与圆相碰撞的矩形对象
   */
  retrieveArc(p:POINT, r:number) {
    const rect = {
      x: p.x - r,
      y: p.y - r,
      width: r * 2,
      height: r * 2
    }
    const arr = this.retrieve(rect)
    const returnArr = []
    for (let i = 0; i < arr.length; i++) {
      const itemRect = arr[i]
      const b = userUtils.collsion.boxCircle(itemRect.x, itemRect.y, itemRect.width, itemRect.height, p.x, p.y, r)
      if (b) {
        returnArr.push(itemRect)
      }
    }
    return returnArr
  }

  /**
   * 清楚缓存
   */
  clear() {
    this.objects = []

    for (let i = 0; i < this.nodes.length; i++) {
      if (this.nodes.length) {
        this.nodes[i].clear()
      }
    }

    this.nodes = []
  }
}