Buscamines/Minesweeper amb Javascript

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Minesweeper.png

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.

  1. Desacarrega els fitxers associats a aquest projecte, i executa'l localment.
  2. Estudia l'estructura del projecte. Identifica les funcions i els blocs principals. Identifica les variables més importants.
  3. Ficar la capçalera amb el teu nom
  4. actualitzar el codi. XHTML compliant
  5. actualitzar el codi. Separar html, javascript i CSS. utilitzar addeventlistener.
  6. mirar CSS. Identificar les parts que fan que aquest buscamines tingui disseny Windows 3.11
  7. En quina instrucció s'inicialitza el joc? Quina funció crida? Quins arguments té?
  8. Estudia el timing del joc. On es defineix la secundera?
  9. 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

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines