Buscamines/Minesweeper amb Javascript
Introducció
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).
És popular perquè venia amb totes les versions de Windows des de la versió 3.11.
Codi Javascript
Cercant per minesweeper javascript tenim diferents projectes per estudiar-ne el codi. Escollir el següent projecte:
A classe estudiem i comentem els aspectes més rellevants del codi, i els relacionam amb el contingut de l'assignatura.
Tasques a realitzar
La següent pràctica és voluntària. Realitza els següents punts, que també s'han comentat a classe.
- Desacarrega els fitxers associats a aquest projecte, i executa'l localment.
- Estudia l'estructura del projecte. Identifica les funcions i els blocs principals. Identifica les variables més importants.
- Ficar la capçalera amb el teu nom
- actualitzar el codi. XHTML compliant
- actualitzar el codi. Separar html, javascript i CSS. utilitzar addeventlistener.
- mirar CSS. Identificar les parts que fan que aquest buscamines tingui disseny Windows 3.11
- En quina instrucció s'inicialitza el joc? Quina funció crida? Quins arguments té?
- Estudia el timing del joc. On es defineix la secundera?
- 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.
Pots entregar la pràctica al Google Classroom.
Solució parcial al cas NxM
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).
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ç:
Ara s'ha d'acabar...
creat per Joan Quintana Compte, gener 2017
