Summary

You learned a lot in this chapter about the basic techniques of creating a simple Ping Pong game with HTML5 and JavaScript. Specifically, we created our first HTML5 game—Ping Pong. In the game, we used jQuery to manipulate DOM objects. We were able to use the mouse event to get the cursor position. We used a very simple method to detect collisions with the bounding box. In the logic, we separated data manipulation and view rendering. We also discussed how to create a game loop and move the ball and paddles.

Now that we've warmed up by creating a simple DOM-based game, we are ready to create more advanced DOM-based games with new features from CSS3. In the next chapter, we will create games with CSS3 transition and transformation.