Hanoi

tema

by MariusNastasa

HTML

<h1>
  Hanoi Towers
</h1>
Number of disks:
<input type="text" id="disk">
<button onclick="showDisc()">Show disks</button>
<button onclick="start()">Start</button>

<canvas id="myCanvas" height="350" width="600">Your browser doesnt support canvas</canvas>

CSS

h1 {
  font-family: verdana;
}

canvas {
  background-color: #d1d1d1;
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var diskNumber;
var A = [];
var B = [];
var C = [];

var T1 = 100;
var T2 = 300;
var T3 = 500;

ctx.fillRect(T1, 200, 13, 150);
ctx.fillRect(T2, 200, 13, 150);
ctx.fillRect(T3, 200, 13, 150);

function showDisc() {
	A = [];
	B = [];
	C = [];
	ctx.clearRect(0, 0, c.width, c.height);
	
	ctx.fillRect(T1, 200, 13, 150);
	ctx.fillRect(T2, 200, 13, 150);
	ctx.fillRect(T3, 200, 13, 150);

  diskNumber = document.getElementById("disk").value;

	for (var i=0; i < diskNumber; i++) {
		 A.push(["#"+Math.max(Math.floor(Math.random()*999999)+1, 100000), i]); 
	}
	
	console.log(A);
	
	displayDisks(A, 50);
	displayDisks(B, 250);
	displayDisks(C, 450);
}

function displayDisks(tija, x) {
	for (i=0; i < tija.length; i++) { 
 		ctx.fillStyle = tija[i][0];
		ctx.fillRect(x+tija[i][1]*10, 340-tija[i][1]*15, 113-tija[i][1]*20, 12);
	}
}

function start() {
	hanoi(diskNumber, A, B, C);
}

function hanoi(disc, from, temp, to) {
  if(disc > 0){
    hanoi(disc-1, from, to, temp);
    console.log('Move disc '+disc+' from '+from+' to '+to);
 
			to.push(from.pop());
		//}
			
		debugger;
		
		hanoi(disc-1, temp, from, to);
  }
}