HTML and CSS Reference
In-Depth Information
// Define an array to store 32 pieces
var pieces = new Array(32);
loadImages();
drawBoard();
createPieces()
drawAllPieces();
// Draw the chess board
function drawBoard() {
9.
save your changes and press F5 to start the application. You should now see the
chess pieces as shown in Figure 10-4 .
Figure 10-4. The chess board with the pieces displayed
When you create an Image object and set its src property, the specified image file is downloaded asyn-
chronously. It's possible that the file has not been loaded before the drawImage() function is called. If this happens,
the image is not displayed. If one or more chess pieces is not displayed, try refreshing the page, which should take
care of this. You can implement the onload event handler for each Image object, which is called when the image has
been loaded. This is a bit complicated since you'll need to wait for all 12 images to be loaded. However, in the next
section you'll just add a pause before drawing the images, which should resolve this.
Note
Adding Simple Animation
To demonstrate simple animation using canvas, you'll move the pieces around. The function that draws each
piece, computes the location based on the square that the piece is in. To move a piece, you just need to update
the x and/or y property and then redraw it.
 
 
Search WWH ::




Custom Search