HTML and CSS Reference
In-Depth Information
9.
Press F5 to start the application. Try dragging an image to a red square and you
should see the expected visual feedback as shown in Figure
14-5
.
Figure 14-5.
Displaying the drag and drop visual feedback
Enforcing the Game Rules
You've probably noticed that you can move a piece to any red square. The current implementation doesn't
enforce any rules to ensure a legal move is being made. You'll now add that logic. This will be needed by the
following events:
dragover
- to set the
dropEffect
to “none” for illegal moves
•
dragenter
- to change the style only for valid drop locations
•
drop
- to only perform the move if it's a legal move
You'll implement an
isValidMove()
function that will evaluate the attempted move and return false if this is
an illegal move. Then you'll call this function in each of the three events listed above.
•
Verifying a Move
Fortunately, the rules in Checkers are fairly simple. Because the
dragover
event handler is not added to the white
squares, dropping a piece there is already disabled, which further simplifies the work needed. The rules that
you'll enforce are:
1.
You cannot move to a square already occupied.
2.
Pieces can only more forward.
3.
Pieces can only move one space diagonally, or two spaces (diagonally) if jumping
an occupied square.
4.
You can only jump a piece of a different color.
5.
A jumped piece must be removed from the board.
