bernardo
/
iHanoi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
							<!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> 
		<canvas id="planoDeFundo">
		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 = [], toMove = null;
			var idF=" ", idT=" ";
			function inicio (){
						 	//NavyBlue  Lime     Fuchsia   lightPink   Orange   LightSteelBlue
				var colors = ["#000080","#00FF00", "#FF00FF", "#FFC0CB", "#FFA500", "#B0C4DE"];
				var x = 13.5;
				var y = 109;
				var w = 70;
				for (var i = 0; i < 6; i++) {
					var disk = new Disk(x,y,w,10,colors[i]);
					towerA.push(disk);
					x+=5;  //moves to the right
					y-=11; //moves up, +1 to separate disks
					w-=10; //reduces disk width
				}
				drawScene();
		    document.write("width:",canvas.width,"  height: ",canvas.height);

			}

			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 drawTowers(){
				context.beginPath();
				<!-- torre 1 -->
				context.rect(45,20,5, 100);//x, y, largura, altura
				context.fillStyle = 'yellow';
			    context.fill();
			    
			    <!--Base t1-->
				context.rect(13.5,120,70, 5);
			    context.fill();

				<!-- torre 2 -->
				context.rect(145,20 ,5, 100);
			    context.fill();

			    <!--Base t2-->
				context.rect(113.5,120,70, 5);
			    context.fill();

				<!-- torre 3 -->
				context.rect(245,20 ,5, 100);
			    context.fill();

			    <!--Base t2-->
				context.rect(213.5,120,70, 5);
			    context.fill();
			}

			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 drawFromTo(){
				context.font = "10px Arial";
				context.strokeText("Move from "+idF+" to "+idT, 10, 10);
			}

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

			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 += 100*(destiny-origin);
						topDiskOrigin.y += 11*(originTower.length-destinyTower.length-1);
						originTower.pop();
						destinyTower.push(topDiskOrigin);
						drawScene();
					} else{
						alert("Movimento Inválido");
						idF =" ";
						idT =" ";
						drawScene();

					}
				}else{	
					topDiskOrigin.x += 100*(destiny-origin);
					topDiskOrigin.y += 11*(originTower.length-destinyTower.length-1);
					originTower.pop();
					destinyTower.push(topDiskOrigin);
					drawScene();
				}
			}


    	</script>

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