Showing different quests

In this task, we are going to show how to advance to the next level when the player's composition matches that of the quest compositions in the current level.

Engage thrusters

This time, we need quest-level data in the quest.js file to be accessible from another file, so we need to attach the questLevels and questData methods to the game scope rather than the original local scope:

1. In the quest.js file, we change the questLevels declaration from var questLevels to game.questLevels.
2. We apply the same to questData:

   // from
   var questData = questLevels[level]; 
   // to
   var questData = game.questLevels[level];

3. In the scenes.js file, we display the level with the following function:

   gameScene.updateLevelInfo = function(level) {
     document.getElementById('stage').textContent = "Stage "+ level;
   };

4. At last, we modify the game flow in the game.js file to count the level:

   game.flow = {
     currentLevel: -1,
     maxLevel: game.questLevels.length - 1,
     startOver: function() {
       ...
       this.currentLevel = -1;
     },
     nextLevel: function() {
       this.currentLevel+=1;
       if (this.currentLevel>= this.maxLevel) this.currentLevel = this.maxLevel;
   
       game.gameScene.updateLevelInfo(this.currentLevel+1); 
       // when displaying level, we start from 1 instead of 0, so +1 here.
       ...
     },
     ...
   }

Objective complete – mini debriefing

The level up is done by counting the current level and selecting the level from the questLevels array. The nextLevel method is used to increase the currentLevel counter. Moreover, this method is called once startButton is clicked from the menu. Therefore, it will increase the currentLevel counter at the beginning. This is why we set the initial value of currentLevel to -1. This will ensure that it selects the first level once the game starts that is at index 0 of the level array. We reset currentLevel in the startOver method once the game is over. On the other hand, we display the current level at the top of the game inside the #stage element. Therefore, we also update that wording every time the level is up.