HTML and CSS Reference
In-Depth Information
9.
Modify the
drop()
function to also add "jumponly" to the
classList
when creating
the new
img
element by adding the code shown in bold.
// 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;
if (droppedPiece.draggable){
newPiece.draggable = true;
newPiece.classList.add("jumpOnly");
}
newPiece.classList.add("piece");
10.
now you'll need to clear the "jumponly" text from the
classList
when the next
move is completed. You'll do that in the
enableNextPlayer()
function by adding the
code shown in bold.
function enableNextPlayer(piece) {
// Get all of the pieces
var pieces = document.querySelectorAll('img');
i = 0;
while (i < pieces.length) {
var p = pieces[i++];
// If this is the same color that just moved, disable dragging
if (p.id.substr(0, 1).toUpperCase() ===
piece.id.substr(0, 1).toUpperCase()) {
p.draggable = false;
}
// Otherwise, enable dragging
else {
p.draggable = true;
}
p.classList.remove("jumpOnly");
}
}
11.
now test the application and make sure that each player must alternate turns. Also,
verify that you can make successive jumps.
