jQuery 1.4 Animation Techniques - Index of

Your browser doesn't support the canvas element!
(function($) {
})(jQuery);
[ 291 ]
Chapter 10
2. Save the file as canvas-game.html. We also require a very basic stylesheet for
our game. All we're styling is the element itself. Create a new stylesheet
containing the following style rules:
canvas {
border:1px solid #000; margin:auto; display:block;
outline:none;
background:url(../img/bg.gif) no-repeat;
}
3. Save this file in the css directory as canvas-game.css.
What just happened?
The main element on the page is of course the element. The only difference
between this and the element used in previous examples is that we have set the tabindex
attribute on it so that it can receive keyboard events, which is necessary for detecting and
reacting to the input from the user. We're also using jQuery in this example and using the
standard anonymous function + $ aliasing construct we've used throughout the book.
The styles we've used simply position the element in the center of the page, give
it a border, and remove the dotted outline that appears around focused elements in some
browsers. We also set a background image on the element.
The background image applied to the element helps to set a scene for our game,
and using CSS to set a background image on the element is much easier than
drawing the image within it.