Chapter 2. Getting Started with DOM-based Game Development

We've got an idea about what we are going to learn in the whole book in Chapter 1, Introducing HTML5 Games. From this chapter onwards, we will go through a lot of learning-by-doing sections, and we will focus on one topic in each section. Before digging deeply into the cutting-edge CSS3 animations and HTML5 Canvas game, let's start with traditional DOM-based game development. We will warm up with some basic techniques in this chapter.

In this chapter, we will be:

• Setting up our first game—Ping Pong
• Learning basic positioning with the jQuery JavaScript library
• Getting mouse inputs
• Creating the Ping Pong game that displays the scores
• Learning to separate data and view rendering logic

We will create a Ping Pong game that a player plays against the computer via mouse input. You can try the game at http://makzan.net/html5-games/pingpong/.

The following screenshot shows the look of the game at the end of this chapter:

So, let's get on with making our Ping Pong game.

Note

At the time of writing the book, the jQuery version is 2.1.3. The jQuery functions that we used in the examples are basic functions that should work in future versions too.