|
@@ -0,0 +1,579 @@
|
|
|
+
|
|
|
+iHanói
|
|
|
+http:
|
|
|
+
|
|
|
+Uso: localhost/ihanoi/index.html?n=3&lang=pt
|
|
|
+@TODO ainda nao implementado multi-lingua
|
|
|
+
|
|
|
+@AUTHOR Leônidas de Oliveira Brandão (coord. LInE)
|
|
|
+v0.5: 2020/11/22 (novo fundo; evita erro de disco sumir se de=para: nova msg 'msgDeParaIguais'; em "movaHaste(hi)" acresc. "if (topoDe == topoPara)...")
|
|
|
+v0.4: 2020/08/03
|
|
|
+v0.1: 2020/07/31
|
|
|
+v0: 2020/07/28
|
|
|
+*/
|
|
|
+
|
|
|
+
|
|
|
+No arquivo HTML que carrega esse JavaScript deve existir as seguintes imagens:
|
|
|
+ <img id="fundo" style="display:none;" src="img/img_fundo_hanoi.png" />
|
|
|
+ <img id="haste0" style="display:none;" src="img/hasteA.png" />
|
|
|
+ <img id="haste1" style="display:none;" src="img/hasteB.png" />
|
|
|
+ <img id="haste2" style="display:none;" src="img/hasteC.png" />
|
|
|
+ <img id="disco0" style="display:none;" src="img/disk1.png" />
|
|
|
+ <img id="disco1" style="display:none;" src="img/disk2.png" />
|
|
|
+ <img id="disco2" style="display:none;" src="img/disk3.png" />
|
|
|
+ <img id="disco3" style="display:none;" src="img/disk4.png" />
|
|
|
+ <img id="disco4" style="display:none;" src="img/disk5.png" />
|
|
|
+ <img id="disco5" style="display:none;" src="img/disk6.png" />
|
|
|
+
|
|
|
+Dimensoes e posicionamento das imagens
|
|
|
+ Hastes: 325 x 416
|
|
|
+ # Posicao e tamanho dos discos:
|
|
|
+ 6: 34, 250 294 130
|
|
|
+ 5: 48, 210 267 130 +14 -40 -27 +0
|
|
|
+ 4: 62, 170 240 130 +14 -40 -27 +0
|
|
|
+ 3: 76, 130 213 130 +14 -40 -27 +0
|
|
|
+ 2: 90, 90 186 130 +14 -40 -27 +0
|
|
|
+ 1: 104, 50 159 130 +14 -40 -27 +0 (mas disk1 esta com 160x130)
|
|
|
+*/
|
|
|
+
|
|
|
+console.log("iHanoi: inicio");
|
|
|
+
|
|
|
+var canvas;
|
|
|
+var context;
|
|
|
+
|
|
|
+var width = 1100;
|
|
|
+var height = 460;
|
|
|
+var posY0 = 290;
|
|
|
+
|
|
|
+
|
|
|
+var matHastes = [ [ 5, 4, 3, 2, 1, 0],
|
|
|
+ [-1, -1, -1, -1, -1, -1],
|
|
|
+ [-1, -1, -1, -1, -1, -1] ];
|
|
|
+
|
|
|
+var vetorMovimentos = [];
|
|
|
+
|
|
|
+
|
|
|
+var posTx = [ 34, 48, 62, 76, 90, 104 ];
|
|
|
+var posTy = [ 240, 200, 160, 120, 80, 40 ];
|
|
|
+
|
|
|
+var nDiscos = 4;
|
|
|
+var contador = 0;
|
|
|
+var posx = [ 52, 66, 80, 94 ];
|
|
|
+var posy = [ 160, 120, 80, 40 ];
|
|
|
+
|
|
|
+var posx_HA = 20, posy_HA = 40;
|
|
|
+var posx_HB = 370, posy_HB = 40;
|
|
|
+var posx_HC = 720, posy_HC = 40;
|
|
|
+
|
|
|
+redefineDiscos(nDiscos);
|
|
|
+
|
|
|
+var topoHasteA = nDiscos-1, topoHasteB = topoHasteC = -1;
|
|
|
+
|
|
|
+var iHanoi = "iHanói";
|
|
|
+var LInE = "LInE-IME-USP";
|
|
|
+
|
|
|
+var isExercise = false;
|
|
|
+var isAuthoring = false;
|
|
|
+var revendo = false;
|
|
|
+
|
|
|
+
|
|
|
+var btnReiniciar="Reiniciar", btnRever="Rever", btnCodigo="Código";
|
|
|
+var altBtnReiniciar="Reiniciar tudo, todos os discos para haste A", altBtnRever="Rever todos os movimentos realizados",
|
|
|
+ altBtnCodigo="Examinar o código no formato do iHanói (extensão 'ihn')";
|
|
|
+
|
|
|
+var mensagem0 = "Clique na regiao da haste para selecionar origem, depois destino";
|
|
|
+var mensagem1_1 = "Parabéns! Você conseguiu mover todos os discos com ";
|
|
|
+var mensagem1_2 = " movimentos";
|
|
|
+var mensagem2_1 = "Não é permitido colocar disco maior sobre menor!";
|
|
|
+var mensagem2_2 = " sobre ";
|
|
|
+var mensagem3_1 = "Destino: ";
|
|
|
+var mensagem3_2 = " - Para novo movimento, clique em nova haste inicial";
|
|
|
+
|
|
|
+var msgTeste1 = "Parabéns conseguiu mover todos para B, mas lembre-se objetivo é C. Usou ";
|
|
|
+var msgTeste2 = "Parabéns conseguiu mover todos para B e com mínimo de movimentos, mas objetivo é C. Usou ";
|
|
|
+var msgTeste3 = "Parabéns conseguiu mover todos para C, mas não o mínimo de movimentos... Usou ";
|
|
|
+var msgTeste4 = "Parabéns! Conseguiu mover todos para C e o mínimo de movimentos! Foram ";
|
|
|
+var msgEhExercicio = "Não pode alterar número de discos! É um exercício com número de discos pré-fixado.";
|
|
|
+var msgReverProx = "Clique novamente no botão 'Rever' para o próximo movimento.";
|
|
|
+var msgReverFim = "Acabaram os movimentos registrados.";
|
|
|
+var msgReverPare = "Estava revendo movimentação, mas ao mover manualmente, a revisão foi finalizada!";
|
|
|
+var msgDeParaIguais = "Para mover um disco é preciso que a haste de destino seja diferente da haste de origem!";
|
|
|
+
|
|
|
+var mensagemNM = "Número de movimentos: ";
|
|
|
+var mensagem = mensagem0;
|
|
|
+
|
|
|
+
|
|
|
+var txtTx = 10, txtTy = 20;
|
|
|
+var txtMX = 10, txtMY = height-10;
|
|
|
+var txtLInEx = width-180, txtLInEy = 20;
|
|
|
+
|
|
|
+var tamNMX = 300, tamNMY = 20;
|
|
|
+
|
|
|
+var txtNMX = 120, txtNMY = 20;
|
|
|
+var tamX = 900, tamY = 20;
|
|
|
+
|
|
|
+
|
|
|
+var clickDe = -1, clickPara = -1;
|
|
|
+
|
|
|
+
|
|
|
+var imgFundo = document.getElementById("fundo");
|
|
|
+var imgHastes = [ document.getElementById("haste0"), document.getElementById("haste1"), document.getElementById("haste2") ];
|
|
|
+var imgDiscos = [ document.getElementById("disco0"), document.getElementById("disco1"), document.getElementById("disco2"),
|
|
|
+ document.getElementById("disco3"), document.getElementById("disco4"), document.getElementById("disco5") ];
|
|
|
+var corFundo1 = "#26508c";
|
|
|
+
|
|
|
+
|
|
|
+canvas = document.createElement("canvas");
|
|
|
+context = canvas.getContext("2d");
|
|
|
+canvas.addEventListener("click", clickCanvas);
|
|
|
+
|
|
|
+
|
|
|
+canvas.width = width; canvas.height = height;
|
|
|
+
|
|
|
+document.body.appendChild(canvas);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function setExercise (valor) {
|
|
|
+ var element, i;
|
|
|
+
|
|
|
+ isExercise = true;
|
|
|
+ if (valor) {
|
|
|
+ isExercise = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var msg = "";
|
|
|
+ for (i=1; i<7; i++) {
|
|
|
+ element = document.getElementById("disco"+i);
|
|
|
+ if (element!=null)
|
|
|
+ element.disabled = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("setExercise: " + msg);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function redefineDiscos (n) {
|
|
|
+ dif = 6-n;
|
|
|
+ for (i=0; i<n; i++) {
|
|
|
+ matHastes[0][i] = n-i-1;
|
|
|
+ posx[i] = posTx[i+dif];
|
|
|
+ posy[i] = posTy[i+dif];
|
|
|
+ }
|
|
|
+ for (i=n; i<6; i++) {
|
|
|
+ matHastes[0][i] = -1;
|
|
|
+ posx[i] = -1;
|
|
|
+ posy[i] = -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("redefineDiscos("+n+"): final");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+var reverMov = -1;
|
|
|
+var totalMov = -1;
|
|
|
+var copiaMovimentos = [];
|
|
|
+
|
|
|
+
|
|
|
+function limparRevisao () {
|
|
|
+ revendo = false;
|
|
|
+ reverMov = -1;
|
|
|
+ copiaMovimentos = [];
|
|
|
+ }
|
|
|
+
|
|
|
+function rever () {
|
|
|
+ if (reverMov == -1) {
|
|
|
+ limparRevisao();
|
|
|
+ revendo = true;
|
|
|
+ totalMov = vetorMovimentos.length;
|
|
|
+ for (i=0; i<totalMov; i++) copiaMovimentos.push(vetorMovimentos[i]);
|
|
|
+ reverMov = 0;
|
|
|
+ reiniciar();
|
|
|
+ mensagem = msgReverProx;
|
|
|
+ desenhaMensagem();
|
|
|
+ revendo = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (reverMov == totalMov) {
|
|
|
+ mensagem = msgReverFim;
|
|
|
+ desenhaMensagem();
|
|
|
+ totalMov = reverMov = -1;
|
|
|
+ clickDe = clickPara = -1;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var para, copia = copiaMovimentos[reverMov];
|
|
|
+ itens = copiaMovimentos[reverMov++].split(' ');
|
|
|
+ if (itens.length == 3) { clickDe = eval(itens[0]); para = eval(itens[2]); }
|
|
|
+ else { clickDe = eval(itens[0]); para = eval(itens[1]); }
|
|
|
+
|
|
|
+ console.log(itens + ", rever: (" + copia + "): " + clickDe + " + " + clickPara + " + " + para);
|
|
|
+ movaHaste(para);
|
|
|
+ mensagem = msgReverProx;
|
|
|
+ desenhaTudo();
|
|
|
+ console.lgo("rever(): final");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function reiniciar (nD) {
|
|
|
+ getEvaluation();
|
|
|
+ vetorMovimentos = [];
|
|
|
+ if (nD!="" && nD!=undefined) {
|
|
|
+ var element = document.getElementById("disco1");
|
|
|
+ if (element.disabled) {
|
|
|
+ console.log("Nao pode alterar numero de discos!");
|
|
|
+ mensagem = msgEhExercicio;
|
|
|
+ desenhaMensagem();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ redefineDiscos(nD);
|
|
|
+ nDiscos = nD;
|
|
|
+ }
|
|
|
+ topoHasteA = nDiscos-1;
|
|
|
+ topoHasteB = topoHasteC = -1;
|
|
|
+ for (i=0; i<nDiscos; i++) {
|
|
|
+ matHastes[1][i] = -1;
|
|
|
+ matHastes[2][i] = -1;
|
|
|
+ }
|
|
|
+ contador = 0;
|
|
|
+ redefineDiscos(nDiscos);
|
|
|
+ mensagem = mensagem0;
|
|
|
+ desenhaTudo();
|
|
|
+ console.log("reiniciar(nD): final");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function analisa_parametros_url (strParametros) {
|
|
|
+ var vars = strParametros.split("&");
|
|
|
+ var vetorParametros = [ 3, "pt" ];
|
|
|
+ var msg = "";
|
|
|
+ var pair, key, value;
|
|
|
+
|
|
|
+ for (var i = 0; i < vars.length; i++) {
|
|
|
+ pair = vars[i].split("=");
|
|
|
+ if (pair == "") break;
|
|
|
+ key = decodeURIComponent(pair[0]);
|
|
|
+ value = decodeURIComponent(pair[1]);
|
|
|
+ if (key=="n") {
|
|
|
+ vetorParametros[0] = value;
|
|
|
+ nDiscos = value;
|
|
|
+ redefineDiscos(nDiscos);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ if (key=="lang")
|
|
|
+ vetorParametros[1] = value;
|
|
|
+ msg += "("+key+","+value+") ";
|
|
|
+ }
|
|
|
+
|
|
|
+ return vetorParametros;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function listaURL () {
|
|
|
+
|
|
|
+ parametros = window.location.search;
|
|
|
+ if (parametros=="undefined")
|
|
|
+ return;
|
|
|
+ if (parametros.length>0)
|
|
|
+ parametros = parametros.substring(1);
|
|
|
+ analisa_parametros_url(parametros);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function imprimeMovimentos (hi) {
|
|
|
+ var i;
|
|
|
+ var msg, hA = "[", hB = "[", hC = "[";
|
|
|
+ for (i=0; i<nDiscos; i++) {
|
|
|
+ hA += matHastes[0][i] + " ";
|
|
|
+ hB += matHastes[1][i] + " ";
|
|
|
+ hC += matHastes[2][i] + " ";
|
|
|
+ }
|
|
|
+ msg = hA + "], " + hB + "], " + hC + "]";
|
|
|
+ return msg;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function pegaTopoHaste (ind_haste) {
|
|
|
+ var topo, i;
|
|
|
+
|
|
|
+ i=0; while (matHastes[ind_haste][i]!=-1 && i<nDiscos) i++;
|
|
|
+ return i-1;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function atualizaTopos (topoDe, topoPara) {
|
|
|
+ topoPara++;
|
|
|
+ matHastes[clickPara][topoPara] = matHastes[clickDe][topoDe];
|
|
|
+ if (matHastes[clickPara][topoPara] == undefined) { console.log("atualizaTopos("+topoDe+","+topoPara+"): erro! matHastes[clickPara][topoPara] undefined"); }
|
|
|
+
|
|
|
+ matHastes[clickDe][topoDe] = -1;
|
|
|
+ topoDe--;
|
|
|
+
|
|
|
+ if (clickDe==0)
|
|
|
+ topoHasteA = topoDe;
|
|
|
+ else
|
|
|
+ if (clickDe==1)
|
|
|
+ topoHasteB = topoDe;
|
|
|
+ else
|
|
|
+ topoHasteC = topoDe;
|
|
|
+ if (clickPara==0)
|
|
|
+ topoHasteA = topoPara;
|
|
|
+ else
|
|
|
+ if (clickPara==1)
|
|
|
+ topoHasteB = topoPara;
|
|
|
+ else
|
|
|
+ topoHasteC = topoPara;
|
|
|
+
|
|
|
+ clickDe = clickPara = -1;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function pegaHaste (hi) {
|
|
|
+ if (hi==0) return "A";
|
|
|
+ if (hi==1) return "B";
|
|
|
+ return "C";
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function movimentoFinal (haste, num) {
|
|
|
+ var topo = pegaTopoHaste(haste);
|
|
|
+ if (topo == nDiscos-1) {
|
|
|
+ if (haste == 2) {
|
|
|
+ if (contador == 2^nDiscos-1) {
|
|
|
+ return 4;
|
|
|
+ }
|
|
|
+ return 3;
|
|
|
+ }
|
|
|
+ if (haste == 1) {
|
|
|
+ if (contador == 2^nDiscos-1) {
|
|
|
+ return 2;
|
|
|
+ }
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function movaHaste (hi) {
|
|
|
+ var strHaste = pegaHaste(hi);
|
|
|
+ var de0 = clickDe, para0 = clickPara;
|
|
|
+ if (clickDe==-1 && clickPara==-1) {
|
|
|
+ clickDe = hi;
|
|
|
+ topoDe = pegaTopoHaste(clickDe);
|
|
|
+ if (topoDe==-1) {
|
|
|
+ mensagem = "Haste " + strHaste + " está vazia! Por favor, selecione haste inicial com algum disco";
|
|
|
+ clickDe = clickPara = -1;
|
|
|
+ desenhaMensagem();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ mensagem = "Origem: " + strHaste + " - Agora clique na haste destino";
|
|
|
+ de0 = hi;
|
|
|
+ desenhaMensagem();
|
|
|
+ }
|
|
|
+ else
|
|
|
+ if (clickDe>-1 && clickPara==-1) {
|
|
|
+ clickPara = hi;
|
|
|
+ para0 = hi;
|
|
|
+
|
|
|
+ topoDe = pegaTopoHaste(clickDe);
|
|
|
+ topoPara = pegaTopoHaste(clickPara);
|
|
|
+ if (clickDe == clickPara) {
|
|
|
+ str_haste = pegaHaste(clickDe);
|
|
|
+ mensagem = msgDeParaIguais + " (haste " + str_haste + ")";
|
|
|
+ console.log("Erro: Tentando mover disco para a mesma haste! (haste " + str_haste + ")");
|
|
|
+ clickDe = clickPara = -1;
|
|
|
+ desenhaMensagem();
|
|
|
+ return -1;
|
|
|
+ }
|
|
|
+ if (topoPara>-1 && matHastes[clickDe][topoDe]>matHastes[clickPara][topoPara]) {
|
|
|
+ mensagem = mensagem2_1 + " (" + matHastes[clickDe][topoDe] + mensagem2_2 + matHastes[clickPara][topoPara] + ")";
|
|
|
+
|
|
|
+ clickDe = clickPara = -1;
|
|
|
+ desenhaMensagem();
|
|
|
+ return -1;
|
|
|
+ }
|
|
|
+ vetorMovimentos.push(clickDe + " " + clickPara);
|
|
|
+ if (topoDe<0) { console.log("movaHaste("+hi+"): "+clickDe + " " + clickPara+": erro! undefined"); }
|
|
|
+ atualizaTopos(topoDe, topoPara);
|
|
|
+ contador++;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ respostaMov = movimentoFinal(hi, contador);
|
|
|
+
|
|
|
+ switch (respostaMov) {
|
|
|
+ case 0: mensagem = mensagem3_1 + strHaste + mensagem3_2; break;
|
|
|
+ case 1: mensagem = msgTeste1 + contador + mensagem1_2; break;
|
|
|
+ case 2: mensagem = msgTeste2 + contador + mensagem1_2; break;
|
|
|
+ case 3: mensagem = msgTeste3 + contador + mensagem1_2; break;
|
|
|
+ case 4: mensagem = msgTeste4 + contador + mensagem1_2; break;
|
|
|
+ mensagem = mensagem1_1 + contador + mensagem1_2;
|
|
|
+ }
|
|
|
+
|
|
|
+ desenhaTudo();
|
|
|
+ }
|
|
|
+ console.lgo("movaHaste(hi): final");
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function clickCanvas (mouseEvent) {
|
|
|
+ var posx = mouseEvent.offsetX, posy = mouseEvent.offsetY;
|
|
|
+ if (posx>25 && posx<350 && posy>30 && posy<440) {
|
|
|
+ resp = movaHaste(0);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ if (posx>350 && posx<690 && posy>30 && posy<440) {
|
|
|
+ resp = movaHaste(1);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ if (posx>690 && posx<1030 && posy>30 && posy<440) {
|
|
|
+ resp = movaHaste(2);
|
|
|
+ }
|
|
|
+ if (revendo) {
|
|
|
+ mensagem = msgReverPare;
|
|
|
+ limparRevisao();
|
|
|
+ desenhaMensagem();
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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(); }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function desenhaDiscos () {
|
|
|
+ var posx, posy, i;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ posy = posY0;
|
|
|
+ ind_disco = matHastes[0][0];
|
|
|
+ i = 0;
|
|
|
+ while (ind_disco!=-1) {
|
|
|
+ posx = 33 + (6 - ind_disco-1)*14;
|
|
|
+
|
|
|
+
|
|
|
+ context.drawImage(imgDiscos[ind_disco], posx, posy);
|
|
|
+ posy -= 40;
|
|
|
+ i++;
|
|
|
+ ind_disco = matHastes[0][i];
|
|
|
+ }
|
|
|
+
|
|
|
+ posy = posY0;
|
|
|
+ ind_disco = matHastes[1][0];
|
|
|
+ i = 0;
|
|
|
+ while (ind_disco!=-1) {
|
|
|
+ posx = 382 + (6 - ind_disco-1)*14;
|
|
|
+ if (ind_disco == undefined) { console.log("desenhaDiscos(): disco 1: erro: i=" + i); return; }
|
|
|
+
|
|
|
+ context.drawImage(imgDiscos[ind_disco], posx, posy);
|
|
|
+ posy -= 40;
|
|
|
+ i++;
|
|
|
+ ind_disco = matHastes[1][i];
|
|
|
+ }
|
|
|
+
|
|
|
+ posy = posY0;
|
|
|
+ ind_disco = matHastes[2][0];
|
|
|
+ i = 0;
|
|
|
+ while (ind_disco!=-1) {
|
|
|
+ posx = 732 + (6 - ind_disco-1)*14;
|
|
|
+ context.drawImage(imgDiscos[ind_disco], posx, posy);
|
|
|
+ posy -= 40;
|
|
|
+ i++;
|
|
|
+ ind_disco = matHastes[2][i];
|
|
|
+ }
|
|
|
+ console.log("desenhaDiscos(): final");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function desenhaMensagem () {
|
|
|
+ context.font = 'bold 14px serif';
|
|
|
+ context.fillStyle = "white";
|
|
|
+
|
|
|
+ context.fillRect(txtMX, txtMY-15, tamX, tamY);
|
|
|
+ context.fillStyle = "black";
|
|
|
+ context.fillText(" " + mensagem, txtMX, txtMY);
|
|
|
+ roundRect(context, txtMX, txtMY-15, tamX, tamY);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function desenhaTudo () {
|
|
|
+ console.log("desenhaTudo(): inicio");
|
|
|
+ context.font = 'bold 20px serif';
|
|
|
+ context.drawImage(imgFundo, 0, 0, width, height );
|
|
|
+ context.fillStyle = "white";
|
|
|
+ context.fillText(iHanoi, txtTx, txtTy);
|
|
|
+ context.fillText(LInE, txtLInEx, txtLInEy);
|
|
|
+ context.drawImage(imgHastes[0], posx_HA, posy_HA);
|
|
|
+ context.drawImage(imgHastes[1], posx_HB, posy_HB);
|
|
|
+ context.drawImage(imgHastes[2], posx_HC, posy_HC);
|
|
|
+ context.font = 'bold 14px serif';
|
|
|
+ context.fillStyle = "white";
|
|
|
+
|
|
|
+ context.fillRect(txtMX, txtMY-15, tamX, tamY);
|
|
|
+ roundRect(context, txtMX, txtMY-15, tamX, tamY);
|
|
|
+
|
|
|
+ context.fillRect(txtNMX, txtNMY-15, tamNMX, tamNMY);
|
|
|
+ roundRect(context, txtNMX, txtNMY-15, tamNMX, tamNMY);
|
|
|
+ context.fillStyle = "black";
|
|
|
+ context.fillText(" " + mensagem, txtMX, txtMY);
|
|
|
+ context.fillText(" " + mensagemNM + contador, txtNMX, txtNMY);
|
|
|
+ desenhaDiscos();
|
|
|
+ console.log("desenhaTudo(): final");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+console.log("iHanoi: final do JavaScript principal");
|