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
http://html5inaction.com/app/ch6/
and download all
the files needed to complete your own Canvas Ricochet game from
www.manning.com/crowther2/
.
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-
guages
• 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.
