HTML and CSS Reference
In-Depth Information
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 (, 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) {
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) {
// 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
Search WWH ::

Custom Search