Do in Javascript /* ================ 8-puzzle problem ================ Construct

ID: 3747359 • Letter: D

Question

Do in Javascript

/*
================
8-puzzle problem
================
Construct a 3x3 grid, containing one blank(empty) space and one each of tiles labeled 1-8.
By exchanging tiles adjacent to the blank space with the blank space, achieve the desired configuration:
1 2 3
8 4
7 6 5

State:
{
grid : Array(3,3), Integers [0,8]
}
where grid is a 2D array whose indices correspond to the following grid positions:
[0][0] [0][1] [0][2]
[1][0] [1][1] [1][2]
[2][0] [2][1] [2][2]
The value 0 is used to represent the blank space, and 1-8 for the corresponding labeled tiles.

Possible actions:
ID | Action
---+----------------------
1 | Move tile above blank down (i.e., "move" blank up)
---+----------------------
2 | Move tile below blank up (i.e., "move" blank down)
---+----------------------
3 | Move tile left of blank right (i.e., "move" blank left)
---+----------------------
4 | Move tile right of blank left (i.e., "move" blank right)
*/

//////////////////////////////////////////////////////////////////////////////
// Complete the following two functions

//Check if the given state is a goal state
//Returns: true if is goal state, false otherwise
function is_goal_state(state) {
++helper_eval_state_count; //Keep track of how many states are evaluated (DO NOT REMOVE!)

return /***Your code to check for goal state here!***/;
}

//Find the list of actions that can be performed from the given state and the new
//states that result from each of those actions
//Returns: Array of successor objects (where each object has a valid actionID member and corresponding resultState member)
function find_successors(state) {
++helper_expand_state_count; //Keep track of how many states are expanded (DO NOT REMOVE!)

var successors=[];

/***Your code to generate successors here!***/

//Hint: Javascript objects are passed by reference, so don't modify "state" directy.
//Make copies instead:
// var newState={
// grid : state.grid.map(x => x.slice(0)) //Deep copy of grid
// };
//Remember to make a new copy for each new state you make!

//Hint: Add new elements to the successor list like so:
// successors.push({
// actionID : /*ID*/,
// resultState : newState
// });

return successors;
}

//////////////////////////////////////////////////////////////////////////////
// Use these functions when developing your A* implementation

//Heuristic functions for the 8-puzzle problem
function calculate_heuristic(state) {
//Total Manhattan distance heuristic
var goal=[ [1, 2, 3], [8, 0, 4], [7, 6, 5] ];

var g_pos=Array(9);
var st_pos=Array(9);
for(let j=0;j<3;++j)
for(let i=0;i<3;++i) {
g_pos[ goal[j][i] ]=[j,i];
st_pos[ state.grid[j][i] ]=[j,i];
}

var h=0;
for(let i=0;i<9;++i) {
h+=Math.abs( st_pos[i][0]-g_pos[i][0] )+Math.abs( st_pos[i][1]-g_pos[i][1] );
}
return h;
}

/*
function calculate_heuristic(state) {
//Misplaced tiles heuristic
var goal=[ [1, 2, 3], [8, 0, 4], [7, 6, 5] ];

var h=0;
for(let j=0;j<3;++j)
for(let i=0;i<3;++i) {
if(state.grid[j][i]!=goal[j][i])
++h;
}
if(h>0) --h; //Account for miscounted blank
return h;
}
*/

/*
function calculate_heuristic(state) {
//Simplest heuristic (h(n)=0)
return 0;
}
*/

//////////////////////////////////////////////////////////////////////////////
// DO NOT MODIFY BELOW THIS LINE

//Check that state input has valid values, outputs descriptive text if not
//Returns: true if input ok
function verify_state() {
var s=read_state();

//Construct state object from page input
//Returns: state object
function read_state() {
var grid=Array(3).fill(0).map(x => Array(3));
for(let k=0;k<9;++k) {
var input=document.getElementById("input_pos"+k);
var j=Math.floor(k/3);
var i=k%3;
if(input.value=="") grid[j][i]=0;
else grid[j][i]=parseInt(input.value,10);
}
return {
grid : grid
};
}

//Convert state to a DOM object suitable for display on web page
//Returns: DOM object
function state_to_dom(s) {
var html="";
for(let j=0;j<3;++j) {
for(let i=0;i<3;++i) {
html+=" ";
if(s.grid[j][i]==0) html+=" ";
else html+=s.grid[j][i];
}
html+=" ";
}
var obj=document.createElement("pre");
obj.innerHTML=html;
return obj;
}

//Convert action to a DOM object suitable for display on web page
//(Providing optional on_state argument may give more detailed description of what is being done to provided state.)
//Returns: DOM object
function action_to_dom(actionID,on_state) {
var obj=document.createElement("p");
var bi,bj;
if(on_state!=null) {
for(let ij=0;ij<9;++ij) {
bj=Math.floor(ij/3);
bi=ij%3;
if(on_state.grid[bj][bi]==0) break;
}
}
switch(actionID) {
case 1:
if(on_state==null) obj.innerHTML="Move tile above blank down";
else obj.innerHTML="Move "+on_state.grid[bj-1][bi]+" down";
break;
case 2:
if(on_state==null) obj.innerHTML="Move tile below blank up";
else obj.innerHTML="Move "+on_state.grid[bj+1][bi]+" up";
break;
case 3:
if(on_state==null) obj.innerHTML="Move tile left of blank right";
else obj.innerHTML="Move "+on_state.grid[bj][bi-1]+" right";
break;
case 4:
if(on_state==null) obj.innerHTML="Move tile right of blank left";
else obj.innerHTML="Move "+on_state.grid[bj][bi+1]+" left";
break;
default:
obj.innerHTML="Invalid action!";
}
return obj;
}

//Convert state to a unique number (no 2 state objects will have the same number unless they are equivalent).
// For use with Javascript Set, since there's no way to override its equivalence check
function state_to_uniqueid(state) {
var id=0;
for(let j=0;j<3;++j)
for(let i=0;i<3;++i) {
id*=9;
id+=state.grid[j][i];
}
return id;
}

Explanation / Answer

Here is the simple javascript code for the 8 puzzle game

Please comment below for any queries regarding the answer or any modifications needed . THank you.

var $ = function (id) { return document.getElementById(id); };

var cell_1 = document.getElementById("1");
var cell_2= document.getElementById("2");
var cell_3= document.getElementById("3");
var cell_4= document.getElementById("4");
var cell_5= document.getElementById("5");
var cell_6= document.getElementById("6");
var cell_7 = document.getElementById("7");
var cell_8= document.getElementById("8");
var empty_Cell = document.getElementById("9");
var Shufflebutton = document.getElementById("shuffling");
shufflingbutton =document.addEventListener("click", Start_Puzzle, false);

var>

cell_1.addEventListener("click", Start_Puzzle, false);
cell_2.addEventListener("click", Start_Puzzle, false);
cell_3.addEventListener("click", Start_Puzzle, false);
cell_4.addEventListener("click", Start_Puzzle, false);
cell_5.addEventListener("click", Start_Puzzle, false);
cell_6.addEventListener("click", Start_Puzzle, false);
cell_7.addEventListener("click", Start_Puzzle, false);
cell_8.addEventListener("click", Start_Puzzle, false);
empty_Cell.addEventListener("click",Start_Puzzle, false);

function shuffling(array)
{
var temporary;
var index;
var count = array.length;
while (count > 0) {
index = Math.floor(Math.random() * count);
count--;
temporary = array[count];
array[count] = array[index];
array[index] = temporary;
}

return array.length;
}

function Start_Puzzle() {

shuffling(arr);

for(var i=1; i<9; i++){
cell_1.innerHTML = arr[0];
cell_2.innerHTML = arr[1];
cell_3.innerHTML = arr[2];
cell_4.innerHTML = arr[3];
cell_5.innerHTML = arr[4];
cell_6.innerHTML = arr[5];
cell_7.innerHTML = arr[6];
cell_8.innerHTML = arr[7];
empty_Cell.innerHTML = arr[8];
};
}

Navigate

Do in JAVA You are to write a program to simulate the arrivals, placements, and

Do in Javascript //Perform breadth-first search from initial state, using define

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Do in Javascript /* ================ 8-puzzle problem ================ Construct

Question

Explanation / Answer

Related Questions

Navigate