javascript四叉树辅助二维平面碰撞检测

有个项目需要处理平面内物体碰撞问题。

百度了一下，发现网上二维平面碰撞检测这方面资料并不是很多。

很多资料都提到四叉树，但讲原理的多，给代码的少。我以为四叉树能直接进行碰撞检测呢，原来只是把屏幕区域生成一个四叉树，用来减少碰撞检测的次数。

然后我在github上找了一个示例项目，但思路与网上讲的有些不一样。

一般提到四叉树是这样的，一个区域内的物体数量超过一定数量后，则将这个区域分成四个子区域，并这个区域内的物体重新分配到子区域。为了防止出现递归层数太多，需要限定整棵树的层数。

github上的这个项目的思路是，先限定整棵树的深度，如果物体加入，则直接将这个物体插入到这棵树的叶子区域。

我觉得前者的思路肯定是更加合理的，所以自己把代码重写了一遍，代码如下，测试无问题：

export class QuadTree {
    constructor(x, y, width, height, depth) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.sprites = []
        this.children = []
        this.leaf = true //是不是叶子节点，默认是叶子
        this.depth = depth
    }

    // sprite {num,x,y,width,height}
    insert(sprite) {
        if (this._intersects(sprite)) {
            if (this.leaf) {
                this.sprites.push(sprite)
                if (this.sprites.length > 2 && this.depth < 5) {
                    // 如果区域内超过两个物体，重新划分区域
                    this._divide()
                    // 将物体重新分配到各个区域 注意：一个物体可能出现在两个区域
                    for (let i = 0; i < this.sprites.length; i++) {
                        let sp = this.sprites[i]
                        for (let j = 0; j < this.children.length; j++) {
                            let quad = this.children[j]
                            if (quad._intersects(sp)) {
                                quad.insert(sp)
                            }
                        }
                    }
                    this.leaf = false // 不再是叶子
                    this.sprites.length = 0 // 清空物体
                }
            } else {
                // 如果不是叶子，把物体往下分配
                for (let j = 0; j < this.children.length; j++) {
                    let quad = this.children[j]
                    if (quad._intersects(sprite)) {
                        quad.insert(sprite)
                    }
                }
            }
        }
    }

    // 返回一个可能出现碰撞的区域，是一个生成器。原代码是用reduce方法将整棵树拍平成一个数组再遍历数组进行处理，我觉得用生成器肯定是更优雅的
    * possibles() {
        if (this.leaf) {
            if (this.sprites.length > 1)
                yield this
        } else {
            for (let i = 0; i < this.children.length; i++) {
                for (let q of this.children[i].possibles()) {
                    yield q
                }
            }
        }
        // console.log(Date.now())
    }

    * spriteList() {
        if (this.leaf) {
            for (let i = 0; i < this.sprites.length; i++) {
                yield this.sprites[i]
            }
        } else {
            for (let i = 0; i < this.children.length; i++) {
                for (let sp of this.children[i].spriteList()) {
                    yield sp
                }
            }
        }
    }

    // 相交检测：检测方块与当前区域是否相互
    _intersects(sprite) {
        let sx = sprite.x + sprite.width / 2,
            sy = sprite.y + sprite.height / 2,
            tx = this.x + this.width / 2,
            ty = this.y + this.height / 2
        // console.log('sprite',sprite.x,sprite.y,sprite.width,sprite.height)
        // console.log('quadTree',this.x,this.y,this.width,this.height)
        return Math.abs(tx - sx) < (this.width + sprite.width) / 2 &&
            Math.abs(ty - sy) < (this.height + sprite.height) / 2
    }

    // 将当前区域划分成4个区域，即生成子节点
    _divide() {
        this.children = [
            // Top left
            new QuadTree(this.x, this.y, this.width / 2, this.height / 2, this.depth + 1),
            // Top right
            new QuadTree(this.x + this.width / 2, this.y, this.width / 2, this.height / 2, this.depth + 1),
            // Bottom left
            new QuadTree(this.x, this.y + this.height / 2, this.width / 2, this.height / 2, this.depth + 1),
            // Bottom right
            new QuadTree(this.x + this.width / 2, this.y + this.height / 2, this.width / 2, this.height / 2,
                this.depth + 1)
        ]
    }
}