iHanoi/js/iHanoiFunctions.js

var canvas = document.getElementById('planoDeFundo');
			var context = canvas.getContext('2d');
			var towerA = [], towerB = [], towerC = [];
			var toMove = null;
			var idF=" ", idT= " ";
			var nMovements = 0, nDisks;
			var moves="";
			var acertos;
			var optimalSolution;
					 	//NavyBlue  Lime     Fuchsia   yellow   Orange   LightSteelBlue  red
			var colors = ["#000080","#00FF00", "#FF00FF", "yellow", "#FFA500", "#B0C4DE","red"];
			

			function inicio (QntityDisks){
				nDisks = QntityDisks;
				optimalSolution= Math.pow(2,nDisks)-1;
				var x = 0;
				var y = 558;
				var w = 330;
				moves="";
				for (var i = 0; i < nDisks; i++) {
					var disk = new Disk(x,y,w,40,colors[i]);
					towerA.push(disk);
					x+=20;  //moves to the right
					y-=42; //moves up, +1 to separate disks
					w-=40; //reduces disk width
				}
				drawScene();
		    
			}

			class Disk{
				constructor(x,y,w,h,fill){
					this.x=x;
					this.y=y;
					this.w=w;
					this.h=h;
					this.fill=fill;
				}
				draw(){//(ctx, x, y, width, height, radius, fill, stroke)
					context.fillStyle = this.fill;
					context.strokeStyle = "black";
					roundRect(context, this.x, this.y, this.w, this.h, 20, 20, true);
				}
				clear(){
					context.clearRect(this.x, this.y, this.w, this.h);
				}
			}
			function reinicio (){
				while(towerA.length>0){
					towerA.pop();
				}
				while(towerB.length>0){
					towerB.pop();
				}
				while(towerC.length>0){
					towerC.pop();
				}
				nMovements=0;
				idF = " ";
				idT=" ";
				toMove=null;
				inicio();
			}
			function drawTowers (){
				context.beginPath();
				<!-- torre 1 -->
				context.fillStyle = 'black';
				context.fillRect(160, 260, 10, 340);//x, y, largura, altura
			    
			    <!--Base t1-->
				context.fillRect(0, 600, 330, 15);

				<!-- torre 2 -->
				context.fillRect(505, 260 ,10, 340);

			    <!--Base t2-->
				context.fillRect(345, 600, 330, 15);

				<!-- torre 3 -->
				context.fillRect(850, 260, 10, 340);

			    <!--Base t3-->
				context.fillRect(690, 600, 330, 15);
			}

			function drawDisks (){
				for(i=0; i<towerA.length; i++){
					towerA[i].draw();
				}
				for(i=0; i<towerB.length; i++){
					towerB[i].draw();
				}
				for(i=0; i<towerC.length; i++){
					towerC[i].draw();
				}
			}

			function drawScene (){
				context.clearRect(0, 0, canvas.width, canvas.height);
				drawTowers();
				drawDisks();
				drawFromTo();
			}

			function buttonClick (id){
				if(toMove == null && getTower(id).length>0){
					toMove = id;
					idF= String.fromCharCode(65+id);
					idT= " ";
					drawScene();

				} else if(toMove != null && toMove != id){
					idT = String.fromCharCode(65+id);
					moveDisk(toMove, id);
					toMove=null;
				}
			}

			function getTower (id){
				switch(id){
					case 0:
						return towerA;
					case 1:
						return towerB;
					case 2:
						return towerC;
				}
			}

			function drawFromTo (){
				context.font = "50px Arial";
				context.fillStyle = "black";
				context.fillText("Move from "+idF+" to "+idT, 50, 50);
				context.fillText("Movements: "+nMovements, 50, 100);
			}


			function moveDisk (origin, destiny){
				var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
				moves+="\n"+origin+" "+destiny;
				console.clear();
				console.log(moves);
				
				topDiskOrigin = originTower[originTower.length-1];
				if(destinyTower.length>0){
					topDiskDestiny = destinyTower[destinyTower.length-1];
					if(topDiskOrigin.w<topDiskDestiny.w){
						topDiskOrigin.x += 345*(destiny-origin);
						topDiskOrigin.y += 42*(originTower.length-destinyTower.length-1);
						originTower.pop();
						destinyTower.push(topDiskOrigin);
						nMovements++;
						drawScene();
					} else{
						alert("Movimento Inválido");
						idF =" ";
						idT =" ";
						drawScene();						
					}
				}else{	
					topDiskOrigin.x += 345*(destiny-origin);
					topDiskOrigin.y += 42*(originTower.length-destinyTower.length-1);
					originTower.pop();
					destinyTower.push(topDiskOrigin);
					nMovements++;
					drawScene();
				}
				acertos=0;
				if(towerC.length == nDisks && nDisks!=0){
					acertos=1;
					if(nMovements==optimalSolution){
						alert("You Won in the least amount of movements!!!\nCongratulations!!!");
					}else{
						alert("You Won!!!\nCongratulations!!");
					}
				}
			}

			function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
			  if (typeof stroke == "undefined" ) {
			    stroke = true;
			  }
			  if (typeof radius === "undefined") {
			    radius = 5;
			  }
			  ctx.beginPath();
			  ctx.moveTo(x + radius, y);
			  ctx.lineTo(x + width - radius, y);
			  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
			  ctx.lineTo(x + width, y + height - radius);
			  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
			  ctx.lineTo(x + radius, y + height);
			  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
			  ctx.lineTo(x, y + radius);
			  ctx.quadraticCurveTo(x, y, x + radius, y);
			  ctx.closePath();
			  if (stroke) {
			    ctx.stroke();
			  }
			  if (fill) {
			    ctx.fill();
			  }        
			}
			inicio();