HTML and CSS Reference
In-Depth Information
// Define an array to store 32 pieces
var pieces = new Array(32);
drawBoard();
4.
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";
}
5.
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;
}
6.
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.
