HTML and CSS Reference
In-Depth Information
Listing 11-8.
Implementing the computeRowColumn() function
function computeRowColumn(oStart, end) {
oStart.pos = end;
switch (end.substring(0, 1)) {
case "a": oStart.column = 0; break;
case "b": oStart.column = 1; break;
case "c": oStart.column = 2; break;
case "d": oStart.column = 3; break;
case "e": oStart.column = 4; break;
case "f": oStart.column = 5; break;
case "g": oStart.column = 6; break;
case "h": oStart.column = 7; break;
}
oStart.row = 8 - parseInt(end.substr(1, 1));
}
The
oStart
parameter is the object from the
piece
store that was found at the starting position (“e2” in our
example). The
end
parameter is the ending position, “e3”, which is copied to the
pos
property since this will be the
piece's new position.
This code then uses a
switch
statement to convert the “a” - “h” file notation into a “0” - “7” coordinate. This
is then stored in the
column
property. The
row
property is computed by taking the last digit from the position and
subtracting it from 8.
Making a Move
Just like you did in Chapter 10, you'll use a timer to make the next move every 2 seconds. You'll need a timer
variable so you can clear the
timer
when the animation is done. You'll also need to keep track of the current
move. Add the two variables shown in bold to the script element just before the
drawBoard()
method is called.
// Get the canvas context
var chessCanvas = document.getElementById("board");
var chessContext = chessCanvas.getContext("2d");
var moveNumber = 1;
var timer;
drawBoard();
Moving a piece will require making up to five database calls:
1.
Get the next object from the
move
store (this defines the start and end positions).
2.
Get the object at the start position.
3.
Get the object at the end position (there will only be one if the move is capturing
a piece).
4.
Remove the object at the end position (this step will only be needed on some moves).
5.
Update the object at the start position (to move it to the end position).
