Creating the HTML structure

The header, section, and footer arrangement follows a simple HTML5 content structure. We will put the game elements inside this structure, attached to the game. The following screenshot shows the HTML structure:

We separate the JavaScript logic into modules, and each separated file encapsulates one module. This allows us to tackle each part individually. The first JavaScript file we have is the game.js file. It is in charge of controlling the game flow. There are other different parts in this game, and for these parts, we are going to create different files with the purpose of using them for future tasks.

In JavaScript, we want to have as few global variables as possible. Variables are global when they are attached to the highest scope of the runtime environment. In a web browser, this refers to a variable that is attached to a window scope. A variable that is created with the var keyword lives inside the scope of the function that encloses it.

This is why we put all the logic inside a self-executing anonymous function. This ensures that by default, we will not pollute the global scope with our game logic variables. The following code block shows how to create each module with one global game variable and one local game variable inside a self-executing-anonymous function:

(function(){
  var game  = this.colorQuestGame = this.colorQuestGame || {};
})();

We will intentionally create one global variable named colorQuestGame to act as the namespace. In the later sections, we will put different logic modules into different files under the same global object.

The this.colorQuestGame || {}; declaration means that, by default, it will use the existing colorQuestGame variable if it was already declared previously. Otherwise, it will be a new empty object. We will put this line of declaration into every file.

This scoping feature is also useful when we need to encapsulate logic into private functions. For example, the following code shows how we can create private functions that are only accessible inside a specific scope to help extract the code:

Composition.createFromSequence = function(sequence) {
  // helper functions
  var privateHelperA = function() {}
  var privateHelperB = function() {}
  // end helper functions

  // use your private helper functions here.
}

Inside any method, we can declare local scoped functions to help extract the logic and to make the code more readable.