6/10/2016

11thMay2013

BuscaminasbsicoconHTMLyJavascript

BuscaminasbsicoconHTMLyJavascript

[http://4.bp.blogspot.com/
STyBYDDvjY0/UY6VSmMwGnI/AAAAAAAAABs/DcOiCjAmrTQ/s1600/minas.png
]

Descripcin
Recuerdan el tradicional juego buscaminas que todos alguna vez hemos jugado, este curioso juego me toco
desarrollarlo en el primer ciclo de mi carrera y ahora he decidido hacerlo para web ya que recin me estoy
iniciandoeneldesarrollodeweb.
Eljuegoconsisteendespejartodaslascasillasdelapantallaquenoocultenunabombaominaalgunascasillas
tienenunnmero,estenmeroindicalasbombasquesumantodaslascasillascircundantes.As,siunacasilla
tieneelnmero3,significaquedelasochocasillasquehayalrededor(sinoesenunaesquinaoborde)hay3
conbombasy5sinbombas.Sisedescubreunacasillasinnmeroindicaqueningunadelascasillasvecinas
tiene mina y estas se descubren automticamente. Si se descubre una casilla con una bomba se pierde la
partida.

Explicacindeldesarrollo
Loprimeroquedebemoshacereslacreacindeltablerodondeestarncontenidaslascasillasquemostrarn
losnmerosylasbombas,paraelloutilizaremosundivalcualleasignamoslaclasetableroparamodificarsus
propiedadesatravsdeCSS.

http://softwarefacilito.blogspot.com.es/2013/05/buscaminasbasicoconhtmlyjavascript.html

1/5

6/10/2016

BuscaminasbsicoconHTMLyJavascript

[http://4.bp.blogspot.com/l9HfANrmdTY/UY6ak_Cu
EI/AAAAAAAAAB4/d7hnJoNGMA/s1600/tablerominas.png]

El siguiente es paso es crear las casillas que estarn contenidas en el tablero para lo cual hemos creado una
funcin en javascript que permite agregar una etiqueta div al tablero por cada casilla, en este caso sern 64
casillasyaquetendremosuntablerode8filasy8columnas.Porcadadivagregadoleaadimoseleventoclick
quellamaralafuncinmostrarnmero(estafuncinserexplicadamsadelante).

[http://3.bp.blogspot.com/
gAxT0JskfbU/UY6cuctsV_I/AAAAAAAAACE/6j2RrSGUvKw/s1600/creartablero.png]

Depusdecrearlascasillasdeltablerosedebecrearunavariablellamadaminasparaalmacenarelcontenido
delamatrizdondeestarncolocadoslosnmeroylasbombasestavariablepermitirobtenerelvalordeuna
casilla cuando se de click. Esta variable de estar inicializada con valores 0, entonces es necesario crear un
funcinparainicializardichavariable.

[http://2.bp.blogspot.com/
v9F5gQgVZu8/UY6en4KYJHI/AAAAAAAAACQ/UbdiUMWl6Ig/s1600/inicializamatriz.png]

Una vez que ya hemos creado la variable en la cual almacenaremos el contenido de la matriz que iremos
mostrandosetienenquegenerarlasbombasominasaleatoriamentedentrodelamatriz,paraellogeneramos
unnumeroaleatorioparafilaycolumnaycolocamoslabombaenesaposicin.
Ejem:minas[aleatorio][aleatorio]=bomba

http://softwarefacilito.blogspot.com.es/2013/05/buscaminasbasicoconhtmlyjavascript.html

2/5

6/10/2016

BuscaminasbsicoconHTMLyJavascript

[http://3.bp.blogspot.com/
VX7HKwB_K7U/UY6gSgk07WI/AAAAAAAAACc/pJY6Jr4JB_w/s1600/generarbombas.png]

Despus que ya hemos colocado las bombas aleatoriamente debemos colocar los nmeros que indican el
nmerodebombasalrededordeesacasilla,paraestoutilizaremosdosfunciones,laprimeraesparaverificar
donde esta la bomba, es decir si se encuentra ubicada en la esquina o en el borde del tablero la segunda
funcin se encarga de recorrer las casillas alrededor de la bomba y va sumando +1 por cada bomba que
encuentreestafuncinrecibecomoparmetrosposicindeinicialyfinalpararealizarelrecorridoalrededorde
lacasillaquecontieneunabomba.
Funcin1

[http://4.bp.blogspot.com/
aqJUY8Vg5JA/UY6q_1N5HlI/AAAAAAAAACs/ILS5SjU90E/s1600/bombasalrededor.png]

Funcin2

[http://4.bp.blogspot.com/
o49q7T2UEY4/UY6rtcn4DaI/AAAAAAAAAC0/JHzjWp2m_J0/s1600/colocarbombas.png]

Como ya tenemos en la matriz las bombas y los nmeros al rededor ahora slo falta realizar la funcin para
expandir las casillas cuando se encuentra una casilla vaca, es decir que alrededor de ella no se encuentra
ninguna bomba esto de debe hacer de manera automtica y recursiva. Para lograr esto se han creado dos
http://softwarefacilito.blogspot.com.es/2013/05/buscaminasbasicoconhtmlyjavascript.html

3/5

6/10/2016

BuscaminasbsicoconHTMLyJavascript

funcioneslaprimerallamadaabrirAlrededor,loquehaceestafuncinesobteneresobtenerelinicioyfinparael
recorrido alrededor de la casilla indicando si se encuentra en la esquina o en el borde del tablero la segunda
funcin es la que permite la recursividad para abrir las casillas alrededor cuando la casilla seleccionada esta
vacaocontieneelnmero0,queindicaquenotienebombasalrededor
Funcin1

[http://4.bp.blogspot.com/
aRZIGH4K7kc/UY6ukuM5Z6I/AAAAAAAAADE/7OvKB4Pmmb8/s1600/abriralrededor.png]

Funcin2

[http://4.bp.blogspot.com/
WujM0xG7UDE/UY6vAfJFuYI/AAAAAAAAADM/_NwWucVVHvs/s1600/abrirceros.png]

Conestoyatenemostodolistoparaquecuandosehagaclicenunacasillapuedamostrarelcontenidoyasea
un nmero o una bomba, y en caso que este vaca se expanda automticamente entonces lo que faltara es
desarrollarlafuncinquehabiamoscreadoanteriormente(mostrarNumero),estafuncinseejecutacadavez
quedamosclicenunacasilla,lacualhaceusodelasfuncionesrealizadasanteriormente.

[http://2.bp.blogspot.com/
GdhZJBMGrqE/UY6wVcgojlI/AAAAAAAAADY/sbkpiXwvUjE/s1600/mostrarNumero.png]

Lo ltimo por hacer es crear un script con la funcin cargar tablero , para que nos cargue las funciones
realizadasanteriormenteydespusaejecutarlaaplicacinenunnavegador.
http://softwarefacilito.blogspot.com.es/2013/05/buscaminasbasicoconhtmlyjavascript.html

4/5

6/10/2016

BuscaminasbsicoconHTMLyJavascript

[http://2.bp.blogspot.com/
BkgjwqItgsE/UY6xPgvU4lI/AAAAAAAAADk/daibZy2Uus/s1600/cargartablero.png]

Bueno espero hayan entendido cul es la lgica para poder desarrollar este pequeo y sencillo juego, a
continuacindejoellinkdedescargaparaquepuedanapreciarelcdigofuenteyademspuedanejecutarlo.
Link

de

descarga:

http://www.mediafire.com/download.php?5wlatt2y15vhdua

[http://www.mediafire.com/download.php?5wlatt2y15vhdua]

Publicado11thMay2013porLuisChicoma
Etiquetas:html,javascript
0 Aadiruncomentario

Introducetucomentario...

Comentarcomo:

Publicar

Seleccionarperfil...

Vistaprevia

http://softwarefacilito.blogspot.com.es/2013/05/buscaminasbasicoconhtmlyjavascript.html

5/5