Widget Games untuk Blog

in Artikel, Blogger - on 06:37 - No comments

Snake

/****************************************************
* Cross Browser Snake game- By Arya Dipa- http://www.aryadipa.tk
****************************************************/
			function cbsnake(){
			
				//Pixels to move at once
				this.jump = 8;
				//Size of snake. Make this one less than

jump. Doesn't have to be,but adds good effect
				this.sos = 7;
				//Size of board
				//DANGER!!! this.sofb must be EVENLY

dividable by this.jump DANGER!!!!
				this.sofb = 400;
				//Set things up
				this.daway = this.sofb - this.jump;
				this.correct = new Array();
				this.correct[0] = 0;
				while(this.correct[this.correct.length -1]

!= this.daway){
					this.correct[this.correct.length]

= this.correct[this.correct.length -1]+this.jump
				}
				this.zero = 0;
				var gameboard = ' <div class="board"

id="board">
 <div id="i2">
 This is a simple game of Snake. Select a speed

then use your arrow keys to attempt and eat the apple(red block), but

watch out for the walls and yourself. At any time you can pause the game

by pressing the space bar.This game is available at <a

href="http://www.webtech101.com">Web Tech 101</a> and <a

href="http://www.dynamicdrive.com">Dynamic Drive</a> </div>
</div>
<div

class="board" id="score">
 <span id="cscore">0</span> <span id="buttons">

<button type="button" id="medium"  onClick="snake.medium

()">Medium</button> <button type="button" id="fast"  onClick="snake.fast

()">Fast</button> </span></div>
';
				document.write(gameboard);
			}
			
				cbsnake.prototype.setup = function

(setspeed){
					var thisObj = this;
					//Score...
					this.score = 0;
					//Snake Direction
					this.sdir = 'none';
					this.sdirb = 'none'; 
					this.sdirp = 'none';
					//Snake arrays
					this.ctop = new Array();
					this.cleft = new Array();
					//Top of snake class
					this.ctop[0] = 200;
					this.ctop[1] = -8;
					//Left of Snake class
					this.cleft[0] = 200;
					this.cleft[1] = -8;
					//current top of apple
					this.atop = 0;
					//current left of apple
					this.aleft = 0;
					//Milliseconds between move
					this.speed = setspeed;
					document.getElementById

('board').innerHTML = '<div id="apple">
</div>
<div id="snake0"

class="snake">
</div>
<div id="snake1" class="snake">
</div>
';
					this.moveapple();
					this.stopgame = false;
					setTimeout(function(){

thisObj.msnake() },this.speed);
					document.onkeydown = function(e){

return thisObj.snakedir(e); };
				}
				cbsnake.prototype.slow = function(){
					this.setup(100);
					this.buttons('true');
					document.getElementById

('slow').blur();
				}
				cbsnake.prototype.medium = function(){
					this.setup(70);
					this.buttons('true');
					document.getElementById

('medium').blur();
				}
				cbsnake.prototype.fast = function(){
					this.setup(30);
					this.buttons('true');
					document.getElementById

('fast').blur();
				}
				cbsnake.prototype.rannum = function

(num1,num2){
					num1 = parseInt(num1);
					num2 = parseInt(num2);
					var generator = Math.random()*

(Math.abs(num2-num1));
					generator = Math.round

(num1+generator);
					return generator;
				}
				cbsnake.prototype.moveapple = function(){
					var usethis = false;
					while(!usethis){
						this.atop = this.correct

[this.rannum(0,this.correct.length-1)];
						this.aleft = this.correct

[this.rannum(0,this.correct.length-1)];
						if(this.numInArray

(this.ctop,this.cleft,this.atop,this.aleft) == 0){
							usethis = true;
						}			
					}
					document.getElementById

('apple').style.top = this.atop+"px";
					document.getElementById

('apple').style.left = this.aleft+"px";
				}
				cbsnake.prototype.snakedir = function(e){  
						if(!e){
							//IE...
							e = window.event;
						}
						switch(e.keyCode){
							case 38:
								if

(this.sdir != 'down' && this.sdirp != 'down'){

this.sdirb = 'up';

this.sdirp = 'up';
								}
								break;
							case 40:
								if

(this.sdir != 'up' && this.sdirp != 'up'){
								this.sdirb

= 'down';
								this.sdirp

= 'down';
								}
								break;
							case 37:
								if

(this.sdir != 'right' && this.sdirp != 'right'){
								this.sdirb

= 'left';
								this.sdirp

= 'left';
								}
								break;
							case 39:
								if

(this.sdir != 'left' && this.sdirp != 'left'){
								this.sdirb

= 'right';
								this.sdirp

= 'right';
								}
								break;
							case 32:
								if

(this.sdir == 'none' && this.sdirp != 'none'){

this.sdirb = this.sdirp;

this.sdirp = 'none';
								}
								else{
								this.sdirp

= this.sdir;
								this.sdirb

= 'none';
								}
								break;
						}
						return this.stopgame;
						
				}
				cbsnake.prototype.msnake = function(){
					if(this.stopgame === false){
						if(this.sdir != 'none'){
							this.moveall();
						}
						var thisObj = this;
						switch(this.sdir){
								case 'up':

this.ctop[0] = this.ctop[0] - this.jump;

document.getElementById('snake0').style.top = this.ctop[0]+"px";

if((this.ctop[0] == this.zero && this.sdirb == 'up') || this.ctop[0] <

this.zero){

this.gover();
									}

break;
								case

'down':

this.ctop[0] = this.ctop[0] + this.jump;

document.getElementById('snake0').style.top = this.ctop[0]+"px";

if((this.ctop[0] == this.daway && this.sdirb == 'down') || this.ctop[0] >

this.daway){

this.gover();
									}

break;
								case

'left':

this.cleft[0] = this.cleft[0] - this.jump;

document.getElementById('snake0').style.left = this.cleft[0]+"px";

if((this.cleft[0] == this.zero && this.sdirb == 'left') || this.cleft[0] <

this.zero){

this.gover();
									}

break;
								case

'right':

this.cleft[0] = this.cleft[0] + this.jump;

document.getElementById('snake0').style.left = this.cleft[0]+"px";

if((this.cleft[0] == this.daway && this.sdirb == 'right') || this.cleft[0]

> this.daway){

this.gover();
									}

break;
						}
						if(this.sdir != 'none'){
							this.hitself();
							this.happle();
						}
					this.sdir = this.sdirb
					setTimeout(function(){

thisObj.msnake() },this.speed);
					}
				}
				cbsnake.prototype.gover = function(){
					if(!this.stopgame){
						this.stopgame = true;
						var inner =

document.getElementById('board').innerHTML;
						document.getElementById

('board').innerHTML = inner+'<div id="notice">
Game Over! Your Score was

'+this.score+'</div>
<div id="i2">
This is a simple game of Snake. Select a

speed then use your arrow keys to attempt and eat the apple(red block),

but watch out for the walls and yourself. At any time you can pause the

game by pressing the space bar.This game is available at <a

href="http://www.aryadipa.tk">Arya Dipa Blog's</a></div>
';
						document.getElementById

('apple').style.backgroundColor = '#D7BEBE';
						for

(i=0;i<this.cleft.length;i++){

document.getElementById('snake'+i).style.backgroundColor = '#BEBEBE';
						}
						this.buttons('');
					}
				}
				cbsnake.prototype.happle = function(){
					if(this.atop == this.ctop[0] &&

this.aleft == this.cleft[0]){
						//HIT!!!
						this.score++;
						document.getElementById

('cscore').innerHTML = this.score;
						this.moveapple();
						this.addsnake();
					}
				}
				cbsnake.prototype.addsnake = function(){
				var newsnake = document.createElement

('div');
				var newid = 'snake'+this.cleft.length;
				newsnake.setAttribute('id',newid);
				//this crap is for IE. I would rather add

the class name.
				newsnake.style.position = 'absolute';
				newsnake.style.top = '-10px';
				newsnake.style.left = '-10px';
				newsnake.style.display = 'none';
				newsnake.style.backgroundColor = 'black';
				newsnake.style.height = '7px';
				newsnake.style.width = '7px';
				newsnake.style.overflow = 'hidden';
				document.getElementById

('board').appendChild(newsnake);
				this.cleft[this.cleft.length] = -10;
				this.ctop[this.ctop.length] = -10;
				}
				cbsnake.prototype.moveall = function(){
					var i = this.ctop.length - 1;
					while(i != 0){
						document.getElementById

('snake'+i).style.top = document.getElementById('snake'+(i-1)).style.top;
						document.getElementById

('snake'+i).style.left = document.getElementById('snake'+(i-

1)).style.left;
						document.getElementById

('snake'+i).style.display = 'block';
						this.ctop[i] = this.ctop

[i-1];
						this.cleft[i] =

this.cleft[i-1];
						i = i - 1;
					}
				}
				cbsnake.prototype.numInArray = function

(array,array2,value,value2){
					var n = 0;
					for (var i=0; i < array.length; i

++) {
						if (array[i] === value &&

array2[i] === value2) {
							n++;
						}
					}
					return n;
				}
				cbsnake.prototype.hitself = function(){
					if(this.numInArray

(this.ctop,this.cleft,this.ctop[0],this.cleft[0]) > 1){
						this.gover();
					}
				}
				cbsnake.prototype.buttons = function

(setto){
					document.getElementById

('slow').disabled = setto;
					document.getElementById

('medium').disabled = setto;
					document.getElementById

('fast').disabled = setto;
				}
		</script><br />
<style type="text/css">
			.board{
			width: 399px;
			background-color: lightgrey;
			border: 1px solid gray;
			position: relative;
			margin-left: 0;
			margin-top: 0;
			}
			#board{
			height: 399px;
			border-bottom: 0px;
			}
			#apple{
			position: absolute;
			background-color: red;
			height: 7px;
			width: 7px;
			overflow: hidden;
			}
			.snake{
			position: absolute;
			top: 200px;
			left: 200px;
			background-color: black;
			height: 7px;
			width: 7px;
			overflow: hidden;
			}
			.snake2{
			position: absolute;
			top: -10px;
			left: -10px;
			background-color: black;
			height: 7px;
			width: 7px;
			overflow: hidden;
			}
			#score{
			height: 50px;
			margin-top: 0px;
			}
			#cscore{
			color: black;
			padding-left: 10px;
			float: left;
			width: 25%;
			font-size: xx-large;
			}
			#buttons{
			float: right;
			width: 50%;
			text-align: right;
			padding-top: 10px;
			}
			#notice{
			position: absolute;
			top: 1em;
			left: 1em;
			right: 1em;
			text-align: center;
			font-size: 150%;
			}
			#i2{
			position: absolute;
			bottom: 1em;
			left: 1em;
			right: 1em;
			text-align: center;
			font-size: 95%;
			}
		</style>

Tic Tac Toe

//Visit http://www.aryadipa.tk for this script

var image1=new Image(); image1.src="ex.gif";
var image2=new Image(); image2.src="oh.gif";

var level=1, myway, mynextmove;
var tmp, done, iswon, content;
var pcwins=[0,0,0,0];
var playerwins=[0,0,0,0];
var draws=[0,0,0,0]; 
var playerstarts=true;
var moves=new Array();
var game=new Array(9);
var choices=[11,12,13,21,22,23,31,32,33];
var corners=[11,13,31,33];
var ways=new Array();
ways[1]=[0,11,12,13];
ways[2]=[0,21,22,23];
ways[3]=[0,31,32,33];
ways[4]=[0,11,21,31];
ways[5]=[0,12,22,32];
ways[6]=[0,13,23,33];
ways[7]=[0,11,22,33];
ways[8]=[0,13,22,31]; 
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

function init(){
oktoplay=true;
iswon=false;
done=0;
writetext(4);
moves[11]=0; moves[12]=0; moves[13]=0; moves[21]=0; moves[22]=0; moves[23]=0; moves[31]=0; moves[32]=0; moves[33]=0;
for(i=0;i<=8;i++){
document.images['rc'+choices[i]].src="nothing.gif";
document.images['rc'+choices[i]].alt="";
game[i]=0;
}
if(!playerstarts)pcturn();
}

function writetext(num){
switch(num){
case 1: content='This game is a draw';
break;
case 2: content='The computer won this round.';
break;
case 3: content='You won this round.';
break;
case 4: content='LEVEL: '+level+'\n\nComputer Wins:  This level- '+pcwins[level]+'  (Total: '+(pcwins[0]+pcwins[1]+pcwins[2]+pcwins[3])+')\nPlayer Wins  :  This level- '+playerwins[level]+'  (Total: '+(playerwins[0]+playerwins[1]+playerwins[2]+playerwins[3])+')\nDraws        :  This level- '+draws[level]+'  (Total: '+(draws[0]+draws[1]+draws[2]+draws[3])+')';
break;
}

document.scores.scores2.value=content

if(num<4)setTimeout('init(4)',1000);
}

function setlevel(x){
	if (level!=x){
		level=x;
		init();
}}

function selecCorner(which){
if (which=="empty"){
do{
tmp=corners[Math.floor(Math.random()*4)];
}while(moves[tmp]!=0);
}
else
tmp=corners[Math.floor(Math.random()*4)];
}

function pcrandom(){
do{
tmp=choices[Math.floor(Math.random()*9)];
}while(moves[tmp]!=0);
}

function pcturn(){
tmp='00';
pcstrategy(true);
if(tmp=='00')pcstrategy(false);
if(tmp=='00' && level>1)
	pcdontlose();
if(tmp=='00')
	pcrandom();
moves[tmp]=2;
game[done]=tmp;
document.images['rc'+tmp].src="oh.gif";
document.images['rc'+tmp].alt=" O ";
done++;
findwinner(false);
}

window.onload=init;

window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
}
</script><br />
<br />
<br />
<table cellpadding="0" cellspacing="0" border="5" bordercolor="black" bordercolorlight="gray" bgcolor="white">
<tr> <td width="55"><a href="javascript:setbutton(11)"><img src="nothing.gif" border="0" name="rc11"></a></td> <td width="55"><a href="javascript:setbutton(12)"><img src="nothing.gif" border="0" name="rc12"></a></td> <td width="55"><a href="javascript:setbutton(13)"><img src="nothing.gif" border="0" name="rc13"></a></td> </tr>
<tr> <td width="55"><a href="javascript:setbutton(21)"><img src="nothing.gif" border="0" name="rc21"></a></td> <td width="55"><a href="javascript:setbutton(22)"><img src="nothing.gif" border="0" name="rc22"></a></td> <td width="55"><a href="javascript:setbutton(23)"><img src="nothing.gif" border="0" name="rc23"></a></td> </tr>
<tr> <td width="55"><a href="javascript:setbutton(31)"><img src="nothing.gif" border="0" name="rc31"></a></td> <td width="55"><a href="javascript:setbutton(32)"><img src="nothing.gif" border="0" name="rc32"></a></td> <td width="55"><a href="javascript:setbutton(33)"><img src="nothing.gif" border="0" name="rc33"></a></td> </tr>
</table>
<br />
<br />
<br />
<form name="scores">
<textarea name="scores2" cols="60" rows="6" ><br />
<br />
<br />
<br />
<br />
<input id="level" name="level" onclick="setlevel(0)" type="radio" />level 0 --  the Computer is totally dumb. <br />
<br />
<input checked="" id="level" name="level" onclick="setlevel(1)" type="radio" />level 1 --  Computer is smarter (original version). <br />
<br />
<input id="level" name="level" onclick="setlevel(2)" type="radio" />level 2 --  You MAY win (only when you start). <br />
<br />
<input id="level" name="level" onclick="setlevel(3)" type="radio" />level 3 --  Computer NEVER lose. <br />
<br />

Tower of Hanoi

<html><br />
<head><br />
<title>Tower of Hanoi DHTML game</title><br />
<style type="text/css">
table {font:bold 13px Verdana}
p {font:normal 11px Tahoma,Verdana}
input,select {font:normal 12px Tahoma,Verdana}
select {width:40px}
a {font-weight:bold}
.tower {position:absolute;visibility:visible;left:77px;top:184px;font:bold 10px Tahoma}
.container {position:absolute;visibility:visible;}
.towervert {position:absolute;visibility:visible;border:1px solid black;background-color:black}
.towerhoriz {position:absolute;visibility:visible;border:1px solid black;font-size:1px;background-color:black}
.disk {position:absolute;visibility:visible;border:1px solid black}
</style><br />
<script type="text/javascript">

/***********************************************
* Tower of Hanoi- by Glenn G. Vergara (glenngv@REMOVETHISyahoo.com)
* This notice must stay intact for use
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
***********************************************/

var delay = 200; //in milliseconds

var	drag=false;
    var objDisk=null;
    var x = 0;
    var y = 0;
    var disksOnTower1 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTower2 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTower3 = new Array(null,null,null,null,null,null,null,null);
    var disksOnTowers = new Array(disksOnTower1,disksOnTower2,disksOnTower3);
    var offsetleft = 30;
    var offsettop = 30;
    var offsettower = 20;
    var offsethoriz = 30;
    var basetop = 0;
    var diskheight = 0;
    var midhoriztower = 0;
    var indexTo=1;
    var indexFr=1;
    var movectr=0;
    var gameOver=false;
    var prevIndex=0;
    var zindex = 0;
    var currTower=1;
    var prevTower=1;
    var demo=false;
    var arrFr = new Array(255);
    var arrTo = new Array(255);
    var idx = 0;
    var pos = 0;
    var t=null;
    var stop=false;

function init(){
        if (document.getElementById){
        	var diskno = document.hanoi.diskno;

diskno.options.selectedIndex = 0;
            drawTowers();
            drawDisks(parseInt(diskno.options[diskno.options.selectedIndex].text));		
        }
    }
    
    function initVars(){
        for (var i=0;i<disksOnTower1.length;i++){
            disksOnTower1[i]=null;
            disksOnTower2[i]=null;
            disksOnTower3[i]=null;
        }
        drag = false;
        indexTo = 1;
        indexFr = 1;
        movectr = 0;
        zindex = 0;
        idx = 0;
        pos = 0;
        t = null;
        gameOver=false;
        stop=false;
        demo=false;
        document.hanoi.btnUndo.disabled=true;
    }
    
    function drawTowers(){
    	var title=document.getElementById("title");
    	var tower1=document.getElementById("tower1");
    	var tower2=document.getElementById("tower2");
    	var tower3=document.getElementById("tower3");
    	var settings=document.getElementById("settings");
        var titlewidth = parseInt(title.style.width);
        var titleheight = parseInt(title.style.height);        
        var towerwidth = parseInt(tower1.style.width);
        var towerheight = parseInt(tower1.style.height);
        var settingswidth = parseInt(settings.style.width);
        midhoriztower = parseInt(document.getElementById("horiztower1").style.width)/2;
        diskheight = parseInt(document.getElementById("disk1").style.height);
                
        title.style.left=offsetleft+(1.5*towerwidth)+offsettower-(titlewidth/2)+"px";
        title.style.top=offsettop+"px";
        tower1.style.left=offsetleft+"px";
        tower1.style.top=offsettop+titleheight+offsethoriz+"px";
        tower2.style.left=offsetleft+towerwidth+offsettower+"px";
        tower2.style.top=offsettop+titleheight+offsethoriz+"px";
        tower3.style.left=offsetleft+(towerwidth+offsettower)*2+"px";
        tower3.style.top=offsettop+titleheight+offsethoriz+"px";
        settings.style.left=offsetleft+(1.5*towerwidth)+offsettower-(settingswidth/2)+"px";
        settings.style.top=parseInt(tower1.style.top)+towerheight+offsethoriz+"px";
    }
    
    function drawDisks(disknum){
    	var tower1=document.getElementById("tower1");
        var disktop = parseInt(tower1.style.top)+parseInt(document.getElementById("horiztower1").style.top);
        var lefttower1 = parseInt(tower1.style.left);
        var disk;
        var f=document.hanoi;
        basetop = disktop;
        for (var i=disksOnTower1.length;i>=1;i--){
        	disk = document.getElementById("disk"+i);
			disk.style.zIndex=++zindex;	
            if (i<=disknum){
                disk.style.left=lefttower1+midhoriztower-parseInt(disk.style.width)/2+"px";
                disk.style.top=disktop-diskheight-1+"px";
                disktop = parseInt(disk.style.top);
                disksOnTowers[0][i-1]=disk;
            }            
            else {
                disk.style.left="-250px";
                disk.style.top="-250px";
                disksOnTowers[0][i-1]=null;
            }
        }       
        f.minmove.value=f.diskno.options[f.diskno.options.selectedIndex].value;
        f.yourmove.value=0;
    }
    
    function newGame(obj){
        if (movectr>0 && !gameOver && !stop){
            if (confirm("Current game will be aborted, would you like to continue?")){
                initVars();
                drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
            }
            else document.hanoi.diskno.options.selectedIndex=prevIndex;
        }
        else {
            initVars();
            drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
        }
    }
    
    function initializeDrag(disk,e){
    	if (!e) e=event;
        if (stop){
            alert("You cannot continue solving the puzzle after clicking the 'Stop' button.\nClick 'Restart' button or select no. of disks to continue playing.");
            return;
        }
        indexFr = indexTo;
        if (disk.id!=disksOnTowers[indexFr-1][0].id || gameOver || demo) return;
        objDisk=disk;
        x=e.clientX;
        y=e.clientY;
        tempx=parseInt(disk.style.left);
        tempy=parseInt(disk.style.top);
        document.onmousemove=dragDisk;
    }
    
    function dragDisk(e){
        if (!e) e=event;
        zindex++;
        drag=true;
        var posX = tempx+e.clientX-x;
        var posY = tempy+e.clientY-y;
        var objTower1 = document.getElementById("tower1");
        var objTower2 = document.getElementById("tower2");
        var objTower3 = document.getElementById("tower3");
        var tower1Left = parseInt(objTower1.style.left);
        var tower2Left = parseInt(objTower2.style.left);
        var tower3Left = parseInt(objTower3.style.left);
        var tower3Width = parseInt(objTower3.style.width);
        
        objDisk.style.zIndex=zindex;
        objDisk.style.left=posX+'px';
        objDisk.style.top=posY+'px';        
        
        if (e.clientX>=document.body.clientWidth-10 || e.clientY>=document.body.clientHeight-5 || e.clientX==5 || e.clientY==5){ //outside available window
            indexTo=indexFr;
            dropDisk(objDisk);
        }
        else if ( //in the vicinity of tower 3
            (tower3Left<=posX) && 
            (tower3Left+tower3Width>=posX) && 
            (parseInt(objTower3.style.top)+parseInt(objTower3.style.height)>posY)
            ){
            indexTo=3;
        }
        else if ((tower2Left<=posX) && (tower2Left+tower3Width>=posX)){ //in the vicinity of tower 2
            indexTo=2;
        }
        else if ((tower1Left<=posX) && (tower1Left+parseInt(objTower1.style.width)>=posX)){ //in the vicinity of tower 1
            indexTo=1;
        }
        else indexTo = indexFr;
        return false;
    }

function unDo(btn){
        disk=disksOnTowers[currTower-1][0];
        pushDisk(disk,prevTower);
        getNewTop(currTower,null);
        getNewTop(prevTower,disk);
        movectr--;
        document.hanoi.yourmove.value=movectr;
        btn.disabled=true;
    }
    
    function displayIns(){
        var msg="Try to move all the disks from TOWER 1 to TOWER 3.\n";
        msg+="You may only move one disk at a time.\n";
        msg+="You must never allow a bigger disk to go on top of a smaller disk.";
        alert(msg);
    } 
</script><br />
</head><br />
<body onload="init();" onselectstart="return false" oncontextmenu="return false"><br />
<form name="hanoi">
<br />
<div id="title" style="position:absolute;visibility:visible;left:-250px;top:-250px;width:160px;height:20px;font:bold 20px Tahoma;text-align:center;">
Tower of Hanoi</div>
<br />
<div id="tower1" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=1">
<div id="verttower1" class="towervert" style="left:99px;top:10px;width:3px;height:170px">
</div>
<div id="horiztower1" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px">
</div>
<div class="tower">
TOWER 1</div>
</div>
<br />
<div id="tower2" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=2">
<div id="verttower2" class="towervert" style="left:99px;top:10px;width:3px;height:170px">
</div>
<div id="horiztower2" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px">
</div>
<div class="tower">
TOWER 2</div>
</div>
<br />
<div id="tower3" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=3">
<div id="verttower3" class="towervert" style="left:99px;top:10px;width:3px;height:170px">
</div>
<div id="horiztower3" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px">
</div>
<div class="tower">
TOWER 3</div>
</div>
<br />
<div id="disk1" class="disk" style="left:-250px;top:-250px;width:50px;height:19px;background-color:pink" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 1">
</div>
<div id="disk2" class="disk" style="left:-250px;top:-250px;width:70px;height:19px;background-color:violet" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 2">
</div>
<div id="disk3" class="disk" style="left:-250px;top:-250px;width:90px;height:19px;background-color:indigo" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 3">
</div>
<div id="disk4" class="disk" style="left:-250px;top:-250px;width:110px;height:19px;background-color:blue" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 4">
</div>
<div id="disk5" class="disk" style="left:-250px;top:-250px;width:130px;height:19px;background-color:green" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 5">
</div>
<div id="disk6" class="disk" style="left:-250px;top:-250px;width:150px;height:19px;background-color:yellow" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 6">
</div>
<div id="disk7" class="disk" style="left:-250px;top:-250px;width:170px;height:19px;background-color:orange" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 7">
</div>
<div id="disk8" class="disk" style="left:-250px;top:-250px;width:190px;height:19px;background-color:red" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 8">
</div>
<br />
<div id="settings" class="container" style="left:-250px;top:-250px;width:260px;">
<table>
<tr><td>No. of disks</td>
<td><br />
<select name="diskno" onchange="newGame(this)" onclick="prevIndex=this.options.selectedIndex"><br />
<option value="7" selected>3</option><br />
<option value="15">4</option><br />
<option value="31">5</option><br />
<option value="63">6</option><br />
<option value="127">7</option><br />
<option value="255">8</option><br />
</select><br />
</td></tr>
<tr><td>Minimum no. of moves  </td>
<td><input name="minmove" style="border:none" size="3" value="255" readonly="readonly" /></td></tr>
<tr><td>Your no. of moves</td>
<td><input name="yourmove" style="border:none" size="3" value="0" readonly="readonly" /></td></tr>
<tr><td colspan="2" align="center"><br />
<input type="button" name="btnIns" value="Instructions" onclick="displayIns()" /><br />
<input type="button" name="btnRes" value="Restart" onclick="newGame(document.hanoi.diskno)" /><br />
<input type="button" name="btnUndo" value="Undo" onclick="unDo(this)" disabled="disabled" /><br />
<input type="button" name="btnSolve" value="Solve" onclick="solve(this)" /><br />
</td></tr>
</table>
<p>
 </p>
<p>
This DHTML script is featured on <a href="http://www.dynamicdrive.com/dynamicindex12/hanoi.htm" target="_blank">Dynamic Drive</a>.<br />
</p>
</div>
</form>
</body><br />
</html><br />
<br />

Knowledge is free

Widget Games untuk Blog

Total Pageviews

Popular Posts