HTML and CSS Reference
In-Depth Information
movePiece(oStart, startID, end, pieceStore);
Now add the following code to the end of the script element to implement the displayCapturedPieces()
function displayCapturedPieces() {
var xact = db.transaction(["piece"]);
var textOut = "";
var pieceStore = xact.objectStore("piece");
var index = pieceStore.index("piecePosition");
var keyRange = IDBKeyRange.lowerBound("x");
var cursor = index.openCursor(keyRange);
cursor.onsuccess = function (event) {
var item =;
if (item) {
textOut += " - " + item.value.color +" " +
item.value.type + "\r\n";
else if (textOut.length > 0)
alert("The following pieces were captured:\r\n"+textOut);
This code creates a read-only transaction using only the piece store. It then gets the store and its
piecePosition index. It defines a key range using a lower bound of “x”. This will only return objects that begin
with “x” or greater. Since the pieces on the board will have a position that starts with “a” through “h” these will
be excluded. The code then iterates through the cursor and concatenates the piece details into a text string. The
result is displayed using an alert() function.
Be aware that the string comparisons in the key range are case sensitive. If you had used an upper-
case “x”, this would not have worked since a lowercase “a” comes after an uppercase “x”. The W3C specification
provides some details on how comparisons are supposed to work. For details, see the article at: .
Now you'll need to call this function after the animation is completed. Add the following line of code to the
makeNextMove() function after the “Checkmate!” text is displayed:
Save your changes and press F5 to start the application. After the animation has finished you should see the
alert shown in Figure 11-6 .
Search WWH ::

Custom Search