Drag and Drop - HTML5 with Visual Studio 2012 - page 356

7. now add the code shown in bold to the isValidMove() function. The first part adds

the rule to make sure a jump is being made if jumpOnly is true. The second part sets
the jumped flag to indicate that this move is making a jump.

// These rule apply to all pieces
if (yStart === yEnd || xStart === xEnd)
return false; // Move must be diagonal

if (Math.abs(yEnd - yStart) > 2 || Math.abs(xEnd - xStart) > 2)
return false; // Can't move more than two spaces

if (Math.abs(xEnd - xStart) === 1 && jumpOnly)
return false; // Only jumps are allowed

var jumped = false;

// If moving two spaces, find the square that is jumped
if (Math.abs(xEnd - xStart) === 2) {
var pos = ((xStart + xEnd) / 2).toString() +
((yStart + yEnd) / 2).toString();
var div = document.getElementById(pos);
if (div.childElementCount === 0)
return false; // Can't jump an empty square
var img = div.children[0];
if (img.id.substr(0, 1).toLowerCase() === prefix.toLowerCase())
return false; // Can't jump a piece of the same color

// If this function is called from the drop event
// Remove the jumped piece
if (drop) {
div.removeChild(img);

jumped=true;

}
}

8. At the end of the isValidMove() function add the code shown in bold. This will

override the draggable attribute if a jump was made and add "jumponly" to the
classList .

if (drop) {
enableNextPlayer(source);

// If we jumped a piece, we're allowed to go again
if (jumped) {
source.draggable = true;
source.classList.add("jumpOnly"); // But only for another jump
}

}