Javascript/Tiles Game tables

Discussion in 'OT Technology' started by Mr Coffee, Jan 1, 2010.

1. Mr CoffeeNew Member

Joined:
Jun 25, 2006
Messages:
11,338
0
Location:
London
Hey guys. Sorry to have to even bother to ask this, but i'm running out of places to ask this...
I'm sure many of you will know what i speak about when i say i'm the family "computer expert" and now my sister has turned to me nagging about help with a coursework. Hopefully you gentlemen can help me out here.

This is what she sent me:
Code:
```<!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">
<title>Nuras Puzzle Game</title>
<script type="text/javascript">
<!--
function puzzle()
{
for(var i = 0; i < 500; i++)
{
var moves = new Array();
for(var blankpos = 0; blankpos< 16; blankpos++)
{
if(slot(blankpos).innerText == "0")
{
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
}
}
}

moveSlot(moves[(Math.floor(Math.random() * moves.length))]);
}
}
function moveSlot(pos)
{
var move = -1;
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>
<body>
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">&nbsp;</td>
<h1>Nuras Puzzel Game</h1>
<hr />

<table border="1" align="center" bgcolor="pink">
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(0)">01 </button></td>
<td><button id="slot" class="b" onclick="moveSlot(1)">02</button></td>
<td><button id="slot" class="b" onclick="moveSlot(2)">03</button></td>
<td><button id="slot" class="b" onclick="moveSlot(3)">04</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(4)">05</button></td>
<td><button id="slot" class="b" onclick="moveSlot(5)">06</button></td>
<td><button id="slot" class="b" onclick="moveSlot(6)">07</button></td>
<td><button id="slot" class="b" onclick="moveSlot(7)">08</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(8)">09</button></td>
<td><button id="slot" class="b" onclick="moveSlot(9)">10</button></td>
<td><button id="slot" class="b" onclick="moveSlot(10)">11</button></td>
<td><button id="slot" class="b" onclick="moveSlot(11)">12</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(12)">13</button></td>
<td><button id="slot" class="b" onclick="moveSlot(13)">14</button></td>
<td><button id="slot" class="b" onclick="moveSlot(14)">15</button></td>
<td><button id="slot" class="blankpos" onclick="moveSlot(15)">0</button></td>
</tr>
</center>
</table>
<p class="c2"><button onclick="puzzle()" class="c1">New Game</button></p>
</td>
</tr>
</table>

</body>
</html> ```
Apprently she just wants me to change it to a 3x3 table rather than 4x4. Also, how to do random?

I would to you for ever and ever if someone could fix it for me, but any pointers in what to fix and stuff would be more than awesome. Hell, i'd pay someone to do it, but i'm getting my money on the same day she's supposed to hand this in

Cheers, guys

2. KrakerjakActive Member

Joined:
Jul 7, 2003
Messages:
8,288
0
Location:
Edmonton eh
3x3 now, pretty much just had to change a few numbers
if you want random working i can look at it later

Code:
```<!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">
<title>Nuras Puzzle Game</title>
<script type="text/javascript">
<!--
function puzzle()
{
for(var i = 0; i < 500; i++)
{
var moves = new Array();
for(var blankpos = 0; blankpos< 9; blankpos++)
{
if(slot(blankpos).innerText == "0")
{
if((blankpos % 3) > 0)
{
moves[pos++] = blankpos - 1; // Left
}
if((blankpos % 3) < 2)
{
moves[pos++] = blankpos + 1; // Right
}
if(blankpos > 2)
{
moves[pos++] = blankpos - 2; // Up
}
if(blankpos < 9)
{
moves[pos++] = blankpos + 2; // Down
}
}
}

moveSlot(moves[(Math.floor(Math.random() * moves.length))]);
}
}
function moveSlot(pos)
{
var move = -1;
if((pos % 3) > 0 && slot(pos - 1).innerText == "0")
{
move = pos - 1; // Left
}
if((pos % 3) < 2 && slot(pos + 1).innerText == "0")
{
move = pos + 1; // Right
}
if(pos > 2 && slot(pos - 3).innerText == "0")
{
move = pos - 3; // Up
}
if(pos < 6 && slot(pos + 3).innerText == "0")
{
move = pos + 3; // 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>
<body>
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">&nbsp;</td>
<h1>Nuras Puzzel Game</h1>
<hr />

<table border="1" align="center" bgcolor="pink">
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(0)">01 </button></td>
<td><button id="slot" class="b" onclick="moveSlot(1)">02</button></td>
<td><button id="slot" class="b" onclick="moveSlot(2)">03</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(3)">04</button></td>
<td><button id="slot" class="b" onclick="moveSlot(4)">05</button></td>
<td><button id="slot" class="b" onclick="moveSlot(5)">06</button></td>
</tr>
</center>
<center>
<tr>
<td><button id="slot" class="b" onclick="moveSlot(6)">07</button></td>
<td><button id="slot" class="b" onclick="moveSlot(7)">08</button></td>
<td><button id="slot" class="blankpos" onclick="moveSlot(8)">0</button></td>
</tr>
</tr>
</center>
</table>
<p class="c2"><button onclick="puzzle()" class="c1">New Game</button></p>
</td>
</tr>
</table>

</body>
</html>```

Joined:
Jun 25, 2006
Messages:
11,338