Mission briefing

We are going to create a matching game. This game presents a combination of patterns to the player, and some of these patterns overlap each other. Players analyze the patterns and then select them in the correct sequence so that the composition matches the provided one. You may visit the URL http://makzan.net/html5-games/color-quest/ to play the example game in order to have a better understanding of what we will build throughout this project.

The following screenshot shows the final result of this project. The upper part is a timer, the part to the left shows the quest, the right part is the composition of the player, and the lower part is the deck of patterns.

Why is it awesome?

A simple matching game like this is a perfect way to get you warmed up with the HTML5 games' development rhythm. What we will learn in this project is the foundation to build more complicated games later in this book.

This game uses what we are familiar with: HTML element interaction and styling in CSS. What's new, is JavaScript logic. This project will show us how to convert the game rule into code. We will also learn how to separate logic into different parts with different responsibilities.

Your Hotshot objectives

We'll perform the following tasks in this project:

• Creating the HTML structure
• Managing the game scenes
• Representing the quest pattern composition
• Placing the patterns on the deck
• Selecting the pattern
• Comparing players and compositions of the quest
• Showing different quests
• Counting down the game

Mission checklist

In this game, we are going to stick to plain JavaScript without using a library. This will help us get started with a basic foundation in JavaScript.

Note that writing JavaScript for games is a little bit different from writing it for a web page. Game logic requires well-structured code to ensure the logic is easy to read and maintained. The following essays provide an in-depth discussion on writing JavaScript in the right way:

• JavaScript best practices: http://www.thinkful.com/learn/javascript-best-practices-1/
• JavaScript the right way: http://www.jstherightway.org