基于
https://gamedevelopment.tutsplus.com/tutorials/quick-tip-use-quadtrees-to-detect-likely-collisions-in-2d-space--gamedev-374
quadtree-js
This is a JavaScript Quadtree implementation of the Java Methods described in this tutorial:http://gamedev.tutsplus.com/tutorials/implementation/quick-tip-use-quadtrees-to-detect-likely-collisions-in-2d-space/
This is not a collision engine, but an algorithm to narrow down objects of possible collision.
Please read the tutorial if you want to know more about Quadtrees.
There are two examples: simple and dynamic.
- red squares represent Quadtree Nodes
- empty white squares represent objects in our Quadtree
- the cursor is the area we constantly test for
- objects turned green are candidates for collision, returned from the receive-function
How to use
Create a new Quadtree with default values for max_objects (10) and max_levels (4)
var myTree = new Quadtree({ x: 0, y: 0, 400, height: 300 });
If you want to specify max_objects and max_levels on your own, you can pass them as a 2nd and 3rd argument
var myTree = new Quadtree({ x: 0, y: 0, 800, height: 600 }, 5, 8);
Insert an element in the Quadtree
myTree.insert({ x : 200, y : 150, width : 20, height : 20 });
Retrieve elements that "collide" with the given bounds
var elements = myTree.retrieve({ x : 150, y : 100, width : 20, height : 20 });
Clear the Quadtree
myTree.clear();
Check out the examples for more information. Feel free to open an issue if you have any problems.
There is an alternative quadtree-js hitman branch available that allows you to update and remove single objects. This can be handy when most of the objects in your Quadtree are static.