Write a web page that enables the user to play the game of 15. 1.There is a 4-by
ID: 3664994 • Letter: W
Question
Write a web page that enables the user to play the game of 15.
1.There is a 4-by-4 board (implemented as an XHTML table) for a total of 16 slots.
2.One of the slots is empty. The other slots are occupied by 15 tiles, randomly numbered from 1 through 15.
3.Any tile next to the currently empty slot can be moved into the currently empty slot by clicking on the tile.
4.Your program should create the board with the tiles out of order.
5. The user's goal is to arrange the tiles in sequencial order row by row.
6.Using the DOM and the onclick event, write a script that allows the user to swap the positions of the open position and an adjacent tile. [Hint: The onclick event should be specified for each table cell.]
Code must be able to be used with notepad with no editing and must meet each of the requirements. Do not just copy and paste from the already available code on the internet, it doesn’t work properly.
Explanation / Answer
1. index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>15-Puzzle</title>
<script src="puzzle.js" type="text/javascript"></script>
<style>
.box {
border-style: solid;
border-color: blue;
border-width: 5px;
margin: 5px;
}
.cell {
width: 60px;
height: 60px;
margin: 1px;
text-align: center;
background-color: limegreen;
font-weight: bold;
font-size: x-large;
padding: 0px;
}
.empty {
background-color: white;
}
</style>
</head>
<body>
<h2>15-Puzzle</h2>
<p id="moves"></p>
<p id="time"></p>
<p>
<button>Easy Game</button>
<button>New Game</button>
</p>
<p>
</p>
<table class="box">
<tr>
<td id="0" class="cell">1</td>
<td id="1" class="cell">2</td>
<td id="2" class="cell">3</td>
<td id="3" class="cell">4</td>
</tr>
<tr>
<td id="4" class="cell">5</td>
<td id="5" class="cell">6</td>
<td id="6" class="cell">7</td>
<td id="7" class="cell">8</td>
</tr>
<tr>
<td id="8" class="cell">9</td>
<td id="9" class="cell">10</td>
<td id="10" class="cell">11</td>
<td id="11" class="cell">12</td>
</tr>
<tr>
<td id="12" class="cell">13</td>
<td id="13" class="cell">14</td>
<td id="14" class="cell">15</td>
<td id="15" class="cell"></td>
</tr>
</table>
</body>
</html>
2. puzzle.js
var id_empty;
var num_moves;
var isCompleted = false;
var time=0;
var nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
window.addEventListener("load", startTimer, false);
function startTimer()
{
window.setInterval("updateTime()", 1000);
}
function updateTime()
{
++time;
document.getElementById("time").innerHTML ="Time spent in current game: " +time +" (seconds)";
}
function startPuzzle() {
num_moves = 0;
isCompleted = false;
for(var i=0; i < 16; i++) {
var tmp = document.getElementById(i);
tmp.className = "cell ";
}
randomNumber = nums.sort(function () { return (Math.round(Math.random())-0.5);});
while(!Problem.prototype.is_solvable(randomNumber)) {
randomNumber = nums.sort(function () { return (Math.round(Math.random())-0.5);});
}
for(var i=0; i < 16; i++) {
var tmp = document.getElementById(i);
if(randomNumber[i] == 16) {
tmp.className = "cell empty";
tmp.innerHTML = "";
id_empty = i;
}
else
tmp.innerHTML = randomNumber[i];
}
}
function easyGame(){
if(isCompleted)
{
window.location.reload();
}
time = 0;
num_moves = 0;
document.getElementById("moves").innerHTML = "Moves so far: " + num_moves;
for(var i=0; i < 16; i++) {
var tmp = document.getElementById(i);
if(i == 14) {
tmp.className = "cell empty";
tmp.innerHTML = "";
id_empty = i;
}
else if(i == 15) {
tmp.className = "cell";
tmp.innerHTML = "15";
}
else{
tmp.innerHTML = i+1;
tmp.className = "cell";
}
}
}
function clickCell(x)
{
if(isCompleted)
return;
if(x.id != id_empty+'') {
var emptyI = Math.floor(id_empty/4);
var emptyJ = id_empty % 4;
var id_selected = Number(x.id);
var selectedI = Math.floor(id_selected/4);
var selectedJ = id_selected % 4;
if((Math.abs(emptyI - selectedI) == 1 && emptyJ == selectedJ) ||
(Math.abs(emptyJ - selectedJ) == 1 && emptyI == selectedI)) {
document.getElementById(id_empty).className = "cell";
document.getElementById(id_empty).innerHTML = x.innerHTML;
x.className = "cell empty";
x.innerHTML = '';
id_empty = id_selected;
num_moves++;
document.getElementById("moves").innerHTML = "Moves so far: " + num_moves;
if(isDone()){
isCompleted = true;
document.getElementById("moves").innerHTML = "CONGRATS! Number of moves it took to complete: " + num_moves;
}
}
}
}
function isDone() {
return document.getElementById('0').innerHTML == '1' &&
document.getElementById('1').innerHTML == '2' &&
document.getElementById('2').innerHTML == '3' &&
document.getElementById('3').innerHTML == '4' &&
document.getElementById('4').innerHTML == '5' &&
document.getElementById('5').innerHTML == '6' &&
document.getElementById('6').innerHTML == '7' &&
document.getElementById('7').innerHTML == '8' &&
document.getElementById('8').innerHTML == '9' &&
document.getElementById('9').innerHTML == '10' &&
document.getElementById('10').innerHTML == '11' &&
document.getElementById('11').innerHTML == '12' &&
document.getElementById('12').innerHTML == '13' &&
document.getElementById('13').innerHTML == '14' &&
document.getElementById('14').innerHTML == '15';
}
function lastClick() {
var curr_state = currentState();
var problem = new Problem(curr_state);
var sol = Solver.a_star_search(problem);
var result = "<ol>";
for(var i = 0; i < sol.length; i++) {
var n = moveNumb(sol[i],curr_state);
curr_state = problem.result(sol[i],curr_state);
result += "<li>move " + n + "</li>";
}
result += "</ol>";
document.getElementById("steps").innerHTML = result;
}
function currentState() {
var result = [];
for(var i = 0; i < 16; i++) {
var tmp = document.getElementById(String(i)).innerHTML;
if(tmp == '') {
result[i] = 16;
}
else {
result[i] = Number(tmp);
}
}
return result;
}
function moveNumb(action,state) {
var i = state.indexOf(16);
switch(action) {
case Action.up:
return state[Util.index(Util.x(i),Util.y(i) - 1)];
case Action.down:
return state[Util.index(Util.x(i),Util.y(i) + 1)];
case Action.right:
return state[Util.index(Util.x(i) + 1,Util.y(i))];
case Action.left:
return state[Util.index(Util.x(i) - 1,Util.y(i))];
}
}
Array.prototype.clone = function() { return this.slice(0); };
Array.prototype.swap = function(i1,i2) {
var copy = this.clone();
var tmp = copy[i1];
copy[i1] = copy[i2];
copy[i2] = tmp;
return copy;
};
var Problem = function(start_state) {
this.init_state = start_state;
return this;
}
Problem.prototype.is_solvable = function(start) {
start = start.clone(); start.splice(start.indexOf(16), 1);
start[15] = 16;
var count = 0;
for(var i = 0; i < 15; i++) {
if(start[i] != i+1) {
count++;
var j = start.indexOf(i+1);
start[j] = start[i];
start[i] = i+1;
}
}
return count % 2 == 0;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.