Description
Project 1: Eight Puzzle
For your first project, you will develop the 8-puzzle game using Javascript
You are free to complete this project however you wish, as long as you use Javascript (it is your
choice if you want to use Bootstrap). In the class repository, I have provided you with sample code that
uses an HTML table (though no Bootstrap) with text elements inside the cells and Javascript to access
the elements of the table and switch numbers between them (i.e. script table.js. I have added some
code that is more functional between 19 - 25, and you should cut and past parts in the browser console
to see how it works. You MUST use this code in creating your puzzle solver, to make it work using
Javascript to check which element you click, whether the blank square is adjacent to it, whether the
puzzle is solved, etc. To be exact, you must use the code in file script table.js from lines 19 - 25 with
window.onload, then modify switch elems() and add functionality to create a working game. This is
a requirement! The final goal state should look like:
Figure 1: Goal State of puzzle
The beginning state should be the goal state so I can test more easily. Since the beginning state is
the goal state, your puzzle should be “solvable” in two moves (e.g. 2 moves to blank square then moves
back). I should be able to test this way by choosing a number of moves then moving in reverse order back
to the goal state. You must also include a button to scramble the squares and have the puzzle appear
when you open the page. Note that for the puzzle to be actually solvable, you cannot actually make the
puzzle scramble completely random. You must begin with the start state and work backwards, swapping
tiles which are adjacent to the blank tile some number of times. (Otherwise, there is a parity issue where
two tiles are always in the reversed positions.) When the goal state is reached, you should indicate this
either with a Javascript alert or a message on the web page itself, your choice. You should be able to
reset the puzzle to a random puzzle whenever the scramble button is pushed, but this puzzle MUST be
solvable! That is, to shuffle the puzzle, you should start from the goal state and randomly switch tiles
some number of times to get to a “random” starting state.
Your requirements are:
1. committed to repos regularly
2. looks good (w/ or w/out Bootstrap)
3. used lines 19 - 25 from script table.js
4. started in goal state, and goal state is correct
5. scrambled puzzle as described in class and above, starting from goal state and randomly switching
tiles
6. accurately posts message when puzzle is solved
7. used proper directory structure (e.g. css and scripts)1. committed to repos regularly
2. looks good (w/ or w/out Bootstrap)
3. used lines 19 - 25 from script table.js
4. started in goal state, and goal state is correct
5. scrambled puzzle as described in class and above, starting from goal state and randomly switching
tiles
6. accurately posts message when puzzle is solved
Unformatted Attachment Preview
Purchase answer to see full attachment
Explanation & Answer
View attached explanation and answer. Let me know if you ...