Canvas - HTML5 with Visual Studio 2012 - page 225

Listing 10-4. Drawing the chess pieces

// Draw a chess piece
function drawPiece(p) {
if (!p.killed)
chessContext.drawImage(p.image,
(75 - p.width) / 2 + (75 * p.x),
73 - p.height + (75 * p.y),
p.width,
p.height);
}

// Draw all of the chess pieces
function drawAllPieces() {
for (var i = 0; i < 32; i++) {
if (pieces[i] != null) {
drawPiece(pieces[i]);
}
}
}

7. now you need to create 32 instances of the ChessPiece class and specify all of the

appropriate properties. Add the createPieces() function shown in Listing 10-5.
This function creates the instances of the ChessPiece class storing them in the
pieces[i] array and sets the properties of each one.

■ since this is rather long and tedious, I made this function available in the source code download as a
separate file. If you prefer, instead of typing the function from Listing 10-5, you can find the createPieces.js file
in the Chapter 10 folder and drag this to the scripts folder in the solution Explorer. Then add this reference in the
head section:

Tip

<script src = "~/Scripts/createPieces.js"></script>

Listing 10-5. Implementing the createPieces() function
function createPieces() {
var piece;

// Black pawns
for (var i = 0; i < 8; i++) {
piece = new ChessPiece();
piece.image = imgPawn,
piece.x = i;
piece.y = 1;
piece.height = 50;
piece.width = 28;

pieces[i] = piece;
}