Jus' Games!
Original Games by ©Arun Narayanan, Dec 2002
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
| 13 |
14 |
15 |
| |
Free JavaScripts provided
by The JavaScript Source
<!-- THREE STEPS TO INSTALL ARRANGE:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun Narayanan (jusgames@lycos.com) -->
<!-- Web Site: http://jusgames.tripod.com -->
<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>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="loadBoard(4)">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun Narayanan (jusgames@lycos.com) -->
<!-- Web Site: http://jusgames.tripod.com -->
<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;
clearInterval(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(row + "," + 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 (isHole(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>
<body bgcolor="#666655" text="white">
<center>
<h1>Jus' Games!</h1>
<span class=msg>Original Games by ©Arun Narayanan, Dec 2002<br> </span>
<table border=6 width="80%" cellpadding=4 cellspacing=0>
<tr><td width="98%"><h2>Arrange</h2></td>
<td align=center><input type=button class=but value="Home Page" onclick="window.location.href='index.html'"></td><td align=center><input type=button id=butHelp value="Hide Help" class="but" onclick="toggleHelp()"></td></tr>
<tr id=help><td colspan=3><h3>
<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 blocks.</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>
<div id=test></div>
<table cellpadding=4>
<tr><td align=center>
<b>Choose Level: </B>
<select id=level onchange="loadBoard(parseInt(level.value))">
<option value='3'>3</option>
<option value='4' selected>4</option>
<script>
for (var i=5;i<=10;i++)
{
document.write("<option value='" + i + "'>" + i + "</option>");
}
</script>
</select>
</td></tr>
<tr><td align=center>
<input type=button class=but value="Start Game" onclick="startGame();">
<tr><td align=center id=fldStatus class=capt2>
</td></tr>
</table>
<div id=board></div>
<p>
<p>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 10.06 KB -->
AJÁNLOM AZ OLDALT
