Assignment: Peg Game

Create a web page that allows the user to play the Triangle Peg Game. Here are images of the starting position in several representations of the game:

The board consists of 15 holes, and 14 removable pegs. Peg colors are merely decorative. In the initial position, all 14 pegs are in the board, leaving one empty hole (empty space).

Rules: 1. You must jump a peg over another peg, but only if there is an open space. If there is more than one legal move, you may choose whichever. 2. Each peg you jump over must be removed, leaving a hole. 3. You win if only one peg is left at the end of the game.

Here is an example of the two possible first moves assuming the initial empty position is at the top of the board (at position one). The examples show only the first three rows of the board where the numbers indicate pegs and the holes are "X"'s. Thus there should be two legal moves: a peg from the third row into the top empty space, removing one of the pegs in the second row.

 x 2 3 4 5 6 

becomes

 4 x 3 x 5 6 

or

 6 2 x 4 5 x

Requirements for your Web Page:

The user will play by clicking on a peg and then clicking on the empty hole to which the peg should move. This move will be legal if and only if the moving peg crosses over exactly one occupied hole and no unoccupied holes.

There should be at least three different peg colors.

If the user attempts an illegal move, display a message indicating this.

When no legal moves remain, display a message. If there is only one peg remaining, "Victory!". If two pegs remain, "So close! Try again!". If three pegs remain, "You are improving! Try again!". If four or more remain, "Better luck next time.".

There should be a button that resets the board to the default starting position (see above), and another button that starts with the position of the initial empty hole determined randomly.

For simplicity, all files, including images, should reside in the same directory/folder. Use only relative (not absolute) names for the files in your HTML.

Extra Credit:

Move the pegs via a drag & drop mechanism. Check out the dragNdrop.html and its .js file from the source code we reviewed in class.

Submitting Your Page:

Submit your several files as a zip file to the dropbox. Make sure you include in your zip file all the .html files, as well as any image files (.gif and .jpg, for example) that your page references and any external style sheets or .js files. The main .html file (the one I will access with my browser) should be called pegs.html. Don't forget this!

HTML CODE:

Roses are red

Violets are blue

onmousedown = "grabber(event);"> candy

onmousedown = "grabber(event);"> cats

onmousedown = "grabber(event);"> cows

onmousedown = "grabber(event);"> glue

onmousedown = "grabber(event);"> is

onmousedown = "grabber(event);"> is

onmousedown = "grabber(event);"> meow

onmousedown = "grabber(event);"> mine

onmousedown = "grabber(event);"> moo

onmousedown = "grabber(event);"> new

onmousedown = "grabber(event);"> old

onmousedown = "grabber(event);"> say

onmousedown = "grabber(event);"> say

onmousedown = "grabber(event);"> so

onmousedown = "grabber(event);"> sticky

onmousedown = "grabber(event);"> sweet

onmousedown = "grabber(event);"> syrup

onmousedown = "grabber(event);"> too

onmousedown = "grabber(event);"> yours

JS CODE:

// dragNDrop.js

// An example to illustrate the DOM 2 Event model

// Allows the user to drag and drop words to complete

// a short poem

// Does not work with IE browsers before IE9

// Define variables for the values computed by

// the grabber event handler but needed by mover

// event handler

var diffX, diffY, theElement;

// *******************************************************

// The event handler function for grabbing the word

function grabber(event) {

// Set the global variable for the element to be moved

theElement = event.currentTarget;

// Determine the position of the word to be grabbed,

// first removing the units from left and top

var posX = parseInt(theElement.style.left);

var posY = parseInt(theElement.style.top);

// Compute the difference between where it is and

// where the mouse click occurred

diffX = event.clientX - posX;

diffY = event.clientY - posY;

// Now register the event handlers for moving and

// dropping the word

document.addEventListener("mousemove", mover, true);

document.addEventListener("mouseup", dropper, true);

// Stop propagation of the event and stop any default

// browser action

event.stopPropagation();

event.preventDefault();

} //** end of grabber

// *******************************************************

// The event handler function for moving the word

function mover(event) {

// Compute the new position, add the units, and move the word

theElement.style.left = (event.clientX - diffX) + "px";

theElement.style.top = (event.clientY - diffY) + "px";

// Prevent propagation of the event

event.stopPropagation();

} //** end of mover

// *********************************************************

// The event handler function for dropping the word

function dropper(event) {

// Unregister the event handlers for mouseup and mousemove

document.removeEventListener("mouseup", dropper, true);

document.removeEventListener("mousemove", mover, true);

// Prevent propagation of the event

event.stopPropagation();

} //** end of dropper