HTML and CSS Reference
In-Depth Information
Figure 6.8. Using previous code snippets, you created a ball, paddle, and bricks with gradients. After refreshing
your browser, the current result should look like this.
So far, you've created all the core graphic assets of Canvas Ricochet. Because nothing
moves, the game is as useless as a rod without a reel. In the next section, we'll teach you
how to bring your game's static design to life!
6.3. Breathing life into Canvas elements
Your game looks cool right now, but it doesn't do anything. Using several different tech-
niques, we'll show you how to animate game elements, detect collisions, and move the
paddle with a keyboard/mouse/touch.
In this section, you'll learn
• How to dynamically move objects around the screen
• How to create responses between overlapping objects
• How to prevent moving objects from leaving the
<canvas>
boundaries
• How to remove basic objects (bricks) from the game
• How to create keyboard, mouse, and touch controls from scratch
