Build an HTML5 Game

Chapter 3. Game Logic

At this point, we’ve created an intro screen with a New Game button and a single bubble that a player can fire off the screen. In this chapter, we’ll turn the Bubble Shooter into more of a game. You’ll learn how to draw the game board and display the level to the player, and then learn about collision detection.

Collisions are central to many games and happen when sprites touch. Once you can detect collisions, you can write code that makes the sprites react to them. In the Bubble Shooter, collisions occur when a fired bubble slams into a bubble in the game grid. We’ll implement two reactions: the fired bubble will stick to the board if it doesn’t form a color group of three or more bubbles, or it will cause a valid group to ...