User Interface Design :: Projects :: Checkers
Problem
This assignment explores the following topics related to GUI input and output:
- the object approach;
- the stroke approach (also called vector graphics);
- the pixel approach;
- handling events sent from a model to a view
- event handling
- hit detection
- dragging
- selection
- enabling/disabling commands based on view state
In this project you will implement a view that displays a checkers game. You'll implement using a mix of component, stroke, and pixel techniques. You will also implement input handling for the checkerboard so that the user can pick up checkers with the mouse and drag them around, and remove jumped checkers and replace checkers with kings.
You will need to use HTML5 Canvas on this assignment. You may find Mozilla's Canvas Tutorial helpful.
Instructions
Download this zip file to use to start your project. Feel free to change these files as you see fit. The archive contains the following files:
- index.html: a skeleton file for your user interface.
- mainLayout.css: a stylesheet for your index file.
- checker.js: a Javascript file containing the Checker class.
- board.js: a Javascript file containing the Board class.
- boardEvent.js: a Javascript file containing the BoardEvent class.
- graphics: a folder containing all the graphics for the game.
Part 1: Board
Fill in the skeleton of index.html so that it displays a 400x400-pixel checkerboard. The upper left square should be gray. The number of squares across the board should be dynamically determined by the BOARD_SIZE variable in the code. This size defaults to 8x8, but you can change it to any value n by adding ?size=n to the end of the URL, e.g. index.html?size=16. No matter how many squares are in the checkerboard, it should always be 400x400 pixels. You can use either canvas (the stroke approach) or HTML elements (the object approach) to solve this part.
Part 2: Checkers
Display all the checkers on the board using HTML elements (the object approach). Four pictures are provided for you (red-piece.png, black-piece.png, red-king.png, and black-king.png, found in the graphics folder). Please don't replace them with different pictures.
Your view must update when the board changes so that it displays the current state of the board at all times. You can test this by clicking on the buttons, which produce various board configurations in the model.
Part 3: Move Feedback
When a checker moves from one place to another, draw a yellow arrow from the center of its old square to the center of its new square, appearing above all checkers. This arrow should persist until the next change to the board.
Part 4: Dragging Checkers
Add input handling to your Checkerboard, so that the user can drag checkers around.
Pressing and dragging in a square containing a checker should pick up the checker from the board. The checker should not make any abrupt jumps — neither when the user presses the mouse button, nor when the user starts moving the mouse. The checker should move smoothly with the mouse pointer, hovering over the other checkers on the board.
If the user releases the mouse button when the mouse pointer is over an empty square, the checker should be moved to that square using Board.move(). The board model should not be changed until then. If the mouse pointer is over a filled square, then the dropped checker should be put back where it was taken from.
If the mouse pointer leaves the checkerboard during the drag operation, the dragged checker may either follow it or stop wherever it is on checkerboard — the behavior is up to you. But if the mouse pointer moves back into the checkerboard, the checker should resume following the mouse. If the mouse button is released when the mouse pointer is off the checkerboard, the checker should be put back where it was taken from.
HINT: You will need to do mouse capture correctly to handle cases where the mouse pointer leaves the whole browser window. Attaching mouse listeners to the root of the view tree (document or window object) is the only way to get this behavior in HTML5.
Part 5: Checker Selection
To make the checkers game actually playable, we need two more abilities: removing checkers after they've been jumped, and changing a checker into a king when it reaches the back rank. Although it would probably be better to do this by adding logic to the backend model (for efficiency and error prevention), for the purpose of this project we will instead put the user in control of these features, by adding commands that remove a selected checker and make a checker into a king.
Add selection behavior. Clicking on a square with a checker in it should select that checker, and indicate the selection by coloring the square yellow. Clicking on an empty square should clear the selection. At most one checker can be selected at a time, and the highlighted square should always correspond to the checker actually selected. After the user drags and drops a checker, the dropped checker should be selected. Only checkers can be selected, so it should never be the case that an empty square is highlighted in yellow.
HINT: Remember that z-order changes may change event targeting, which in turn may affect event translation. If the mousedown event is received by one target (like a canvas), but the mouseup event is received by a different target (like a checker pulled to the top of the z-order), then the browser may not generate a click event.
Part 6: King and Remove Functionality
Add two buttons to the button bar, directly under the New Game button. The Remove Checker button should remove the selected checker. The Make King button should replace the selected checker with a king checker of the same color. Both buttons should be disabled when there is no selected checker, and the Make King button should be disabled when the selected checker is already a king.
Extension
If you found this assignment easy and you're inclined to go further, here are some ideas for optional improvements:
- Animate the checkers when they move.
- Draw the checkerboard in perspective so it is more obvious to the user which side they are playing.
- Do hit testing for the true area of a checker, so that clicking in the corner of a square doesn't pick up the checker.
- Support unlimited undo of checker moves, removes, and conversion to kings.
