Building a Game with the Cocos2d-html5 Library - HTML5 Game Development Insights - page 410

Figure 24-18. Tower Defence game's enemies and actions
Monsters will be removed when they die or after completing the cc.CardinalSplineTo action. If the monster
completes the journey, you will lose the game, and see the GameOverScene . When the monster dies, you will receive a
score equal to monster's hit points. If the score is higher than 2,000, you will win and also see the GameOverScene . I will
discuss creating the GameOverScene later in this chapter.
Simple Collision Detection
Monsters and high-level bullets will move all over the screen. Sometimes the unlucky monster will get hit, and so you
need to add collision detection to the game.
The prototype for collision detection in this game is known as QuadTree. Visit http://en.wikipedia.org/
wiki/Quadtree to learn more about it, and refer to QuadTree.js for the implementation. QuadTree recursively splits
the screen into four regions, and it checks the collision in each region. If objects in one region are larger than the
maximum defined number, the region will be split again. The code to invoke QuadTree initially is as follows:
this ._quad = new Quadtree ( 0 , cc. rect ( 0 , 0 , this ._winSize. width , this ._winSize. height ) ) ;
With the Update function of GameLayer , you use QuadTree to check whether or not the monster is attackable.
The code to do this is shown in Listing 24-18.
Listing 24-18. Checking Monster Attackability in GameLayer.js
this ._quad.clear ( ) ;
for ( var i = 0 ; i < monsters.length ; i ++ ) {
this ._quad.insert ( monsters [ i ] ) ;
}
for ( var i = 0 , iLen = towers.length ; i < iLen ; i ++ ) {
var tower = towers [ i ] ;
var list = [ ] ;