M06UF3Q4. Introducció al pescamines

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Pots jugar al 'pescamines (buscaminas, minesweeper) aquí:

Hem disctutit a classe M06_UF3A1._Teoria_II#Joc_del_Buscamines_I_.28Introducci.C3.B3.29 el pescamines i com hem d'afrontar la seva programació si ho volem fer amb Javascript.

Desenvolupament

Anem a solucionar aspectes concrets i individuals que tenen a veure amb la interfície gràfica i la usabilitat.

Tasques

1. Crear una taula de forma dinàmica amb creteElement. Primer de 8x8 caselles, després ho parametritzes a nxm caselles.

2. Cada cel·la tindrà un id (creat de forma dinàmica). Els valors del id tindran a veure amb el valor fila i columna. Per exemple:

element.setAttribute("id", "cella"+i+j); //és una proposta

3. Tens 4 imatges: 0.jpg, 1.jpg, 2.jpg, 3.jpg. El contingut de la cel·la serà d'entrada 0.jpg.

4. Amb el botó esquerre del ratolí faràs que el valor de la cel·la s'incrementi de valor, i es mostri la següent imatge. Per exemple, de 0.jpg passa a 1.jpg, i de 3.jpg passa a 0.jpg (cíclic).

NOTA: has de saber distingir entre l'event associat al botó esquerre i el botó dret.

5. Amb el botó dret del ratolí faràs que el valor de la cel·la es decrementi de valor, i es mostri la següent imatge. Per exemple, de 0.jpg passa a 3.jpg, i de 1.jpg passa a 0.jpg (cíclic).

6. Regla del joc (bàsic). Quan la suma dels valors de la cel·la val 20 mostrar un missatge per pantalla.

7. Tot el codi ben separat: html, js, css.

Entrega al Classroom

Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.

Opcionalment pots fer un screencast. Avisa al professor quan tinguis la teva solució.


creat per Joan Quintana Compte, novembre 2021