HTML and CSS Reference
In-Depth Information
• How to trigger a Game Over
This section's work will happen in two groups of steps.
Group 1—Making the application interactive.
Group 2—Capturing user input.
• Step 1: Create a keyboard
listener.
• Step 2: Add mouse control.
• Step 3: Add touch support.
• Step 4: Add control info via
HTML.
• Step 1: Move the paddle horizontally.
• Step 2: Make the ball move.
• Step 3: Enable edge detection for the paddle and ball.
• Step 4: Enable collision detection.
• Step 5: Remove hit bricks.
Let's get started.
6.3.1. Animating game elements
Diving into the first set of tasks, let's make the paddle move horizontally. After that, you'll
make the ball move diagonally.
Canvas data processing
When creating Canvas drawings through JavaScript, the browser re-creates all graphical
assets from scratch because it uses bitmap technology. Bitmap graphics are created by stor-
ing graphical data in an organized array. When the data is processed by a computer, Canvas
spits out pixels to create an image. This means that Canvas has a memory span shorter than
that of a goldfish, so it redraws everything constantly.
If you're wondering why Canvas infinitely re-creates its images, you aren't alone. Many
people have asked why Apple used a bitmap-based system when a solution exists that
doesn't require everything to be constantly redrawn (Scalable Vector Graphics, or SVG).
Canvas, though, is currently stomping SVG in popularity. One could explain Canvas's tri-
umph through the lack of awareness and knowledge developers have of SVG.
