HTML and CSS Reference
In-Depth Information
Figure 6.4. Canvas Ricochet's objective is to bounce a ball via a paddle to break bricks. When the ball goes out of
bounds, the game shuts down. You can play the game now at and download all
the files needed to complete your own Canvas Ricochet game from .
Although overlap detection and advanced animation might sound scary, no prior know-
ledge is necessary, and we'll walk you through each step of the way.
In this section, you'll learn
• How to use the Canvas API to dynamically draw squares and circles, then shade
them with specific coloring techniques (solid colors and gradients)
• How to use basic visual programming concepts that can be applied to other lan-
• How to draw an image via the Canvas API
In this section, you'll create the main game engine and the game's visual assets in 7 steps:
• Step 1: Create the main engine components.
• Step 2: Create HTML5-optimized animation.
• Step 3: Display a background image.
Search WWH ::

Custom Search