Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

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!

!!! i need the code in java script and also CSS fast please!!!

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Spomenik Monument Database

Authors: Donald Niebyl, FUEL, Damon Murray, Stephen Sorrell

1st Edition

0995745536, 978-0995745537

More Books

Students also viewed these Databases questions

Question

Understand corporate and HRM strategy.

Answered: 1 week ago

Question

Define the term Working Capital Gap.

Answered: 1 week ago