Acknowledgments

Figure 2-2: 
The main menu lets the user access information about the game.
Playing the game
When the actual game begins, the game elements—the jewel board, player name, and cur-
rent score—occupy most of the screen, but the player needs to be able to exit back to the 
main menu. I enable this by using a small slice of the screen to make a status or toolbar. See 
Figure 2-3 for a sketch of the game area.
www.itbookshub.com

---

C H A P T E R 2
T A K I N G T H E F I R S T S T E P S
23
Figure 2-3: 
The sketch of the game screen includes a grid and space for a toolbar.
High score
When the game ends, the application switches to a high score list showing the top scores 
along with the player names. If the player achieved a score that’s high enough, he’s asked to 
enter his name, after which the score is entered into the list. This screen has an option to 
return to the main menu. The game uses a locally stored high score list based on WebStorage. 
The sketch in Figure 2-4 shows the basic layout of the high score list.

---

H T M L 5 G A M E S
24
Figure 2-4: 
This sketch shows a typical high score list.
Creating the Application Skeleton
You don’t need special tools or applications to follow the development of the game. When 
you get to the WebSocket discussion in Chapter 13, you do need to install Node.js and set it 
up on your web server. For everything else, however, your favorite text editor and a simple 
image editor will do.
Many web developers use libraries such as jQuery and Prototype so they don’t have to deal 
with the trivial parts of web development, such as selecting and manipulating DOM ele-
ments. Often, you’ll find that these libraries include a lot of functionality that you aren’t 
using. It’s sometimes a good idea to ask yourself if you really need a 50–100K library or if 
something simpler and smaller will do, especially when developing for mobile platforms 
where a fast Internet isn’t guaranteed.
I generally don’t use third-party libraries in this book in order to better show the core funda-
mentals. Feel free to use other libraries to make things easier in your own projects, but pay 
attention to what functionality you actually need so you don’t add unnecessary bloat to your 
project. The MicroJS website (
http://microjs.com
) features a collection of micro libraries 
that focuses on particular areas rather than elaborate frameworks.

---