HTML and CSS Reference
In-Depth Information
// Define an array to store 32 pieces
var pieces = new Array(32);
Add the loadImages() function, shown in Listing 10-3, to your script element after
the existing drawBoard() function.
Listing 10-3. Loading the image files
function loadImages() {
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";
imgKnightW.src = "Images/wknight.png";
imgBishopW.src = "Images/wbishop.png";
imgQueenW.src = "Images/wqueen.png";
imgKingW.src = "Images/wking.png";
now you're ready to define the chess pieces. You'll use a class definition that will
store the attributes needed to draw the chess piece. The image property contains
a reference to the appropriate Image object. The x and y properties specify the
square that the piece is in, from 0 to 7, left-to-right and top-to-bottom. The height
and width properties indicate the size of the image, which will vary depending on
the type of piece. The killed property is used to indicate if the piece has been
captured. Captured images are not displayed. Add the following code to the end of
the script element.
// Define a class to store the piece properties
function ChessPiece() {
this.image = null;
this.x = 0;
this.y = 0;
this.height = 0;
this.width = 0;
this.killed = false;
Add the code shown in Listing 10-4 to the end of your script element. This
implements the drawPiece() function that draws a single chess piece based on the
class properties. Finally, it provides a drawAllPieces() function that will draw each
of the pieces defined in the array.
Search WWH ::

Custom Search