http://wiki.joanillo.org/index.php?action=history&feed=atom&title=Buscamines%2FMinesweeper_amb_Javascript 2026-08-30T02:20:54Z Historial de revisió per a aquesta pàgina del wiki MediaWiki 1.34.2 http://wiki.joanillo.org/index.php?title=Buscamines/Minesweeper_amb_Javascript&diff=255461&oldid=prev 2017-01-18T19:10:33Z

<p></p> <p><b>Pàgina nova</b></p><div>__TOC__<br /> =Introducció=<br /> [[Fitxer:Minesweeper.png]]<br /> *https://es.wikipedia.org/wiki/Buscaminas<br /> El '''buscamines''' és un dels ''1001 jocs que hauries de jugar abans de morir'' (https://www.amazon.es/videojuegos-jugar-antes-morir-ENTRETENIMIENTO/dp/8425346185).<br /> <br /> És popular perquè venia amb totes les versions de Windows des de la versió 3.11.<br /> =Codi Javascript=<br /> Cercant per ''minesweeper javascript'' tenim diferents projectes per estudiar-ne el codi. Escollir el següent projecte:<br /> *https://birrell.org/andrew/minesweeper/<br /> A classe estudiem i comentem els aspectes més rellevants del codi, i els relacionam amb el contingut de l'assignatura.<br /> =Tasques a realitzar=<br /> La següent pràctica és voluntària. Realitza els següents punts, que també s'han comentat a classe.<br /> #Desacarrega els fitxers associats a aquest projecte, i executa'l localment.<br /> #Estudia l'estructura del projecte. Identifica les funcions i els blocs principals. Identifica les variables més importants.<br /> #Ficar la capçalera amb el teu nom<br /> #actualitzar el codi. XHTML compliant<br /> #actualitzar el codi. Separar html, javascript i CSS. utilitzar addeventlistener.<br /> #mirar CSS. Identificar les parts que fan que aquest buscamines tingui disseny Windows 3.11<br /> #En quina instrucció s'inicialitza el joc? Quina funció crida? Quins arguments té?<br /> #Estudia el timing del joc. On es defineix la ''secundera''?<br /> #Generalitzar el codi a taules 8x8 (i 10 mines), 16x16 (i 40 mines), 30x16 (i 99 mines). Ho pots generalitzar a un número arbitrari de files i columnes,i de mines (per exemple amb un formulari). Pots crear la taula html de forma dinàmica amb createElement(), i també crear de forma dinàmica tots els events. <br /> <br /> Pots entregar la pràctica al Google Classroom.<br /> =Solució parcial al cas NxM=<br /> *[[Fitxer:Minesweeper.zip]]<br /> Si descomprimeixes el ''zip'' pots trobar els fitxers que necessites, i concretament en els arxius ''taula_i_events_dinamics.html'' i ''taula_i_events_dinamics.js'' trobaràs una solució parcial del cas NxM que s'ha comentat a classe. La idea és generar la taula de totes les caselles de forma dinàmica, i que totes les caselles tinguin l'event ''mousedown'' (i poder distingir entre el botó dret i l'esquerre).<br /> <br /> La dificultat principal ha estat com passar en el ''addEventListener'' la referència de l'event que s'ha disparat. Ha estat d'ajuda el següent enllaç:<br /> *http://stackoverflow.com/questions/7394750/adding-event-as-parameter-within-function-using-addeventlistener-doesnt-work<br /> <br /> Ara s'ha d'acabar...<br /> <br /> {{Autor}}, gener 2017</div>

Joan