bernardo
/
iHanoi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
							<!DOCTYPE html>
<meta charset="UTF-8">
<html>
	<head>
		<title> Torre de Hanoi </title>
		<Style>
			#planoDeFundo {
				background :transparent;
				left: 10%;
				top : 10%;
				width: 80%; 
				height: 60%;
				position: absolute;
			}
			#fim_button{
				position: absolute;
				border:1px solid gray;
				border-radius: 7%;
				font-size: 0.875;
				word-wrap: break-word;
				max-width: 5%;
				left:10%;
				top: 5%;
			}
			#atualiza_button{
				position:absolute;
				border:1px solid gray;
				border-radius: 7%;
				font-size: 0.875;
				word-wrap: break-word;
				max-width: 7%;
				left: 15%;
				top:5%;
			}

			#A_button{
				position:absolute;
				border:1px solid gray;
				border-radius: 7%;
				font-size: 0.875;
				word-wrap: break-word;
				width: 20%;
				max-width: 20%;
				left: 13%;
				top:71%;
			}
			#B_button{
				position:absolute;
				border:1px solid gray;
				border-radius: 7%;
				font-size: 0.875;
				word-wrap: break-word;
				width: 20%;
				max-width: 20%;
				left: 40%;
				top:71%;
			}
			#C_button{
				position:absolute;
				border:1px solid gray;
				border-radius: 7%;
				font-size: 0.875;
				word-wrap: break-word;
				width: 20%;
				max-width: 20%;
				left: 67%;
				top:71%;
			}


		</Style>
	</head>
	<body>
	<button id="fim_button">Fim</button>
	<button id="atualiza_button">Atualiza</button>
	<button id="A_button" onclick="buttonClick(0)">A</button>
	<button id="B_button" onclick="buttonClick(1)">B</button>
	<button id="C_button" onclick="buttonClick(2)">C</button>
	<select name ="Disks" onchange="reinicio()" id="selectDisks">
		<option value = "1">1 Disk</option>
		<option value = "2">2 Disk</option>
		<option value = "3">3 Disk</option>
		<option value = "4">4 Disk</option>
		<option value = "5">5 Disk</option>
		<option value = "6">6 Disk</option>
		<option value = "7">7 Disk</option>

	</select>
		<canvas id="planoDeFundo"  width="1024" height="768">
		Seu navegador não suporta o recurso Canvas. Atualize-o para utilizar esse recurso
		</canvas>
		<script>
			var canvas = document.getElementById('planoDeFundo');
			var context = canvas.getContext('2d');
			var towerA = [], towerB = [], towerC = [];
			var toMove = null;
			var idF=" ", idT= " ";
			var nMovements = 0, nDisks = 0;
					 	//NavyBlue  Lime     Fuchsia   lightPink   Orange   LightSteelBlue  Pink
			var colors = ["#000080","#00FF00", "#FF00FF", "#FFC0CB", "#FFA500", "#B0C4DE","#F441AC"];
			

			function inicio (){
				nDisks = document.getElementById('selectDisks').value;
				var x = 0;
				var y = 558;
				var w = 330;
				for (var i = 0; i < nDisks; i++) {
					var disk = new Disk(x,y,w,40,colors[i]);
					towerA.push(disk);
					x+=25;  //moves to the right
					y-=42; //moves up, +1 to separate disks
					w-=50; //reduces disk width
				}
				drawScene();
				console.log(y);
		    
			}

			class Disk{
				constructor(x,y,w,h,fill){
					this.x=x;
					this.y=y;
					this.w=w;
					this.h=h;
					this.fill=fill;
				}
				draw(){
					context.fillStyle = this.fill;
					context.fillRect(this.x, this.y, this.w, this.h);
				}
				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){
				console.log(id);
				if(toMove == null && getTower(id).length>0){
					toMove = id;
					idF= String.fromCharCode(65+id);
					idT= " ";
					drawScene();

				} else if(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 ", 50, 50);
				context.fillText("Movements: "+nMovements, 50, 100);
			}


			function moveDisk (origin, destiny){
				var originTower = getTower(origin), destinyTower = getTower(destiny), topDiskOrigin, topDiskDestiny;
				
				
				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();
				}
				if(towerC.length == nDisks && nDisks!=0){
					alert("You Won!!!\nCongratulations!!");
				}
			}


    	</script>

    	<script> inicio(); </script>
    	
  </body>
</html>