8 Puzzle

All the requirements are attached

Eight Puzzle
For your first project, you will develop the 8-puzzle game using JavaScript.
To turn in this assignment, you are to complete the same process you followed with previous
assignments. Then please develop all of your code within the repository. Commit and push your code
frequently to make sure nothing gets lost when developing. You should at least be doing some work
beforehand, like designing and styling your view with CSS and a nice look, getting some of the basic
code included in the JavaScript file, etc.
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)
/*
* See https://stackoverflow.com/questions/45656949/how-to-return-the-row-and-columnindex-of-a-table-cell-by-clicking
* which includes a Jquery solution too.
*/
// window.onload = function () {
// const table = document.querySelector(‘table’);
// const rows = document.querySelectorAll(‘tr’);
// const rowsArray = Array.from(rows);
// table.addEventListener(‘click’, (event) => {
//
const rowIndex = rowsArray.findIndex(row => row.contains(event.target));
//
const columns = Array.from(rowsArray[rowIndex].querySelectorAll(‘td’));
//
const columnIndex = columns.findIndex(column => column == event.target);
//
console.log(rowIndex, columnIndex)
//
switch_elems(rowIndex, columnIndex);
// })
// };
window.onload = function () {
const cells = document.querySelectorAll(‘td’);
cells.forEach(cell => {
cell.addEventListener(‘click’, () =>
switch_elems(cell.closest(‘tr’).rowIndex, cell.cellIndex));
});
}
function switch_elems(i, j) {
const table = document.querySelector(‘table’);
const val1 = table.rows[i].cells[j].innerHTML;
let k = j + 1;
let numRows = table.rows.length; // not used, but this gets num rows
if (k > table.rows[i].cells.length – 1) {
k = 0;
}
const val2 = table.rows[i].cells[k].innerHTML;
table.rows[i].cells[j].innerHTML = val2.toString();
table.rows[i].cells[k].innerHTML = val1.toString();
}
/*
* See https://stackoverflow.com/questions/21033368/javascript-onclick-event-html-table
*/
// window.onload = function() {
// var table = document.getElementById(“tableID”);
// if (table != null) {
//
for (var i = 0; i < table.rows.length; i++) { // for (var j = 0; j < table.rows[i].cells.length; j++) { // table.rows[i].cells[j].onclick = function () { // const ii=i; // const jj=j; // tableText(this, ii, jj); // }; // } // } // } // } // // function tableText(tableCell, i, j) { // alert(tableCell.innerHTML + " " + i + " " + j); // }