Pages

Showing posts with label game. Show all posts
Showing posts with label game. Show all posts

Friday, May 20, 2011

Hit the Dots Javascript Game


Great online javascript game for your website. Hit the Dots is played by clicking as many dots that are randomly generated by the computer. Your scrore is recorded so you can try again and beat your best.
Warning ! This online game is very addictive. Your visitors might never leave.
Grab the code now!


STEP 1
Copy the code below and place this into the <head> of your html document.
<SCRIPT LANGUAGE="JavaScript">
 gamelength=30; timerID=null var playing=false; var numholes=6*10;
var currentpos=-1; function clrholes() { for(var k=0;k<document.dmz.elements.length;k++)
document.dmz.elements[k].checked=false; } function stoptimer() { if(playing) clearTimeout(timerID);
} function showtime(remtime) { document.cpanel.timeleft.value=remtime; if(playing)
{ if(remtime==0) { stopgame(); return; } else { temp=remtime-1; timerID=setTimeout("showtime(temp)",1000);
} } } function stopgame() { stoptimer(); playing=false; document.cpanel.timeleft.value=0;
clrholes(); display("Game Over"); alert('Game Over.\nYour score is:
'+totalhits); } function play() { stoptimer(); if(playing) { stopgame(); return;
} playing=true; clrholes(); totalhits=0; document.cpanel.score.value=totalhits;
display("Playing"); launch(); showtime(gamelength); } function display(msg)
{ document.cpanel.state.value=msg; } function launch() { var launched=false; while(!launched)
{ mynum=random(); if(mynum!=currentpos) { document.dmz.elements[mynum].checked=true;
currentpos=mynum; launched=true; } } } function hithead(id) { if(playing==false)
{ clrholes(); display("Push Start to Play"); return; } if(currentpos!=id)
{ totalhits+=-1; document.cpanel.score.value=totalhits; document.dmz.elements[id].checked=false;
} else { totalhits+=1; document.cpanel.score.value=totalhits; launch(); document.dmz.elements[id].checked=false;
} } function random() { return(Math.floor(Math.random()*100%numholes)); } // End
--> </script>
STEP 2
Copy the code below and paste this between the <body> and </body> tags of your html document, where you want the game to appear on your webpage.
<center><h4>Hit-the-Dot</h4></center>
<center>Test your skill. How many boxes can you check in 30 seconds?</center>
<form name="cpanel"> <center> <table cellspacing=3>
<tr> <td><input type="button" name="startstop"
value=" Start Game | Stop Game " onClick="play()"></td>
<td><pre> </pre></td> <td align=right>Time:</td>
<td><input type="text" name="timeleft" size="4"
onFocus="this.blur()"></td> </tr> <tr> <td><input
type="text" name="state" size="20" value="Push
Start to Play" onFocus="this.blur()"></td> <td><pre>
</pre></td> <td align=right>Score:</td> <td><input
type="text" name="score" size="4" onFocus="this.blur()"></td>
</tr> </table> </center> </form> <form name="dmz">
<center> <table cellspacing=3> <tr> <td colspan=10><hr
size=1></td> </tr> <tr> <td align="center" valign="center"><input
type="radio" onClick="hithead(0)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(1)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(2)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(3)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(4)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(5)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(6)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(7)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(8)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(9)"></td>
</tr> <tr> <td align="center" valign="center"><input
type="radio" onClick="hithead(10)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(11)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(12)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(13)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(14)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(15)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(16)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(17)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(18)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(19)"></td>
</tr> <tr> <td align="center" valign="center"><input
type="radio" onClick="hithead(20)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(21)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(22)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(23)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(24)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(25)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(26)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(27)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(28)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(29)"></td>
</tr> <tr> <td align="center" valign="center"><input
type="radio" onClick="hithead(30)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(31)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(32)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(33)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(34)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(35)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(36)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(37)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(38)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(39)"></td>
</tr> <tr> <td align="center" valign="center"><input
type="radio" onClick="hithead(40)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(41)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(42)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(43)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(44)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(45)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(46)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(47)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(48)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(49)"></td>
</tr> <tr> <td align="center" valign="center"><input
type="radio" onClick="hithead(50)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(51)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(52)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(53)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(54)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(55)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(56)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(57)"></td>
<td align="center" valign="center"><input type="radio"
onClick="hithead(58)"></td> <td align="center"
valign="center"><input type="radio" onClick="hithead(59)"></td>
</tr> <tr><td colspan=10><hr size=1></td> </tr></table></center></form>
<center><table cellspacing=3><tr><td> <p><strong>Instructions:</strong>
<ol><li>Click on the radio buttons as<BR> they are selected
randomly by the computer.<BR> <li>1 point per hit, minus 1 point per
miss.<BR> </ol></td></tr></table></center>

Online EyeQ Test


Having online games on your site add to your visitors pleasure and tempt them to come back time and again. This simple to configure online javascript game will surely increase your traffic.
Is your EyeQ is as high as Einstein's IQ. Play EyeQ online or download it for free. Copy-paste installation. IE 5 or higher.
Step 1: Paste the following code below the <body> tag of your webpage
<script>
// set horizontal distance to the left margin of browser window (pixels)
 var gameleft=0;
// set vertical distance to the left margin of browser window (pixels)
 var gametop=10; </script> <script
src="eyeqdown.js"></script>
Step 2: Go to the top of the script code and configure the position of EyeQ.
Step 3: Download the zip file 'eyeq.zip'. Extract it and place all the files into the same folder as your webpage. Or copy past the code from below
var floatingspeed=2
var trynumbernew=0
var trynumberold=0
var skinwidth=228
var skinheight=150
var tempo=20
var guessmodus=false
var timer
var timetimer
var timerwrong
var timmercorrect
var timerstart
var timecolor="000000"
var gamemaxseconds=30
var stopit=false
var starttime
var nowtime=0
var penalty=0
var penaltyseconds=1
var dotsmax=16
var dotsrandom=5
var correctdots=dotsrandom+1
var correctanswers=0
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=dotsmax;i++) {
            stepx[i]=randomspeed(floatingspeed)
            stepy[i]=randomspeed(floatingspeed)
}
var marginleft=37
var marginright=109
var margintop=50
var marginbottom=105

var spancontent=new Array()
var imgpreload=new Image
imgpreload.src="dot.gif"

for (i=0;i<=dotsmax;i++) {
            spancontent[i]="<img src='dot.gif'>"
}

function positiongame() {
            if (document.all) {
                        document.all.roof.style.posLeft=gameleft
                        document.all.roof.style.posTop=gametop
                        document.all.quickeyeskin.style.visibility="visible"
            }
}

function guess(thisno) {
            if (nowtime<gamemaxseconds && guessmodus) {
                        guessmodus=false
                        if (thisno==correctdots) {          
                                    correctanswers++
                                    var resultbarwidth=correctanswers*4
                                    resultbar.innerHTML="<table border=0 cellpadding=0 cellspacing=0><tr valign=top><td align=left><img src=\"transparent.gif\" width="+resultbarwidth+" height=5></td></tr></table>"
                                    resultboard.innerHTML="<table width=80 height=62 border=0 cellpadding=2 cellspacing=0 bgcolor=green><tr valign=middle><td align=center><font face=Arial size=1 color=white>CORRECT</font></td></tr></table>"
                                    document.all.resultboard.style.visibility="visible"
                                    trynumberold=trynumbernew
                                    clearTimeout(timerwrong)
                                    timercorrect=setTimeout("nextguess()",500)
                        }
                        else {
                                    penaltyseconds++
                                    resultboard.innerHTML="<table width=80 height=62 border=0 cellpadding=2 cellspacing=0 bgcolor=red><tr valign=middle><td align=center><font face=Arial size=1 color=white>WRONG.<br>Correct: "+correctdots+"<br>Penalty: "+penaltyseconds+" sec.</font></td></tr></table>"
                                    document.all.resultboard.style.visibility="visible"
                                    penalty=(penaltyseconds*1000)
                                    trynumberold=trynumbernew
                                    timerwrong=setTimeout("nextguess()",penalty)
                        }
            }
}

function startgame() {
            trynumbernew++
            stopit=false
            guessmodus=true
            timecolor="000000"
            hideresultboard()
    startnewtime()
            setdots()
}

function stopgame() {
            clearTimeout(timerstart)
            stopit=true
            penalty=1
            resultbar.innerHTML=""
            resultboard.innerHTML="<table width=80 height=62 border=0 cellpadding=5 cellspacing=0><tr valign=middle><td align=center bgcolor=black><font face=Arial size=1 color=white>New game</font></td></tr></table>"
            document.all.resultboard.style.visibility="visible"
            timesign.innerHTML="<font size=1 face=Arial color=black>30.00</font>"
            document.all.timesign.style.visibility="visible"
            guessmodus=false
            nowtime=0
            penaltyseconds=1
            correctanswers=0
            timerstart=setTimeout("startgame()",800)
}

function nextguess() {
            if (nowtime<gamemaxseconds && trynumbernew==trynumberold) {
                        guessmodus=true
                        hideresultboard()
                        setdots()
            }
}

function hideresultboard() {
            document.all.resultboard.style.visibility="hidden"
}

function startnewtime() {
            starttime= new Date()
            starttime=starttime.getTime()
    checktime()
}

function setdots() {
            dotsrandom=randommaker(dotsmax)
            correctdots=dotsrandom+1
                        for (i=0;i<=dotsmax;i++) {            
                                    var thisspan = eval("document.all.d"+(i)+".style")
                                    thisspan.visibility="hidden"
                        }
                        for (i=0;i<=dotsrandom;i++) {            
                                    var thisspan = eval("document.all.d"+i)
                                    thisspan.innerHTML=spancontent[i]
                                    var thisspan = eval("document.all.d"+(i)+".style")
                                    var randomposleft=marginright-marginleft
                                    var randompostop=marginbottom-margintop
                                    thisspan.posLeft=randommaker(randomposleft)+marginleft
                                    thisspan.posTop=randommaker(randompostop)+margintop
                                    thisspan.visibility="visible"
                        }
                        checkmovement()
}

function randomspeed(range) {             
            rand=Math.floor(range*Math.random())
            if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function randommaker(range) {              
            var randomposition=Math.floor(range*Math.random())
    return randomposition
}

function checkmovement() {
            if (document.all && guessmodus && nowtime<gamemaxseconds  && stopit==false) {
                        checkposition()
                        movepictures()
            timer=setTimeout("checkmovement()",tempo)
            }
            else {
                        clearTimeout(timer)
                        for (i=0;i<=dotsmax;i++) {            
                                    var thisspan = eval("document.all.d"+(i)+".style")
                                    thisspan.visibility="hidden"
                                    thisspan.posLeft=marginleft
                                    thisspan.posTop=margintop
                        }
            }
}

function movepictures() {
            for (i=0;i<=dotsrandom;i++) { 
            var thisspan=eval("document.all.d"+(i)+".style")
            thisspan.posLeft+=stepx[i]
                        thisspan.posTop+=stepy[i]
    }
}

function checkposition() {
            for (i=0;i<=dotsrandom;i++) {            
                        var thisspan=eval("document.all.d"+i+".style")               
                        if (thisspan.posLeft>marginright) {
                                    thisspan.posLeft-=Math.abs(stepx[i]+1)
                                    stepx[i]=randomspeed(floatingspeed)*-1           
                        }
                        if (thisspan.posLeft<marginleft) {
                                    thisspan.posLeft+=Math.abs(stepx[i])
                                    stepx[i]=randomspeed(floatingspeed)                           
                        }          
                        if (thisspan.posTop>marginbottom) {
                                    thisspan.posTop-=Math.abs(stepy[i])
                                    stepy[i]=randomspeed(floatingspeed)*-1
                        }
                        if (thisspan.posTop<margintop) {
                                    thisspan.posTop+=Math.abs(stepy[i])
                                    stepy[i]=randomspeed(floatingspeed)
                        }
            }
}

function checktime() {
    if (nowtime<gamemaxseconds && stopit==false) {
                nowtime=new Date()
                nowtime=nowtime.getTime()
        nowtime=(nowtime-starttime)/1000
                        var countdown=gamemaxseconds-nowtime
                        countdown=Math.floor(countdown*100)/100
                        if (countdown<0) {countdown=0}
        timesign.innerHTML="<font size=1 face=Arial color="+timecolor+">"+countdown+"</font>"
        timetimer=setTimeout("checktime()",100)
    }
            else if (stopit==true) {
                        clearTimeout(timetimer)
                        for (i=0;i<=dotsmax;i++) {            
                                    var thisspan = eval("document.all.d"+(i)+".style")
                                    thisspan.visibility="hidden"
                        }
            }
    else {
        clearTimeout(timetimer)
                        endgame()
    }
}

function endgame() {
            timecolor="000000"
            if (correctanswers<=5) {
                        resultboard.innerHTML="<table width=80 height=132 border=0 cellpadding=5 cellspacing=0><tr valign=middle><td align=center bgcolor=red><font face=Arial size=1 color=white>Game over.<br>Correct: "+correctanswers+"<br><br>Not good enough for our hall of fame<br><br>Try again.</font></td></tr></table>"
                        document.all.resultboard.style.visibility="visible"
                        timesign.innerHTML=""
            }
            else {
                        resultboard.innerHTML="<table width=80 height=132 border=0 cellpadding=5 cellspacing=0><tr valign=middle><td align=center bgcolor=red><font face=Arial size=1 color=white>Game over.<br>Correct answers: "+correctanswers+"</font></td></tr></table>"
                        document.all.resultboard.style.visibility="visible"
                        timesign.innerHTML=""
                        pophalloffame()
            }
}

function pophalloffame() {
                        var popup=window.open("", "hall", "status=no,location=no,toolbar=no,menubar=no,resizable=no,scrollbars=no,width=235,height=180,top=100,left=210")
                        popup.document.writeln("<HTML><HEAD><TITLE>HALL OF FAME</TITLE></HEAD><BODY>")
                        popup.document.writeln("<table border=0 cellpadding=2 cellspacing=0 width=210>")
           
                        popup.document.writeln("<tr><td bgcolor=000000>")
            popup.document.writeln("<font face=Verdana size=1 color=white><strong>Cool Prizes for EyeQ Cracks</strong></font>")
            popup.document.writeln("</td></tr>")
                       
                        popup.document.writeln("<tr><td><br></td></tr>")
           
                        popup.document.writeln("<tr><td><font face=Verdana size=1 color=black>Add your top results to our realtime Hall of Fame.<br><br><a href=\"http://www.24fun.com/cgi-bin/eyeq.pl\" target=\"_blank\"><strong><font face=Verdana size=1 color=black>Click here.</font></strong></a>")
                        popup.document.writeln("</td></tr></table>")
                        popup.document.writeln("</BODY></HTML>")
                        popup.document.close()
}

function ov(thisleft,thistop) {
            document.all.l.style.posLeft=thisleft
            document.all.l.style.posTop=thistop
            document.all.r.style.posLeft=thisleft+17
            document.all.r.style.posTop=thistop
            document.all.t.style.posLeft=thisleft
            document.all.t.style.posTop=thistop
            document.all.b.style.posLeft=thisleft
            document.all.b.style.posTop=thistop+12
}

function ou() {
            document.all.l.style.posLeft=0
            document.all.l.style.posTop=0
            document.all.r.style.posLeft=0
            document.all.r.style.posTop=0
            document.all.t.style.posLeft=0
            document.all.t.style.posTop=0
            document.all.b.style.posLeft=0
            document.all.b.style.posTop=0
}



if (document.all) {
            document.write("<div id=\"roof\" style=\"position:absolute;left:"+gameleft+"px;top:"+gametop+"px\">")
            document.write("<div id=\"quickeyeskin\" style=\"position:absolute;visibility:hidden;left:0px;top:0px\">")
            document.write("<IMG SRC=\"skin.gif\" USEMAP=\"#skin\" BORDER=0>")
            document.write("<MAP NAME=\"skin\">")
            document.write("<AREA SHAPE=RECT COORDS=\"34,115,51,127\" HREF=\"javascript:guess('1')\" onMouseOver=\"ov(34,115)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"55,115,72,127\" HREF=\"javascript:guess('2')\" onMouseOver=\"ov(55,115)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"76,115,93,127\" HREF=\"javascript:guess('3')\" onMouseOver=\"ov(76,115)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"97,115,114,127\" HREF=\"javascript:guess('4')\" onMouseOver=\"ov(97,115)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"34,132,51,144\" HREF=\"javascript:guess('5')\" onMouseOver=\"ov(34,132)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"55,132,72,144\" HREF=\"javascript:guess('6')\" onMouseOver=\"ov(55,132)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"76,132,92,143\" HREF=\"javascript:guess('7')\" onMouseOver=\"ov(76,132)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"97,132,113,143\" HREF=\"javascript:guess('8')\" onMouseOver=\"ov(97,132)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"34,149,51,161\" HREF=\"javascript:guess('9')\" onMouseOver=\"ov(34,149)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"55,149,72,160\" HREF=\"javascript:guess('10')\" onMouseOver=\"ov(55,149)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"77,149,92,161\" HREF=\"javascript:guess('11')\" onMouseOver=\"ov(76,149)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"97,149,114,161\" HREF=\"javascript:guess('12')\" onMouseOver=\"ov(97,149)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"34,166,51,178\" HREF=\"javascript:guess('13')\" onMouseOver=\"ov(34,166)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"55,166,72,178\" HREF=\"javascript:guess('14')\" onMouseOver=\"ov(55,166)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"77,166,93,178\" HREF=\"javascript:guess('15')\" onMouseOver=\"ov(76,166)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"98,166,113,178\" HREF=\"javascript:guess('16')\" onMouseOver=\"ov(97,166)\" onMouseOut=\"ou()\">")
            document.write("<AREA SHAPE=RECT COORDS=\"76,184,113,194\" HREF=\"javascript:stopgame()\">")
            document.write("</MAP>")
            document.write("</div>")

            for (i=0;i<=dotsmax;i++) {
                        document.write("<div id=\"d"+i+"\" style=\"position:absolute;left:0px;top:0px\"><img src=\"dot.gif\"></div>")
            }
           
            document.write("<div id=\"resultboard\" style=\"position:absolute;left:35px;top:48px\"><table width=80 height=60 border=0 cellpadding=5 cellspacing=0><tr valign=middle><td align=center><font face=Arial size=1 color=000000>Click start and guess the number of dots.<br>time: 30 sec.</font></td></tr></table></div>")

            document.write("<div id=\"resultbar\" style=\"position:absolute;left:35px;top:41px\"></div>")
           
            document.write("<div id=\"resultbarskin\" style=\"position:absolute;left:35px;top:33px\"><img src=\"resultbarskin.gif\"></div>")

            document.write("<div id=\"timesign\" style=\"position:absolute;visibility:visible;left:39px;top:185px;\"></div>")

            document.write("<div id=\"l\" style=\"position:absolute;left:0px;top:0px;\"><table cellpadding=0 cellspacing=0 border=0><tr><img src=\"white.gif\" height=13 width=1><td></td></tr></table></div>")
            document.write("<div id=\"r\" style=\"position:absolute;left:0px;top:0px;\"><table cellpadding=0 cellspacing=0 border=0><tr><img src=\"white.gif\" height=13 width=1><td></td></tr></table></div>")
            document.write("<div id=\"t\" style=\"position:absolute;left:0px;top:0px;\"><table cellpadding=0 cellspacing=0 border=0><tr><img src=\"white.gif\" height=1 width=18><td></td></tr></table></div>")
            document.write("<div id=\"b\" style=\"position:absolute;left:0px;top:0px;\"><table cellpadding=0 cellspacing=0 border=0><tr><img src=\"white.gif\" height=1 width=18><td></td></tr></table></div>")

            document.write("</div>")
           
            document.close()
            onload=positiongame
}

Numbers Game Javascript


This is a great online javascript game which is very enjoyable and very addictive. Just like the old "magic square" game that we all have played. Your visitors will keep coming back time and again for more. The game has full instructions on how to play withing the script. Free to download and virtually nothing to alter, simple copy and paste installation.
It is a large script, but follow the installation instructions and you should have no problems getting this great numbers javascript game operating on your site.
STEP 1
Copy and paste the code below into the <head> of your html document.
<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>

STEP 2
Place this event handler code into the <body> tag.
<body onLoad="loadBoard(4)">
STEP 3
Copy and paste this code between the <body> and </body> tags of your html document. There is nothing in this part of the script to alter.
<script>
<!-- Distributed by http://www.hypergurl.com --> 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:&nbsp;" + gtime + "
secs&nbsp;&nbsp;&nbsp;Moves:&nbsp;" + 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>

STEP 4
Copy and paste the code below into your html document directly after step 3.
You can change the home url in the top part of this code snippet. (7th line.) Nothing else to alter if you are happy with the setup and look.
<h2>Numbers
Game!</h2> <span class=msg>Original Games by &copy;Arun Narayanan,
Dec 2002<br>&nbsp;</span> <table border=6 width="80%"
cellpadding=4 cellspacing=0> <tr><td width="98%"> <h2>Arrange
the Numbers</h2> </td> <td align=center><input type=button
class=but value="Home Page" onclick="window.location.href='http://www.hypergurl.com/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 place the numbers in order using the "hole"
for temporary movement.</li> <li>Press the "Start Game"
button. The timer will 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>
Place 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>
Please do not ask for help if you have altered the script and it then does not work. Use your undo button or start again from scratch. This will save both your time and mine