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

Chapter 8

Interacting with the Game

In This Chapter

• Capturing user input

• Working with touch events

• Binding inputs to actions

• Adding visual feedback to actions

IN THE PREVIOUS chapter, you implemented the first parts of the game display. So far, the display is just a static rendering of the jewel board, and the game doesn't react to any user input at all. In this chapter, you discover how to implement a new module that captures user input and enables the display and the rest of the game react to the input.

First, however, you walk through the different types of inputs available in the browser, paying special attention to touch-based input found in mobile devices such as smartphones and tablets. Using this knowledge, you return to the game and build a system that encapsulates the native input events and that enables you to translate these events into game actions.

After you implement the user input, you find out how to attach game actions to the display module to allow the player to select and swap jewels.

Capturing User Input

I'm sure you're more than familiar with basic keyboard and mouse events in desktop browsers, so here I focus on the more interesting topic of how these events behave on mobile devices with touch screens.

Mouse events on touch devices

Touch-enabled devices such as smartphones and tablets rarely come equipped with a mouse. Instead, they depend solely on interaction with the touch screen to navigate through applications and websites. The web, of course, ...