HTML and CSS Reference
In-Depth Information
if (dragPiece &&
e.target.tagName === "DIV" &&
isValidMove(dragPiece, e.target, false)) {
e.target.classList.add('drop');
}
}
5.
For the
drop()
function, wrap the code that performs the drop inside an
if
statement that validates the move by adding the code shown in bold. This time, the
code is passing true for the third parameter to the
isValidMove()
function.
if (droppedPiece &&
e.target.tagName === "DIV" &&
isValidMove(droppedPiece, e.target, true)) {
// Create a new img on the target location
var newPiece = document.createElement("img");
newPiece.src = droppedPiece.src;
newPiece.id = droppedPiece.id.substr(0, 1) + e.target.id;
newPiece.draggable = true;
newPiece.classList.add("piece");
newPiece.addEventListener("dragstart", dragStart, false);
newPiece.addEventListener("dragend", dragEnd, false);
e.target.appendChild(newPiece);
// Remove the previous image
droppedPiece.parentNode.removeChild(droppedPiece);
// Remove the drop effect from the target element
e.target.classList.remove('drop');
}
6.
With these changes now in place, try running the application. You should only be
allowed to make legal moves. If you jump a checker it should be removed from the
board.
Promoting to King
In Checkers, when a piece moves all the way to the last row, it is promoted to a king. A king works just like a
regular piece except that it can move backwards. You'll now add code to check if a piece needs to be promoted.
To promote a piece you'll change the image that is displayed to indicate it is a king. You'll also change the prefix,
making it a capital “B” or “W”. Then you can allow different rules for kings.
You'll put all this logic in a single function called
kingMe()
and you'll call this every time a drop occurs. If the
piece is already a king or if it's not on the last row, the function just returns. Otherwise it performs the promotion.
