2D Canvas: low-level, 2D graphics rendering - HTML5 in Action - page 232

• Step 4: Calculate the width and height of rectangular bricks.
• Step 5: Color the bricks.
• Step 6: Create the game ball.
• Step 7: Create the paddle.
6.2.1. Creating the main engine components
You're going to place all proceeding JavaScript listings you write into a single self-ex-
ecuting function. Why would we have you do this? Because it allows you to keep variable
names from appearing in the global scope and prevents conflicts with code from other files.
Optional HTML5 Canvas companions
Before you proceed, we strongly recommend that you download and print nihilogic's
HTML5 Canvas Cheat Sheet for reference: http://blog.nihilogic.dk/2009/02/html5-canvas-
cheat-sheet.html . Another great companion is WHATWG's (Web Hypertext Application
Technology Working Group) Canvas element document at http://www.whatwg.org/specs/
web-apps/current-work/multipage/the-canvas-element.html . It provides detailed docu-
mentation about the Canvas element's inner workings, meant more for browser vendors but
very useful for the curious developer.
Step 1: Create the main engine components
Fill game.js with the code in listing 6.2 . The listing has you create a Canvas engine object.
Instead of declaring variables and functions, the object uses methods (the equivalent of
functions) and properties (act like variables). For example, you can access the number of
bricks on a page by declaring var bricks = {count: 20, row: 3, col:
2 }; and then calling bricks.count to get the current value. For more information
on working with JavaScript objects, please see https://developer.mozilla.org/en-US/docs/
JavaScript/Guide/Working_with_Objects .