Home + Webmaster + Script + Javascript + Giochi + Arrange

Arrange

Javascript che crea il classico gioco del 15 con i tasti abbastanza curati per dare un effetto più reale.

<html>
<head>
<style>
.bigcell {
  background-color:#aa9966;
  border:4px solid #aa9966;
  text-align:center;
}
.cell {
  width:40px;
  height:40px;
  font-family:Verdana, Arial;
  font-size:10pt;
  font-weight:bold;
  background-color:#996633;
  color:#ffff33;
  border-top:2px solid #aa9966;
  border-left:2px solid #aa9966;
  border-right:2px solid #663300;
  border-bottom:2px solid #663300;
  text-align:center;
}
.hole {
  width:40px;
  height:40px;
  background-color:#aa9966;
  text-align:center;
}
body,h1,h2,h3,.msg,capt1,capt2 {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2 {font-size:16pt; margin:0px; font-weight:bold;}
h3 {font-size:8pt; margin:0px; font-weight:bold;}
.msg {font-size:8pt; font-weight:bold;}
.tab {cursor:hand;}
.capt1 {font-size:10pt; font-weight:bold;}
.capt2 {font-size:9pt; font-weight:bold;}
.capt3 {font-size:14pt; font-weight:bold; color:yellow;}
.capt4 {font-size:10pt; font-weight:bold; color:yellow;}
.but {font-size:9pt; font-weight:bold; height:30px;background-color:#aaaa99;}
</style>
</head>

<body onLoad="loadBoard(4)">
<script>
var gsize, ghrow, ghcol, gtime, gmoves, gintervalid=-1, gshuffling;
function toggleHelp()
{
  if (butHelp.value == "Hide Help")
  {
    help.style.display = "none";
    butHelp.value = "Show Help";
  }
  else
  {
    help.style.display = "";
    butHelp.value = "Hide Help";
  }  
}
//random number between low and hi
function r(low,hi)
{
  return Math.floor((hi-low)*Math.random()+low); 
}
//random number between 1 and hi
function r1(hi)
{
  return Math.floor((hi-1)*Math.random()+1); 
}
//random number between 0 and hi
function r0(hi)
{
  return Math.floor((hi)*Math.random()); 
}
function startGame()
{
  shuffle();
  gtime = 0;
  gmoves = 0;
  tickTime();
  gintervalid = setInterval("tickTime()",1000);
}
function stopGame()
{
  if (gintervalid==-1) return;
  cl?=††?t???a????earInterval(gintervalid);
  fldStatus.innerhtml = "";
  gintervalid=-1;
}
function tickTime()
{
  showStatus();
  gtime++;
}
function checkWin()
{
  var i, j, s;
  if (gintervalid==-1) return; //game not started!
if (!isHole(gsize-1,gsize-1)) return;
  for (i=0;i<gsize;i++)
for (j=0;j<gsize;j++)
{

if (!(i==gsize-1 && j==gsize-1)) //ignore last block (ideally a hole)

{

if (getValue(i,j)!=(i*gsize+j+1).toString()) return;

}

stopGame();
  s = "<table cellpadding=4>";

s += "<tr><td align=center class=capt3>!! CONGRATS !!</td></tr>";

s += "<tr class=capt4><td align=center>You have done it in " + gtime + " secs ";

s += "with " + gmoves + " moves!</td></tr>";

s += "<tr><td align=center class=capt4>Your speed is " + Math.round(1000*gmoves/gtime)/1000 + " moves/sec</td></tr>";

s += "</table>";

fldStatus.innerhtml = s;

//  shuffle();

}
function showStatus()
{

fldStatus.innerhtml = "Time: " + gtime + " secs   Moves: " + gmoves
}

function showTable()

{

var i, j, s;
  stopGame();

s = "<table border=3 cellpadding=0 cellspacing=0 bgcolor='#666655'><tr><td class=bigcell>";

s = s + "<table border=0 cellpadding=0 cellspacing=0>";

for (i=0; i<gsize; i++)

{

s = s + "<tr>";

for (j=0; j<gsize; j++)

{

s = s + "<td id=a_" + i + "_" + j + " onclick='move(this)' class=cell>" + (i*gsize+j+1) + "</td>";

}

s = s + "</tr>";

}

s = s + "</table>";

s = s + "</td></tr></table>";

return s;

}

function getCell(row, col)

{

return eval("a_" + row + "_" + col);

}

function setValue(row,col,val)

{

var v = getCell(row, col);

v.innerhtml = val;

v.className = "cell";

}

function getValue(row,col)

{

//  alert(ro?=††?t???a?????w + "," + col);

var v = getCell(row, col);

return v.innerhtml;

}

function setHole(row,col)

{

var v = getCell(row, col);

v.innerhtml = "";

v.className = "hole";

ghrow = row;

ghcol = col;

}

function getRow(obj)

{

var a = obj.id.split("_");

return a[1];

}

function getCol(obj)

{

var a = obj.id.split("_");

return a[2];

}

function isHole(row, col)

{

return (row==ghrow && col==ghcol) ? true : false;

}

function getHoleInRow(row)

{

var i;

return (row==ghrow) ? ghcol : -1;

}

function getHoleInCol(col)

{

var i;

return (col==ghcol) ? ghrow : -1;

}

function shiftHoleRow(src,dest,row)

{

var i;

//conversion to integer needed in some cases!

src = parseInt(src);

dest = parseInt(dest);

if (src < dest)

{

for (i=src;i<dest;i++)

{

setValue(row,i,getValue(row,i+1));

setHole(row,i+1);

}

if (dest < src)

{

for (i=src;i>dest;i--)

{

setValue(row,i,getValue(row,i-1));

setHole(row,i-1);

}

function shiftHoleCol(src,dest,col)

{

var i;

//conversion to integer needed in some cases!

src = parseInt(src);

dest = parseInt(dest);

if (src < dest)

{//alert("src=" + src +" dest=" + dest + " col=" + col);

for (i=src;i<dest;i++)

{//alert(parseInt(i)+1);

setValue(i,col,getValue(i+1,col));

setHole(i+1,col);

}

if (dest < src)

{

for (i=src;i>dest;i--)

{

setValue(i,col,getValue(i-1,col));

setHole(i-1,col);

}

function move(obj)

{

var r, c, hr, hc;

if (gintervalid==-1 && !gshuffling)

{

alert('Please press the "Start Game" button to start.')

return;

}

r = getRow(obj);

c = getCol(obj);

if (isHol?=††?t???a?????e(r,c)) return;

hc = getHoleInRow(r);

if (hc != -1)

{

shiftHoleRow(hc,c,r);

gmoves++;

checkWin();

return;

}

hr = getHoleInCol(c);

if (hr != -1)

{

shiftHoleCol(hr,r,c);

gmoves++;

checkWin();

return;

}

function shuffle()

{

var t,i,j,s,frac;

gshuffling =  true;

frac = 100.0/(gsize*(gsize+10));

s = "% ";

for (i=0;i<gsize;i++)

{

s += "|";

for (j=0;j<gsize+10;j++)

{

window.status = "Loading " + Math.round((i*(gsize+10) + j)*frac) + s

if (j%2==0)

{

t = r0(gsize);

while (t == ghrow) t = r0(gsize); //skip holes

getCell(t,ghcol).click();

}

else

{

t = r0(gsize);

while (t == ghcol) t = r0(gsize); //skip holes

getCell(ghrow,t).click();

}

window.status = "";

gshuffling = false;

}

function loadBoard(size)

{

gsize = size;

board.innerhtml = showTable(gsize);

setHole(gsize-1,gsize-1);

//shuffle();

}

</script>

<h1>Jus' Games!</h1>

<tr><td width="98%"><h2>Arrange</h2></td>

<ol>

<li>Choose a Level (3 to 10).</li>

<li>The game board has blocks with numbers in it. Also there is a single "hole" that can be used for moving the b?=††?t???a?????locks.</li>

<li>The objective of the game is to order the numbers using the "hole" for temporary movement.</li>

<li>Press the "Start Game" button. The timer would be started.</li>

<li>Move blocks in a row by clicking on them. A block can be moved only if it is in the same row or column as the "hole". Make a guess by typing in a number in the box provided.</li>

<li>You can move multiple blocks (in the same row or column as the "hole") by clicking the farthest block that you need to be moved.</li>

</ol>

Order all the numbers in the shortest time possible with a minimum number of moves...

</h3></td></tr>

</table>

<p>

<b>Choose Level: </B>

for (var i=5;i<=10;i++)

{

document.write("<option value='" + i + "'>" + i + "</option>");

}

</script>

</select>

</td></tr>

</td></tr>

</table>

</center><p>
</body>
</html>

Compatibilità: MsIE

Screenshot del gioco Arrange Arrange

Javascript

Altre risorse:
Libri Javascript | Manuale Javascript

E-Learning Scopri il catalogo dei corsi, da quello per webmaster a quelli di programmazione avanzata!

Javascript e DHTML Corso per imparare lo scripting lato client con Javascript adatto a qualsiasi livello di esperienza.

Webmaster Avanzato Percorso completo volto a formare dei professionisti del Web. Come si lavora in uno Staff?

Fai fruttare il tuo sito! Diventa oggi stesso un affiliato Trade Doubler e guadagna qualche soldino con il tuo sito web.