Tower of Hanoi DHTML game
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}
/***********************************************
* 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=1;i–){
disk = document.getElementById(“disk”+i);
disk.style.zIndex=++zindex;
if (i0 && !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) &&
(parseInt(objTower3.style.top)+parseInt(objTower3.style.height)>posY)
){
indexTo=3;
}
else if ((tower2Left=posX)){ //in the vicinity of tower 2
indexTo=2;
}
else if ((tower1Left=posX)){ //in the vicinity of tower 1
indexTo=1;
}
else indexTo = indexFr;
return false;
}
function dropDisk(disk){
var f=document.hanoi;
document.onmousemove=new Function(“return false”);
if (!drag) return;
var gameStatus=false;
var topDisk = disksOnTowers[indexTo-1][0];
if (indexFr==indexTo){
getNewTop(indexFr,null);
pushDisk(disk,indexFr); //put disk back to original tower
getNewTop(indexFr,disk);
}
else if (topDisk==null) {
pushDisk(disk,indexTo);
getNewTop(indexFr,null);
getNewTop(indexTo,disk);
movectr++;
currTower=indexTo;
prevTower=indexFr;
f.btnUndo.disabled=false;
}
else if (parseInt(disk.style.width)minmove) msg=”\nYou can do better than that.”
else msg=””;
alert(“Game Over !!!”+msg);
gameOver=true;
}
return;
}
function checkStatus(){
var gameStat = false;
var disks=0;
for (var i=0;i<disksOnTower3.length;i++){
if (disksOnTowers[2][i]!=null) disks++;
}
if (disks==parseInt(document.hanoi.diskno.options[document.hanoi.diskno.options.selectedIndex].text)) gameStat=true;
return gameStat;
}
function pushDisk(disk,index){
var diskWidth = parseInt(disk.style.width);
var towerLeft = parseInt(document.getElementById("tower"+index).style.left);
var topDisk = disksOnTowers[index-1][0];
if (topDisk!=null){
topDiskWidth = parseInt(topDisk.style.width);
topDiskTop = parseInt(topDisk.style.top);
disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
disk.style.top=topDiskTop-diskheight-1+"px";
}
else {
disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
disk.style.top=basetop-diskheight-1+"px";
}
}
function getNewTop(index,disk){
if (disk==null){ //pop
for (var i=0;i=1;i–){
disksOnTowers[index-1][i]=disksOnTowers[index-1][i-1];
}
disksOnTowers[index-1][0]=disk;
}
}
function solve(btn){
if (btn.value==”Solve”){
if (movectr>0 && !gameOver && !stop)
if (!confirm(“Current game will be aborted, would you like to continue?”)) return;
btn.value=”Stop”;
initVars();
stop=false;
demo=true;
var f=document.hanoi;
f.btnIns.disabled=true;
f.btnRes.disabled=true;
f.btnUndo.disabled=true;
disknum = parseInt(f.diskno.options[f.diskno.options.selectedIndex].text);
drawDisks(disknum);
getMoves(0, 2, 1, disknum);
t=window.setTimeout(“moveDisk()”,delay);
}
else {
if (t) {
window.clearTimeout(t);
btn.value=”Solve”;
frm.btnIns.disabled=false;
frm.btnRes.disabled=false;
t = null;
stop=true;
demo=false;
}
}
}
function moveDisk(){
frm = document.hanoi;
disk=disksOnTowers[arrFr[pos]][0];
pushDisk(disk,arrTo[pos]+1);
getNewTop(arrFr[pos]+1,null);
getNewTop(arrTo[pos]+1,disk);
movectr++;
frm.yourmove.value=movectr;
pos++;
if (movectr 1) {
getMoves(from, empty, to, numDisk – 1);
arrFr[idx] = from;
arrTo[idx++] = to;
getMoves(empty, to, from, numDisk – 1);
}
else {
arrFr[idx] = from;
arrTo[idx++] = to;
}
}
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);
}
| No. of disks |
3 |
| Minimum no. of moves | |
| Your no. of moves | |
This DHTML script is featured on Dynamic Drive.
dzapk 