Let's define a few global "constants" that we will use repeatedly and the constructor of DragonManager in the dragonManager.js file:

var MAX_DRAGON_SPEED = -40;
var FLAP_FORCE = 13;
var ANIMATION_ACTION_TAG = 123;
var MOVEMENT_ACTION_TAG = 121;

function DragonManager(gameWorld)
{
  // save reference to GameWorld
  this.gameWorld = gameWorld;
  this.screenSize = gameWorld.screenSize;
  // initialise variables
  this.dragonSprite = null;
  this.dragonSpeed = cc.POINT_ZERO;
  this.dragonPosition = cc.POINT_ZERO;
  this.mustApplyGravity = false;
}

The constructor maintains a reference to GameWorld and screenSize, and it initializes the variables needed to create and update the dragon. Notice how mustApplyGravity has been set to false. This is because we don't want the dragon crashing into the castle walls as soon as the game starts. We wait for the user's touch before applying gravity.

Let's take a look at the following code:

DragonManager.prototype.init = function() {
  // create sprite and add to GameWorld's sprite batch node
  this.dragonSprite = cc.Sprite.createWithSpriteFrameName("dhch_1");
  this.dragonPosition = cc.p(this.screenSize.width * 0.2, this.screenSize.height * 0.5);
  this.dragonSprite.setPosition(this.dragonPosition);
  this.gameWorld.spriteBatchNode.addChild(this.dragonSprite, E_ZORDER.E_LAYER_PLAYER);
 
  // fetch flying animation from cache & repeat it on the dragon's  sprite
  var animation = cc.AnimationCache.getInstance().getAnimation("dragonFlying");
  var repeatedAnimation = cc.RepeatForever.create(cc.Animate.create(animation));
  repeatedAnimation.setTag(ANIMATION_ACTION_TAG);
  this.dragonSprite.runAction(repeatedAnimation);
  .
  .
  .
};

The init function is responsible for creating the dragon's sprite and giving the default hovering motion that we saw on the MainMenu screen. So, dragonSprite is created and added to spriteBatchNode of the GameWorld and positioned appropriately. We then fetch the flying animation from the cc.AnimationCache and run it repeatedly on dragonSprite. Consequently, the hovering motion runs just like on the MainMenu screen.

Setting tags for actions is a great way to avoid maintaining references to the various actions you may have running on a node. This way, you can get the object of a particular action by calling yourNode.getActionByTag(actionsTag) on the node running the action. You can also use yourNode.stopActionByTag(actionsTag) to stop the action without a reference to the respective action.

At the top of the towerManager.js file, we will create a small Tower object to maintain the upper and lower sprites for the tower as well as its position:

function Tower(position)
{
    this.lowerSprite = null;
    this.upperSprite = null;
    this.position = position;
}

Next, we define the constructor of TowerManager as follows:

var VERT_GAP_BWN_TOWERS = 300;
function TowerManager(gameWorld)
{
  // save reference to GameWorld
  this.gameWorld = gameWorld;
  this.screenSize = gameWorld.screenSize;
  // initialise variables
  this.towers = [];
  this.towerSpriteSize = cc.SIZE_ZERO;
  this.firstTowerIndex = 0;
  this.lastTowerIndex = 0;
}

The upper and lower sprites for each tower will be separated vertically so that the user can help the dragon pass through. This gap is represented by VERT_GAP_BWN_TOWERS. The TowerManager constructor maintains a reference to GameWorld and records the value of screenSize. It also initializes the towers' array and the size for a tower's sprite. The last two variables are convenience variables that will point to the first and last tower, respectively.

Let's take a look at the following code:

TowerManager.prototype.init = function() {
  // record size of the tower's sprite
  this.towerSpriteSize = cc.SpriteFrameCache.getInstance().getSpriteFrame("opst_02").getOriginalSize();
 
  // create the first pair of towers
  // they should be two whole screens away from the dragon
  var initialPosition = cc.p(this.screenSize.width*2, this.screenSize.height*0.5);
  this.firstTowerIndex = 0;
  this.createTower(initialPosition);
  // create the remaining towers
  this.lastTowerIndex = 0;
  this.createTower(this.getNextTowerPosition());
  this.lastTowerIndex = 1;
  this.createTower(this.getNextTowerPosition());
  this.lastTowerIndex = 2;
};

We start by recording the size of a tower's sprite. Then, the first tower is placed a good distance away from the dragon. You don't want to overwhelm users as soon as they hit play. The distance in this case is two times the screens width. We then create three towers by calling the createTower function and passing in a position calculated in the getNextTowerPosition function. Observe how the firstTowerIndex and lastTowerIndex variables are set. Don't worry, you'll understand this soon.

Let's take a look at the following code:

TowerManager.prototype.createTower = function(position) {
  // create a new tower and add it to the array
  var tower = new Tower(position);
  this.towers.push(tower);

  // create lower tower sprite & add it to GameWorld's batch node
  tower.lowerSprite = cc.Sprite.createWithSpriteFrameName("opst_02");
  tower.lowerSprite.setPositionX(position.x);
  tower.lowerSprite.setPositionY( position.y + VERT_GAP_BWN_TOWERS * -0.5 + this.towerSpriteSize.height * -0.5 );
  this.gameWorld.spriteBatchNode.addChild(tower.lowerSprite, E_ZORDER.E_LAYER_TOWER);

  // create upper tower sprite & add it to GameWorld's batch node
  tower.upperSprite = cc.Sprite.createWithSpriteFrameName("opst_01");
  tower.upperSprite.setPositionX(position.x);
  tower.upperSprite.setPositionY( position.y + VERT_GAP_BWN_TOWERS * 0.5 + this.towerSpriteSize.height * 0.5 );
  this.gameWorld.spriteBatchNode.addChild(tower.upperSprite, E_ZORDER.E_LAYER_TOWER);
};

First, you create a Tower object and push it into the towers' array. You then create the lower and upper sprites for the tower. Both lower and upper sprites will have the same x coordinate but different y coordinates. The bit of arithmetic here basically creates a vertical gap between the towers and adjusts them according to their anchor points. Finally, the sprites are added into spriteBatchNode of GameWorld. Now, let's spend some time understanding the getNextTowerPosition function, as this will be used to dynamically generate the positions of the towers making our dragon's journey that much more challenging and fun.

Let's take a look at the following code:

TowerManager.prototype.getNextTowerPosition = function() {
  // randomly select either above or below last tower
  var isAbove = (Math.random() > 0.5);
  var offset = Math.random() * VERT_GAP_BWN_TOWERS * 0.75;
  offset *= (isAbove) ? 1:-1;

  // new position calculated by adding to last tower's position
  var newPositionX = this.towers[this.lastTowerIndex].position.x + this.screenSize.width*0.5;
  var newPositionY = this.towers[this.lastTowerIndex].position.y + offset;

  // limit the point to stay within 30-80% of the screen
  if(newPositionY >= this.screenSize.height * 0.8)
    newPositionY -= VERT_GAP_BWN_TOWERS;
  else if(newPositionY <= this.screenSize.height * 0.3)
    newPositionY += VERT_GAP_BWN_TOWERS;

  // return the new tower position
  return cc.p(newPositionX, newPositionY);
};

First, we choose whether the tower calling this function should be positioned above or below the last tower. Then, an offset or gap is calculated with a random factor of VERT_GAP_BWN_TOWERS. This offset is added to the last tower's y coordinate and half of the screen's width is added to the last tower's x coordinate to get the position for the next tower. By last tower I mean the tower that is currently most to the right or last in line. Finally, we clamp the y coordinate to stay between 30-80 percent of the screen. Otherwise, we would have to fly our dragon out of the screen or straight into the castle. I'm sure the dragon would not like the latter.

I shall skip the environment creation since we have already covered it for the MainMenu screen.

The game will be updated after every tick in the update function of GameWorld because we called scheduleUpdate in the init function of GameWorld. This is where we need to call the update functions of our respective manager classes. The code is as follows:

update:function(deltaTime) {
  // update dragon
  this.dragonManager.update();
  // update towers only after game has started
  if(this.hasGameStarted)
  this.towerManager.update();
  // update environment
  this.fairytaleManager.update();
  this.checkCollisions();
},

We must update all our managers and check collisions after every tick. That is what our update loop will consist of. Notice how the update function of the TowerManager class is called only once the game has started. This is because we still want the environment and the dragon to be active while users comprehend the tutorial. But we don't want the towers to start appearing before users have had enough time to understand what they need to do.

The update function of the DragonManager class will be responsible for applying gravity, updating the dragon's position, and checking for collisions between the dragon and the roof of the castle.

Let's take a look at the code:

DragonManager.prototype.update = function() {
  // calculate bounding box after applying gravity
  var newAABB = this.dragonSprite.getBoundingBox();
  newAABB.setY(newAABB.getY() + this.dragonSpeed.y);

  // check if the dragon has touched the roof of the castle
  if(newAABB.y <= this.gameWorld.castleRoof)
  {
    // stop downward movement and set position to the roof of the castle
    this.dragonSpeed.y = 0;
    this.dragonPosition.y = this.gameWorld.castleRoof + newAABB.getHeight() * 0.5;

    // dragon must die
    this.dragonDeath();
    // stop the update loop
    this.gameWorld.unscheduleUpdate();
  }
  // apply gravity only if game has started
  else if(this.mustApplyGravity)
  {
    // clamp gravity to a maximum of MAX_DRAGON_SPEED & add it
    this.dragonSpeed.y = ( (this.dragonSpeed.y + GRAVITY) < MAX_DRAGON_SPEED ) ? MAX_DRAGON_SPEED : (this.dragonSpeed.y + GRAVITY);
  }

  // update position
  this.dragonPosition.y += this.dragonSpeed.y;
  this.dragonSprite.setPosition(this.dragonPosition);
};

We start by calling the getBoundingBox() function of the dragonSprite class that will return a cc.Rect to represent the sprite's bounding box. We use this bounding box to check for collisions with the roof of the castle. If a collision has occurred, we stop the dragon from falling and instead position it right on top of the castle roof. We then tell the dragon to die by calling dragonDeath and unscheduling the update function of the GameWorld class. If no collision is found, the game should continue normally. So, apply some gravity to the dragon's speed. Finally, update the dragon's position based on the speed.

The update function of the TowerManager class is responsible for scrolling the towers from right to left and repositioning them once they leave the left edge of the screen. The code is as follows:

TowerManager.prototype.update = function(){
  var tower = null;
  for(var i = 0; i < this.towers.length; ++i)
  {
    tower = this.towers[i];
    // first update the position of the tower
    tower.position.x -= MAX_SCROLLING_SPEED;
    tower.lowerSprite.setPosition(tower.position.x, tower.lowerSprite.getPositionY());
    tower.upperSprite.setPosition(tower.position.x, tower.upperSprite.getPositionY());
 
    // if the tower has moved out of the screen, reposition them at the end
    if(tower.position.x < this.towerSpriteSize.width * -0.5)
    {
      this.repositionTower(i);
      // this tower now becomes the tower at the end
      this.lastTowerIndex = i;
      // that means some other tower has become first
      this.firstTowerIndex = ((i+1) >= this.towers.length) ? 0:(i+1);
    }
  }
};

The update function of the TowerManager class is quite straightforward. You start by moving each tower MAX_SCROLLING_SPEED pixels to the left. If a tower has gone outside the left edge of the screen, reposition it at the right edge. Pay attention to how the lastTowerIndex and firstTowerIndex variables are set. The last tower is important to us because we need to know where to place subsequent towers. The first tower is important to us because we need it for collision detection.

Our dragon would really love to just keep flying and not run into anything, but that doesn't mean we don't check for collisions. The code is as follows:

checkCollisions:function() {
  // first find out which tower is right in front
  var frontTower = this.towerManager.getFrontTower();

  // fetch the bounding boxes of the respective sprites
  var dragonAABB = this.dragonManager.dragonSprite.getBoundingBox();
  var lowerTowerAABB = frontTower.lowerSprite.getBoundingBox();
  var upperTowerAABB = frontTower.upperSprite.getBoundingBox();

  // if the respective rects intersect, we have a collision
  if(cc.rectIntersectsRect(dragonAABB, lowerTowerAABB) || cc.rectIntersectsRect(dragonAABB, upperTowerAABB))
  {
    // dragon must die
    this.dragonManager.dragonDeath();
    // stop the update loop
    this.unscheduleUpdate();
  }
  else if( Math.abs(cc.rectGetMidX(lowerTowerAABB) - cc.rectGetMidX(dragonAABB)) <= MAX_SCROLLING_SPEED/2 )
  {
    // increment score once the dragon has crossed the tower
    this.incrementScore();
  }
},

Since the dragon can only collide with the tower that is in the front, there is no point checking for collisions with all the towers. After asking the TowerManager class for the tower in the front, we proceed to read the bounding box rectangles for the dragon and the tower's lower and upper sprites. We then check for an intersection between the dragon and the tower's rectangles. If a collision is found, we tell the dragon to die by calling the dragonDeath method of the DragonManager class and unscheduling the update function of the GameWorld class. If the dragon manages to clear the tower, we increment the score by one in the incrementScore function.