HTML and CSS Reference
In-Depth Information
Figure 11-2.
The initial (blank) chess board
Configuring the Images
You will be using image files to represent the chess pieces. Before adding them to the canvas you'll need to create
an
Image
object for each one and specify its
src
attribute. You'll also put these into an array to make it easier to
programmatically select the desired image. Add the code shown in Listing 11-2 to the beginning of the
script
element that you just created, before the existing code.
Listing 11-2.
Adding the image objects
// Define the chess piece images
var imgPawn = new Image();
var imgRook = new Image();
var imgKnight = new Image();
var imgBishop = new Image();
var imgQueen = new Image();
var imgKing = new Image();
var imgPawnW = new Image();
var imgRookW = new Image();
var imgKnightW = new Image();
var imgBishopW = new Image();
var imgQueenW = new Image();
var imgKingW = new Image();
// Specify the source for each image
imgPawn.src = "Images/pawn.png";
imgRook.src = "Images/rook.png";
imgKnight.src = "Images/knight.png";
imgBishop.src = "Images/bishop.png";
imgQueen.src = "Images/queen.png";
imgKing.src = "Images/king.png";
imgPawnW.src = "Images/wpawn.png";
imgRookW.src = "Images/wrook.png";
