HTML and CSS Reference
In-Depth Information
// Remove the previous image
droppedPiece.parentNode.removeChild(droppedPiece);
// Remove the drop effect from the target element
e.target.classList.remove('drop');
// See if the piece needs to be promoted
kingMe(newPiece);
■
When you implemented the
isValidMove()
function the rule that prevents the piece from moving back-
wards only applies to “b” and “w” prefixes. Since a king has a capital “B” or “W” this rule doesn't apply so the king
can move backwards. Also, when jumping a piece, the comparison was done after first converting to lowercase. This
will allow a white piece to jump either a black piece or a black king.
Tip
4.
Try moving the pieces around until you move one to the last row. You should see the
image change to indicate this is now a king as shown in Figure
14-6
.
Figure 14-6.
The check board with a king
5.
once you have a king, try moving it backwards and also try jumping pieces with it.
Moving in Turn
You've probably noticed that the application does not enforce each player alternating turns. You'll implement
this logic now. After each move is made (
drop
event processed), you'll set the
draggable
attribute to false for all
the pieces of the color that just moved. That will keep you from moving a piece of the same color. However there
is one exception to this rule that will require a little extra work. If you jump a piece, then that same piece can
make another move as long as it is another jump.
