Write a webpage that enables user to play the game of 15: 1. Write a table to cr
ID: 3669321 • Letter: W
Question
Write a webpage that enables user to play the game of 15:
1. Write a table to create a 4-by-4 board (implemented as an HTML5 table) for a total of 16 slots.
2. One of the slots is empty.
3. The other slots are occupied by 15 tiles (numbered 1-15).
4. The program should create the the board with he tiles out of order.
5. Any tile next to the current empty slot can be moved into the empty slot by clicking the tile.
6. The users goal is to arrange the tiles in order, row by row.
7. Using DOM and the click event, write a script that allows the user to swap the positions of the open slot and any adjacent tile. (Click event should be specified for each table cell)
Explanation / Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>puzzle</title>
<script type="text/javascript">
<!--
function puzzle()
{
for(var i = 0; i < 500; i++)
{
var moves = new Array(); // The set of valid moves
var pos = 0; // The number of candidate valid moves
/* Find blank */
for(var blankpos = 0; blankpos< 16; blankpos++)
{
if(slot(blankpos).innerText == "0")
{
/* Find moves */
if((blankpos % 4) > 0)
{
moves[pos++] = blankpos - 1; // Left
}
if((blankpos % 4) < 3)
{
moves[pos++] = blankpos + 1; // Right
}
if(blankpos > 3)
{
moves[pos++] = blankpos - 4; // Up
}
if(blankpos < 12)
{
moves[pos++] = blankpos + 4; // Down
}
}
}
/* Move random candidate */
moveSlot(moves[(Math.floor(Math.random() * moves.length))]);
}
}
function moveSlot(pos)
{
var move = -1; // The cell to which to move
if((pos % 4) > 0 && slot(pos - 1).innerText == "0")
{
move = pos - 1; // Left
}
if((pos % 4) < 3 && slot(pos + 1).innerText == "0")
{
move = pos + 1; // Right
}
if(pos > 3 && slot(pos - 4).innerText == "0")
{
move = pos - 4; // Up
}
if(pos < 12 && slot(pos + 4).innerText == "0")
{
move = pos + 4; // Down
}
if(move > -1)
{
slot(move).innerText = slot(pos).innerText;
slot(move).className = slot(pos).className;
slot(pos).innerText = "0";
slot(pos).className = "blankpos";
}
}
// -->
</script>
<style type="text/css">
b
{
font-size:100;
display:inline;
height:60;
width:60;
}
.blankpos
{
display:none;
}
</style>
<style type="text/css">
p.c2
{
text-align:center;
}
button.c1
{
font-size:20;
width:160;
}
.style1 {
color: #000066;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1" align="center" bgcolor="pink">
<center>
<tr>
<td><button id="slot" class="b">01 </button></td>
<td><button id="slot" class="b">02</button></td>
<td><button id="slot" class="b">03</button></td>
<td><button id="slot" class="b">04</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b">05</button></td>
<td><button id="slot" class="b">06</button></td>
<td><button id="slot" class="b">07</button></td>
<td><button id="slot" class="b">08</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b">09</button></td>
<td><button id="slot" class="b">10</button></td>
<td><button id="slot" class="b">11</button></td>
<td><button id="slot" class="b">12</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b">13</button></td>
<td><button id="slot" class="b">14</button></td>
<td><button id="slot" class="b">15</button></td>
<td><button id="slot" class="blankpos">0</button></td>
</tr>
</center>
</table>
<p class="c2"><button class="c1">New Game</button></p>
</td>
</tr>
</table>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.