HTML and CSS Reference
In-Depth Information
Listing 11-10. Implementing the movePiece() function
function movePiece(oStart, startID, end, pieceStore) {
computeRowColumn(oStart, end);
var startUpdateReq = pieceStore.put(oStart, startID);
startUpdateReq.onsuccess = function (event) {
if (moveNumber > 7) {
chessContext.font = "30pt Arial";
chessContext.fillStyle = "black";
chessContext.fillText("Checkmate!", 200, 220);
This code first computes the row and column properties using the computeRowColumn() function that you
created earlier. It then updates the object. In the onsuccess event handler it increments the moveNumber variable
and draws the board and all of the pieces using the existing functions. Finally, if this is the last move, the timer is
cleared and the “Checkmate!” text is drawn on the canvas.
Starting the Animation
The last step is to start the timer that will cause the makeNextMove() function to be called. You'll do this in the
onsuccess event handler for the open() call. Add the code shown in bold:
var request ="Chess", 2);
request.onsuccess = function (event) {
db =;
// Add the pieces to the board
// Draw the pieces in their initial positions
// Start the animation
timer = setInterval(makeNextMove, 2000);
Save your changes and press F5 to start the application. You should see the alert letting you know that the
database is being configured since you changed the database version. After a series of moves you should see the
completed board shown in Figure 11-5 .
Search WWH ::

Custom Search