Creating the HTML structure
In this task, we are going to kick-start the project by creating the file structure, ensuring that the essential files are ready.
Prepare for lift off
We need several things to get started. First, we will create an empty project directory. Then, we will create an index.html file, a folder where we will put the CSS styling files, and a folder to put the JavaScript logic files in.
During the missions, we need several graphics files, including the background and buttons; you can find the graphics from the sample code. Put all the images into a directory named images. The created file structure is shown in the following screenshot:
Engage thrusters
Use the following steps to create the basic game structure:
- We will enter the following HTML code in the
index.htmlfile. It is a basic HTML structure that includes the CSS file in the head and the script tag at the bottom:<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Color Quest</title> <link rel="stylesheet" href="game.css"> </head> <body> <!-- game content here --> <script src='js/game.js'></script> </body> </html>
- Right after the opening of the
<body>tag and before our<script>tag, we add the following HTML code for the game page. The content is divided into four parts: header, game section, the how-to-play section, and footer. The game section is where all the game logic happens. The#element-templateis the template of game elements that will be used for cloning later:<header> <div class="row"> <h1>Color Quest</h1> </div> </header> <section id="game"> </section> <section class='how-to-play'> <div class="row"> <h2>How to Play?</h2> <p>Composite your card to match the given pattern.</p> </div> </section> <footer> <div class="row"> <p>This game is an example for the HTML5 Games Hotshot book. Free for personal and commerical use.</p> </div> </footer> <div id='element-template'> </div> - Add the following JavaScript to the
game.jsfile. It acts as the entry point of the game logic:(function(){ // Entry Point var init = function() { }; init(); // start the game })(); // self-executing function.Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Objective complete – mini debriefing
We have created a very basic structure of the game. The following sections explain what we have done.
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:
Modularizing the logic
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.
Variable scope in JavaScript
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.
Classified intel
For performance, we usually place scripts at the end of Document Object Model (DOM) and just before the closing of the </body> tag. This is because script loading may block the loading of DOM and cause the webpage to load slower. For more details, please have a look at the Yahoo performance rule, Put Scripts at the Bottom, at http://developer.yahoo.com/performance/rules.html#js_bottom.
