1
0

ihanoi.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. /*
  2. iHanói
  3. http://www.usp.br/line
  4. Uso: localhost/ihanoi/index.html?n=3&lang=pt
  5. @TODO ainda nao implementado multi-lingua
  6. @AUTHOR Leônidas de Oliveira Brandão (coord. LInE)
  7. 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)...")
  8. v0.4: 2020/08/03
  9. v0.1: 2020/07/31
  10. v0: 2020/07/28
  11. */
  12. /*
  13. No arquivo HTML que carrega esse JavaScript deve existir as seguintes imagens:
  14. <img id="fundo" style="display:none;" src="img/img_fundo_hanoi.png" />
  15. <img id="haste0" style="display:none;" src="img/hasteA.png" />
  16. <img id="haste1" style="display:none;" src="img/hasteB.png" />
  17. <img id="haste2" style="display:none;" src="img/hasteC.png" />
  18. <img id="disco0" style="display:none;" src="img/disk1.png" />
  19. <img id="disco1" style="display:none;" src="img/disk2.png" />
  20. <img id="disco2" style="display:none;" src="img/disk3.png" />
  21. <img id="disco3" style="display:none;" src="img/disk4.png" />
  22. <img id="disco4" style="display:none;" src="img/disk5.png" />
  23. <img id="disco5" style="display:none;" src="img/disk6.png" />
  24. Dimensoes e posicionamento das imagens
  25. Hastes: 325 x 416
  26. # Posicao e tamanho dos discos:
  27. 6: 34, 250 294 130
  28. 5: 48, 210 267 130 +14 -40 -27 +0
  29. 4: 62, 170 240 130 +14 -40 -27 +0
  30. 3: 76, 130 213 130 +14 -40 -27 +0
  31. 2: 90, 90 186 130 +14 -40 -27 +0
  32. 1: 104, 50 159 130 +14 -40 -27 +0 (mas disk1 esta com 160x130)
  33. */
  34. console.log("iHanoi: inicio");
  35. var canvas;
  36. var context;
  37. var width = 1100;
  38. var height = 460;
  39. var posY0 = 290; // posicionamento do disco maior (depende de 'height')
  40. // Posicionamento dos discos nas hastes
  41. var matHastes = [ [ 5, 4, 3, 2, 1, 0], // haste A: pilha de discos (id discos em ordem inversa na haste); haste B e C vazias
  42. [-1, -1, -1, -1, -1, -1], // haste B vazia
  43. [-1, -1, -1, -1, -1, -1] ]; // haste C vazia
  44. var vetorMovimentos = []; // vetor para registrar todos os movimentos do aluno - definido na 'movaHaste(hi)'
  45. // Posicionamentos de coordenadas (x,y) para cada um dos 6 discos (no maximo)
  46. var posTx = [ 34, 48, 62, 76, 90, 104 ]; // posicoes x para discos: 6, 5, 4... +14
  47. var posTy = [ 240, 200, 160, 120, 80, 40 ]; // posicoes y para discos: 6, 5, 4... +40
  48. var nDiscos = 4; // Default entrar com 4 discos
  49. var contador = 0; // conta numero de movimentos
  50. var posx = [ 52, 66, 80, 94 ]; // posicoes x para discos: 6, 5, 4... +14
  51. var posy = [ 160, 120, 80, 40 ]; // posicoes y para discos: 6, 5, 4... +40
  52. var posx_HA = 20, posy_HA = 40; // posicao haste A
  53. var posx_HB = 370, posy_HB = 40; // posicao haste A
  54. var posx_HC = 720, posy_HC = 40; // posicao haste A
  55. redefineDiscos(nDiscos); // redefinir 'matHastes[][]'
  56. var topoHasteA = nDiscos-1, topoHasteB = topoHasteC = -1; // indice do disco no topo de cada haste
  57. var iHanoi = "iHanói";
  58. var LInE = "LInE-IME-USP";
  59. var isExercise = false; // se for exercicios, entao NAO permite alterar numero de discos
  60. var isAuthoring = false; // se for edicao, entao permita alterar numero de discos (sobrepoe opcao 'isExercise=true')
  61. var revendo = false; // durante revisao de movimentos, NAO deveria movimentar discos, se o fizer, entao anule revisao!
  62. //TODO Permitir internacionalizar botoes
  63. var btnReiniciar="Reiniciar", btnRever="Rever", btnCodigo="Código";
  64. var altBtnReiniciar="Reiniciar tudo, todos os discos para haste A", altBtnRever="Rever todos os movimentos realizados",
  65. altBtnCodigo="Examinar o código no formato do iHanói (extensão 'ihn')";
  66. var mensagem0 = "Clique na regiao da haste para selecionar origem, depois destino";
  67. var mensagem1_1 = "Parabéns! Você conseguiu mover todos os discos com ";
  68. var mensagem1_2 = " movimentos";
  69. var mensagem2_1 = "Não é permitido colocar disco maior sobre menor!";
  70. var mensagem2_2 = " sobre ";
  71. var mensagem3_1 = "Destino: ";
  72. var mensagem3_2 = " - Para novo movimento, clique em nova haste inicial";
  73. var msgTeste1 = "Parabéns conseguiu mover todos para B, mas lembre-se objetivo é C. Usou "; // 1
  74. var msgTeste2 = "Parabéns conseguiu mover todos para B e com mínimo de movimentos, mas objetivo é C. Usou "; // 2
  75. var msgTeste3 = "Parabéns conseguiu mover todos para C, mas não o mínimo de movimentos... Usou "; // 3
  76. var msgTeste4 = "Parabéns! Conseguiu mover todos para C e o mínimo de movimentos! Foram "; // 4
  77. var msgEhExercicio = "Não pode alterar número de discos! É um exercício com número de discos pré-fixado.";
  78. var msgReverProx = "Clique novamente no botão 'Rever' para o próximo movimento.";
  79. var msgReverFim = "Acabaram os movimentos registrados.";
  80. var msgReverPare = "Estava revendo movimentação, mas ao mover manualmente, a revisão foi finalizada!";
  81. var msgDeParaIguais = "Para mover um disco é preciso que a haste de destino seja diferente da haste de origem!";
  82. var mensagemNM = "Número de movimentos: ";
  83. var mensagem = mensagem0; // mensagem inicial
  84. // Posicionamento para mensagens
  85. var txtTx = 10, txtTy = 20; // iHanoi
  86. var txtMX = 10, txtMY = height-10; // barra de mensagens: posicao
  87. var txtLInEx = width-180, txtLInEy = 20; // LInE-IME-USP
  88. var tamNMX = 300, tamNMY = 20; // mensagem sobre num. movimentos: tamanho
  89. //1 var txtNMX = 2*325+50, txtNMY = height-10; // mensagem sobre num. movimentos: posicao
  90. var txtNMX = 120, txtNMY = 20; // mensagem sobre num. movimentos: posicao
  91. var tamX = 900, tamY = 20; // para area de mensagem
  92. // Gerenciamento de evento: primeiro ou segundo clique?
  93. var clickDe = -1, clickPara = -1; // origem e destino: -1,-1 = nada selecionado; x,-1 = selecionada origem; x,y = selecionadas ambas
  94. // Elementos graficos principais: Fundo + Haste + Discos
  95. var imgFundo = document.getElementById("fundo");
  96. var imgHastes = [ document.getElementById("haste0"), document.getElementById("haste1"), document.getElementById("haste2") ];
  97. var imgDiscos = [ document.getElementById("disco0"), document.getElementById("disco1"), document.getElementById("disco2"),
  98. document.getElementById("disco3"), document.getElementById("disco4"), document.getElementById("disco5") ];
  99. var corFundo1 = "#26508c"; // para fundo de mensagem
  100. canvas = document.createElement("canvas");
  101. context = canvas.getContext("2d");
  102. canvas.addEventListener("click", clickCanvas); //OK
  103. // Tamanho da area de trabalho iHanoi
  104. canvas.width = width; canvas.height = height;
  105. document.body.appendChild(canvas); // iniciar area para desenho "canvas"
  106. //D console.log("iHanoi: apos definir elementos graficos");
  107. // Anote tratar-se de exercicio
  108. function setExercise (valor) { // invocada em 'integration-functions.js: decodificaArquivo(strContent)'
  109. var element, i;
  110. // se for exercicios, entao NAO permite alterar numero de discos
  111. isExercise = true;
  112. if (valor) { // if defined, then is teacher, allow edit (iLM_PARAM_Authoring)
  113. isExercise = false;
  114. return; // nao altere permissoes de trocar numero de discos
  115. }
  116. //D alert("setExercise: " + valor + ", iLM_PARAM_Authoring=" + iLMparameters.iLM_PARAM_Authoring + ", isExercise=" + isExercise);
  117. var msg = "";
  118. for (i=1; i<7; i++) {
  119. element = document.getElementById("disco"+i);
  120. if (element!=null) // se for re-avaliacao NAO existe interface grafica
  121. element.disabled = true; // desabilita o botao
  122. // Apenas isso NAO impede entrar no tratamento de "clique" no botao, ver 'reiniciar(nD)'
  123. }
  124. //D
  125. console.log("setExercise: " + msg);
  126. }
  127. // Redefine numero de discos a serem carregados e os posiciona (todos) na haste A
  128. // Evento: quando "clicar" nos botoes com numero de discos (elemento id="disco"+i (i=0, 1, 2,...5)
  129. function redefineDiscos (n) {
  130. dif = 6-n;
  131. for (i=0; i<n; i++) { // >
  132. matHastes[0][i] = n-i-1;
  133. posx[i] = posTx[i+dif];
  134. posy[i] = posTy[i+dif];
  135. }
  136. for (i=n; i<6; i++) { // >
  137. matHastes[0][i] = -1;
  138. posx[i] = -1;
  139. posy[i] = -1;
  140. }
  141. //D
  142. console.log("redefineDiscos("+n+"): final");
  143. }
  144. // Inicio --- Para rever movimentos ja' realizados
  145. var reverMov = -1;
  146. var totalMov = -1;
  147. var copiaMovimentos = [];
  148. // @calledby: rever(), clickCanvas(mouseEvent)
  149. function limparRevisao () { // durante revisao de movimentos, NAO deveria movimentar discos, se o fizer, entao anule revisao!
  150. revendo = false; // nao mais revendo
  151. reverMov = -1;
  152. copiaMovimentos = [];
  153. }
  154. function rever () { // vetorMovimentos = { clickDe + " " + clickPara, ... }
  155. if (reverMov == -1) { // inicio
  156. limparRevisao();
  157. revendo = true; // inicio de revisao
  158. totalMov = vetorMovimentos.length;
  159. for (i=0; i<totalMov; i++) copiaMovimentos.push(vetorMovimentos[i]);
  160. reverMov = 0;
  161. reiniciar();
  162. mensagem = msgReverProx;
  163. desenhaMensagem();
  164. revendo = true; // durante revisao de movimentos, NAO deveria movimentar discos, se o fizer, entao anule revisao!
  165. return;
  166. }
  167. if (reverMov == totalMov) { // final
  168. mensagem = msgReverFim;
  169. desenhaMensagem();
  170. totalMov = reverMov = -1; // pode rever novamente
  171. clickDe = clickPara = -1;
  172. return;
  173. }
  174. var para, copia = copiaMovimentos[reverMov];
  175. itens = copiaMovimentos[reverMov++].split(' ');
  176. if (itens.length == 3) { clickDe = eval(itens[0]); para = eval(itens[2]); }
  177. else { clickDe = eval(itens[0]); para = eval(itens[1]); }
  178. // alert(itens + ": " + itens.length + ": rever: (" + copia + "): " + clickDe + "-" + clickPara);
  179. console.log(itens + ", rever: (" + copia + "): " + clickDe + " + " + clickPara + " + " + para); // itens
  180. movaHaste(para); // 'clickPara' tem que estar com -1 para completar movimento
  181. mensagem = msgReverProx; // clique novamente no 'Rever'
  182. desenhaTudo();
  183. console.lgo("rever(): final");
  184. } // rever()
  185. // Fim --- Para rever movimentos ja' realizados
  186. // Reiniciar o "jogo": zerar movimentos, colocar todos os discos sobre haste A
  187. function reiniciar (nD) {
  188. getEvaluation(); // registrar
  189. vetorMovimentos = []; // zerar movimentos
  190. if (nD!="" && nD!=undefined) {
  191. var element = document.getElementById("disco1");
  192. if (element.disabled) { // verifica se botao esta' desabilitado (neste caso e' exercicio)
  193. console.log("Nao pode alterar numero de discos!");
  194. mensagem = msgEhExercicio;
  195. desenhaMensagem();
  196. return;
  197. }
  198. redefineDiscos(nD);
  199. nDiscos = nD;
  200. }
  201. topoHasteA = nDiscos-1;
  202. topoHasteB = topoHasteC = -1;
  203. for (i=0; i<nDiscos; i++) { // >
  204. matHastes[1][i] = -1;
  205. matHastes[2][i] = -1;
  206. }
  207. contador = 0;
  208. redefineDiscos(nDiscos);
  209. mensagem = mensagem0;
  210. desenhaTudo();
  211. console.log("reiniciar(nD): final");
  212. }
  213. // Decompor parametros recebidos via GET: ?lang=pt&n=4
  214. // Devolve vetor: { 4, "pt" } nesta ordem
  215. function analisa_parametros_url (strParametros) {
  216. var vars = strParametros.split("&");
  217. var vetorParametros = [ 3, "pt" ]; // por padrao devolve { 3, "pt" }
  218. var msg = ""; //D
  219. var pair, key, value;
  220. //?par1=val1&par2=val2&
  221. for (var i = 0; i < vars.length; i++) { // >
  222. pair = vars[i].split("=");
  223. if (pair == "") break;
  224. key = decodeURIComponent(pair[0]);
  225. value = decodeURIComponent(pair[1]);
  226. if (key=="n") {
  227. vetorParametros[0] = value; // vetorParametros[i].push(decodeURIComponent(value));
  228. nDiscos = value; // redefine 'nDiscos'
  229. redefineDiscos(nDiscos);
  230. }
  231. else
  232. if (key=="lang")
  233. vetorParametros[1] = value; // vetorParametros[i].push(decodeURIComponent(value));
  234. msg += "("+key+","+value+") "; //D
  235. }
  236. //D console.log(vetorParametros); console.log("msg="+msg);
  237. return vetorParametros;
  238. }
  239. // Pegar parametros via GET
  240. function listaURL () {
  241. // window.location. [ href | protocol | host | hostname | port | pathname | search | hash
  242. parametros = window.location.search;
  243. if (parametros=="undefined")
  244. return;
  245. if (parametros.length>0) // >
  246. parametros = parametros.substring(1); // elimina primeiro caractere '?'
  247. analisa_parametros_url(parametros);
  248. }
  249. // Para depuracao
  250. function imprimeMovimentos (hi) {
  251. var i;
  252. var msg, hA = "[", hB = "[", hC = "[";
  253. for (i=0; i<nDiscos; i++) { // >
  254. hA += matHastes[0][i] + " ";
  255. hB += matHastes[1][i] + " ";
  256. hC += matHastes[2][i] + " ";
  257. }
  258. msg = hA + "], " + hB + "], " + hC + "]";
  259. return msg;
  260. }
  261. // Pegar o valor do disco no topo da haste 'ind_haste'
  262. // Se haste vazia, devolve -1
  263. function pegaTopoHaste (ind_haste) { // pega indice do topo da haste
  264. var topo, i;
  265. //D alert("pegaTopoHaste: ind_haste=" + ind_haste + ": " + matHastes[ind_haste] + ", matHastes=" + matHastes);
  266. i=0; while (matHastes[ind_haste][i]!=-1 && i<nDiscos) i++; // >
  267. return i-1;
  268. // Para melhorar a eficiencia, poderiamos usar diretamente as variaveis que tem indice dos topos: topoHasteA, topoHasteB, topoHasteC
  269. }
  270. // Apos movimentacao de discos entre haste, acertar variaveis de topo e "clique"
  271. // Copia no topo de destino o disco do topo de origem
  272. function atualizaTopos (topoDe, topoPara) { // Tira topo "de" e insere em "para"
  273. topoPara++;
  274. matHastes[clickPara][topoPara] = matHastes[clickDe][topoDe]; // mova disco do topo de origem para topo de destino
  275. if (matHastes[clickPara][topoPara] == undefined) { console.log("atualizaTopos("+topoDe+","+topoPara+"): erro! matHastes[clickPara][topoPara] undefined"); }
  276. // Tira disco do topo de origem
  277. matHastes[clickDe][topoDe] = -1; // remova disco que estava no topo da haste de origem
  278. topoDe--;
  279. // Atualiza globais
  280. if (clickDe==0) // haste A
  281. topoHasteA = topoDe;
  282. else
  283. if (clickDe==1) // haste B
  284. topoHasteB = topoDe;
  285. else // haste C
  286. topoHasteC = topoDe;
  287. if (clickPara==0) // haste A
  288. topoHasteA = topoPara;
  289. else
  290. if (clickPara==1) // haste B
  291. topoHasteB = topoPara;
  292. else // haste C
  293. topoHasteC = topoPara;
  294. //D alert("atualizaTopos: " + clickDe + " :: " + clickPara + ": " + imprimeMovimentos(clickPara));
  295. clickDe = clickPara = -1; // comeca novamente...
  296. }
  297. // Devolve rotulo da haste de indice 'hi'
  298. function pegaHaste (hi) {
  299. if (hi==0) return "A";
  300. if (hi==1) return "B";
  301. return "C";
  302. }
  303. // Verifica se todos os discos estao na haste C
  304. // Devolve: 0=nao moveu tudo; 1=moveu tudo para haste B; 2=moveu tudo para haste B com minimo de movimentos;
  305. // 3=moveu tudo par haste C; 4=moveu tudo par haste C com minimo de movimentos
  306. function movimentoFinal (haste, num) {
  307. var topo = pegaTopoHaste(haste);
  308. if (topo == nDiscos-1) { // moveu tudo!
  309. if (haste == 2) { // moveu para haste C
  310. if (contador == 2^nDiscos-1) { // moveu para haste C com minimo
  311. return 4;
  312. }
  313. return 3; // moveu para haste C mas nao e' minimo
  314. }
  315. if (haste == 1) { // moveu para haste B
  316. if (contador == 2^nDiscos-1) { // moveu para haste B com minimo
  317. return 2; // msgTeste2
  318. }
  319. return 1; // moveu para haste C mas nao e' minimo
  320. }
  321. }
  322. return 0;
  323. }
  324. // Mover disco do topo da haste 'clickDe' para a haste 'hi' (sem 'clickDe' definido)
  325. function movaHaste (hi) {
  326. var strHaste = pegaHaste(hi);
  327. var de0 = clickDe, para0 = clickPara;
  328. if (clickDe==-1 && clickPara==-1) { // inicio movimento
  329. clickDe = hi;
  330. topoDe = pegaTopoHaste(clickDe); // pega disco no topo de haste
  331. if (topoDe==-1) { // nao tem discos
  332. mensagem = "Haste " + strHaste + " está vazia! Por favor, selecione haste inicial com algum disco";
  333. clickDe = clickPara = -1;
  334. desenhaMensagem();
  335. return;
  336. }
  337. mensagem = "Origem: " + strHaste + " - Agora clique na haste destino";
  338. de0 = hi;
  339. desenhaMensagem();
  340. }
  341. else
  342. if (clickDe>-1 && clickPara==-1) { // final do movimento
  343. clickPara = hi;
  344. para0 = hi;
  345. //D alert("De="+clickDe+", Para="+clickPara+", hi="+hi);
  346. topoDe = pegaTopoHaste(clickDe); // devolve indice topo de haste
  347. topoPara = pegaTopoHaste(clickPara); // devolve indice topo de haste
  348. if (clickDe == clickPara) {
  349. str_haste = pegaHaste(clickDe); // nome da haste: "A", "B" ou "C"
  350. mensagem = msgDeParaIguais + " (haste " + str_haste + ")";
  351. console.log("Erro: Tentando mover disco para a mesma haste! (haste " + str_haste + ")");
  352. clickDe = clickPara = -1; // comeca novamente...
  353. desenhaMensagem();
  354. return -1;
  355. }
  356. if (topoPara>-1 && matHastes[clickDe][topoDe]>matHastes[clickPara][topoPara]) { // disco maior sobre menor : proibido!
  357. mensagem = mensagem2_1 + " (" + matHastes[clickDe][topoDe] + mensagem2_2 + matHastes[clickPara][topoPara] + ")";
  358. //D alert("De="+clickDe+", Para="+clickPara+": "+topoDe+","+topoPara+": " + imprimeMovimentos(-1));
  359. clickDe = clickPara = -1; // comeca novamente...
  360. desenhaMensagem();
  361. return -1;
  362. }
  363. vetorMovimentos.push(clickDe + " " + clickPara);
  364. if (topoDe<0) { console.log("movaHaste("+hi+"): "+clickDe + " " + clickPara+": erro! undefined"); } //DEBUG
  365. atualizaTopos(topoDe, topoPara);
  366. contador++;
  367. // 0=nao moveu tudo; 1=moveu tudo para haste B; 2=moveu tudo para haste B com minimo de movimentos;
  368. // 3=moveu tudo par haste C; 4=moveu tudo par haste C com minimo de movimentos
  369. respostaMov = movimentoFinal(hi, contador);
  370. switch (respostaMov) {
  371. case 0: mensagem = mensagem3_1 + strHaste + mensagem3_2; break;
  372. case 1: mensagem = msgTeste1 + contador + mensagem1_2; break;
  373. case 2: mensagem = msgTeste2 + contador + mensagem1_2; break;
  374. case 3: mensagem = msgTeste3 + contador + mensagem1_2; break;
  375. case 4: mensagem = msgTeste4 + contador + mensagem1_2; break;
  376. mensagem = mensagem1_1 + contador + mensagem1_2; // Paranbens! (falta comparar com numero minimo!)
  377. }
  378. desenhaTudo();
  379. }
  380. console.lgo("movaHaste(hi): final");
  381. return 1;
  382. } // movaHaste(hi)
  383. // Dispara eventos
  384. function clickCanvas (mouseEvent) {
  385. var posx = mouseEvent.offsetX, posy = mouseEvent.offsetY; // Posicao do "mouse", valores para parametros de '.drawImage(...)'
  386. if (posx>25 && posx<350 && posy>30 && posy<440) { // > clicou na haste 1
  387. resp = movaHaste(0);
  388. }
  389. else
  390. if (posx>350 && posx<690 && posy>30 && posy<440) { // > clicou na haste 2
  391. resp = movaHaste(1);
  392. }
  393. else
  394. if (posx>690 && posx<1030 && posy>30 && posy<440) { // > clicou na haste 3
  395. resp = movaHaste(2);
  396. }
  397. if (revendo) { // estava revendo movimento mas clicou em haste, entao cancele revisao!
  398. mensagem = msgReverPare; // "Estava revendo movimentação, mas ao mover manualmente, a revisão foi finalizada!"
  399. limparRevisao();
  400. desenhaMensagem(); //D sem efeito, nao 'sleep(.)' nao permite aparecer a mensagem
  401. //sleep(1600); // em 'integration-functions.js'
  402. }
  403. }
  404. // Desenha um retangulo - modelo de http://jsfiddle.net/vu7dZ/1/
  405. function roundRect (ctx, x, y, width, height, radius, fill, stroke) {
  406. if (typeof stroke == "undefined" ) { stroke = true; }
  407. if (typeof radius === "undefined") { radius = 5; }
  408. ctx.beginPath();
  409. ctx.moveTo(x + radius, y);
  410. ctx.lineTo(x + width - radius, y);
  411. ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  412. ctx.lineTo(x + width, y + height - radius);
  413. ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  414. ctx.lineTo(x + radius, y + height);
  415. ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  416. ctx.lineTo(x, y + radius);
  417. ctx.quadraticCurveTo(x, y, x + radius, y);
  418. ctx.closePath();
  419. if (stroke) { ctx.stroke(); }
  420. if (fill) { ctx.fill(); }
  421. }
  422. // Desenha os discos em cada Haste (Haste A = matHastes[0][]; Haste B = matHastes[1][]; Haste C = matHastes[2][])
  423. // Cada imagem tem 28 pixels a mais que o disco menor (dai o "(nDiscos - ind_disco-1)*14")
  424. function desenhaDiscos () { // 'context' e' global
  425. var posx, posy, i;
  426. //D console.log("desenhaDiscos(): inicio");
  427. // Haste A
  428. posy = posY0;
  429. ind_disco = matHastes[0][0];
  430. i = 0;
  431. while (ind_disco!=-1) { // enquanto ainda tem disco, nao e' o ultimo
  432. posx = 33 + (6 - ind_disco-1)*14; // para nDiscos=6 : usar 34 + ...
  433. //TODO: precisa resolver um erro/advertencia que aparece
  434. // TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
  435. context.drawImage(imgDiscos[ind_disco], posx, posy);
  436. posy -= 40;
  437. i++;
  438. ind_disco = matHastes[0][i];
  439. }
  440. // Haste B
  441. posy = posY0;
  442. ind_disco = matHastes[1][0];
  443. i = 0;
  444. while (ind_disco!=-1) { // enquanto ainda tem disco, nao e' o ultimo
  445. posx = 382 + (6 - ind_disco-1)*14;
  446. if (ind_disco == undefined) { console.log("desenhaDiscos(): disco 1: erro: i=" + i); return; } // alert("desenhaDiscos(): erro: i=" + i);
  447. // console.log("desenhaDiscos(): " + imprimeMovimentos(0)); // + ", " + imprimeMovimentos(1) + ", " + imprimeMovimentos(2));
  448. context.drawImage(imgDiscos[ind_disco], posx, posy);
  449. posy -= 40;
  450. i++;
  451. ind_disco = matHastes[1][i];
  452. }
  453. // Haste C
  454. posy = posY0;
  455. ind_disco = matHastes[2][0];
  456. i = 0;
  457. while (ind_disco!=-1) { // enquanto ainda tem disco, nao e' o ultimo
  458. posx = 732 + (6 - ind_disco-1)*14;
  459. context.drawImage(imgDiscos[ind_disco], posx, posy);
  460. posy -= 40;
  461. i++;
  462. ind_disco = matHastes[2][i];
  463. }
  464. console.log("desenhaDiscos(): final");
  465. } // desenhaDiscos()
  466. // Apenas muda a mensagem informativa
  467. function desenhaMensagem () {
  468. context.font = 'bold 14px serif';
  469. context.fillStyle = "white";
  470. //context.clearRect(txtMX, txtMY-15, tamX, tamY);
  471. context.fillRect(txtMX, txtMY-15, tamX, tamY);
  472. context.fillStyle = "black"; //"white";
  473. context.fillText(" " + mensagem, txtMX, txtMY);
  474. roundRect(context, txtMX, txtMY-15, tamX, tamY);
  475. }
  476. // Redesenha tudo
  477. function desenhaTudo () {
  478. console.log("desenhaTudo(): inicio");
  479. context.font = 'bold 20px serif';
  480. context.drawImage(imgFundo, 0, 0, width, height );
  481. context.fillStyle = "white";
  482. context.fillText(iHanoi, txtTx, txtTy); // iHanoi
  483. context.fillText(LInE, txtLInEx, txtLInEy); // LInE-IME-USP
  484. context.drawImage(imgHastes[0], posx_HA, posy_HA); // posicao haste A
  485. context.drawImage(imgHastes[1], posx_HB, posy_HB); //
  486. context.drawImage(imgHastes[2], posx_HC, posy_HC); //
  487. context.font = 'bold 14px serif';
  488. context.fillStyle = "white"; // "#26508c"; // para fundo de mensagem
  489. //context.clearRect(txtMX, txtMY-15, tamX, tamY); // Mensagens
  490. context.fillRect(txtMX, txtMY-15, tamX, tamY); // Mensagens
  491. roundRect(context, txtMX, txtMY-15, tamX, tamY); // Mensagens
  492. //context.clearRect(txtNMX, txtNMY-15, tamNMX, tamNMY); // Numero de movimentos
  493. context.fillRect(txtNMX, txtNMY-15, tamNMX, tamNMY); // Numero de movimentos
  494. roundRect(context, txtNMX, txtNMY-15, tamNMX, tamNMY); // Numero de movimentos
  495. context.fillStyle = "black"; //"white";
  496. context.fillText(" " + mensagem, txtMX, txtMY); // mensagens
  497. context.fillText(" " + mensagemNM + contador, txtNMX, txtNMY); // numero de movimentos
  498. desenhaDiscos();
  499. console.log("desenhaTudo(): final");
  500. } // desenhaTudo()
  501. // Versao distinta para inicia - removida em favor do 'onload' no 'body'
  502. // window.addEventListener("DOMContentLoaded", function () {
  503. // //D alert("DOMContentLoaded: " + canvas.width + "," + canvas.height);
  504. // desenhaTudo();
  505. // });
  506. console.log("iHanoi: final do JavaScript principal"); //D