HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 4

Building the Game

In This Chapter

• Creating a module for the game board

• Encapsulating the game state

• Setting up the jewel board

• Implementing the game rules

• Reacting to jewel swaps

IN THIS CHAPTER, I show you how to implement the rules and game mechanics that control the jewel board. I walk you through all the necessary game logic and create a representation of the game board with which the rest of the application can interact. I show you how to encapsulate the state of the board in an isolated module that allows modifications to the board only when all the game rules are followed. In addition, I show you how to make sure that the board automatically reacts to the swaps and rearranges the remaining jewels accordingly.

I also discuss some of the issues that arise when the game must be able to use two different sources that control the board. The single-player experience relies on the local, client-side game logic described in this chapter, but the game must also work with a server-side implementation of the same rules.

Creating the Game Board Module

The core of the game mechanics is isolated from the display and input elements of the game. The board module you walk through in this chapter is a data model of the game state, specifically the current layout of jewels. The module exposes methods that the other modules, mainly the game screen, can use to interact with the game state. Because the board serves as a backend to the game display, the code in this chapter ...