En el post de hoy voy a dejar un ejercicio que rompe un poco la monotonía de lo últimos códigos que tenía subido sobre JavaScript. Se trata de un pequeño juego de entretenimiento del «mítico» juego de recordar parejas de imágenes. En el ejercicio que en principio solo trataba de establecer unas imágenes dentro de una tabla y buscar su pareja. Le he añadido unas CSS y unos contadores, para los intentos realizados y para los aciertos del usuario. A su vez he añadido un botón para restablecer el tablero de imágenes y los contadores.
Las imágenes utilizadas no han sido elegidas por mi. Aun que también es cierto que pude haber escogido otras y me dio pereza hacerlo. Las imágenes que he usado se pueden descargar desde aquí. En caso de querer utilizar otras, puedes usar las que quieras. Pero si no quieres modificar el código que voy a dejar, solo tienes que pasarlas todas a .png y que sean 13 imágenes (numeradas de 0 a 12). También necesitaremos la imagen que se muestra cuando están boca abajo las imágenes a descubrir ha de llamarse cruz.png. Pero bueno, todo esto es modificable al antojo de quien guste ya que las celdas de las imágenes mostradas son fácilmente ampliables.
Si quieres ver un ejemplo funcional del ejercicio, puedes hacer click aquí y echar una partidilla … o dos. Bueno una vez explicado el asunto del ejercicio, vamos al turrón del mismo …
Ejercicio JavaScript para recordar parejas:
Este ejercicio lo he dividido en tres archivos. El que guarda todo el HTML se llama cartas.html.
<html> <head> <title>Parejeitor 3x4</title> <meta charset="UTF-8"> <link rel="styleSheet" href="parejas.css" type="text/css"> <!--cargamos las css--> <script src="parejas.js" type="text/javascript"></script><!--cargamos el javascript--> </head> <body> <div id="pagina"> <div id="marca"> <h1>Parejeitor <strong>V.3,655</strong></h1> </div> <div id="contenido"><!--div para el contenido--> <div id="tablero">Cargando...</div><!--tablero dónde se carga el tablero con imagenes--> <form name="datos" id="datos" action="cartas.html"> <!--formulario de datos y bot�n--> <div id="fichas"></div> <dl> <dt>Intentos</dt><!--contador intentos--> <dd id="movimientos"></dd> <dt>Acertados</dt><!--contador aciertos--> <dd id="aciertos"></dd> <dt>Tiempo</dt><!--temporizador--> <dd id="cronometro"><span id="minutos">0</span>:<span id="segundos">0</span></dd> </dl> <p><input type="submit" value="Reiniciar"></p><!--bot�n reiniciar--> </form> </div><!--fin del div de contenido--> <div id="adicional"><!--pie--> <a href="http://entreunosyceros.net" target="_blank" title="Creado para 2 de DWCC por SapoClay">SapoClay 2014</a><br> DWCC - 2º DAW </div> <!--fin del pie--> </div> </body> </html>
El código JavaScript se guarda en un archivo llamado parejas.js que guardo en el mismo directorio que el resto de archivos.
/******************************/ /***PARAMETROS PARA EL JUEGO*****/ var oJuego = new Object() ; //instanciamos un nuevo objeto oJuego.columnas = 4; //establecemos el número de columnas que tendrá el tablero oJuego.filas = 3; //establecermos el número de filas que tendrá el tablero oJuego.extension=".png"; //extensión para TODAS las imagenes oJuego.ruta ="img/"; //directorio dónde seguardan las imagenes oJuego.pulsada = new Array (0,0); //array para guardar las parejas de cartas al pulsar oJuego.intentos = 0; //contador de intentos oJuego.aciertos = 0; //contador de aciertos var MAXIMO_FICHAS = oJuego.filas * oJuego.columnas; //el máximo de fichas para el tablero var aImagenes = new Array(); //array para guardar las imagenes var enPausa = false; //pause para esperar a pulsar la segunda carta /********************************/ /************FUNCIONES***********/ //Función para cargar todas las imagenes. Le damos un tamaño de 100x100 //Guardamos cada imagen dentro del array para guardar las imagenes function cargarImagenes(){ for( i = 0; i < MAXIMO_FICHAS;i++){ aImagenes[i] = new Image(100,100); aImagenes[i].src = oJuego.ruta + i + oJuego.extension; } } /*********************************/ //functión para pintar en la página el tablero //por defecto se muestra en todas la celdas la imagen llamada cruz.png //se guardan todos los elementos de la tabla dentro de la variable salida //que se muestra al final de la función. function mostrarTablero(){ //mostramos los contadores document.getElementById("movimientos").innerHTML = oJuego.intentos; document.getElementById("aciertos").innerHTML = oJuego.aciertos; var salida = "<table>\n"; for (i=0; i < MAXIMO_FICHAS ; i++) { if (i % oJuego.columnas == 0 ){ salida += "\n<tr>" } salida += '<td id="carta_'+ i + '"><a href="" onclick="return false" onmousedown="mostrar(' +i + ')" onmouseup="comprobar('+i+')" >'+ '<img src="' + oJuego.ruta+ "cruz" + oJuego.extension + '"></a></td>'; } salida += "</table>"; document.getElementById("tablero").innerHTML = salida; } /*********************************/ //functión para empezar y establecer los parámetros antes de mostrar el tablero function empezarJuego(){ var nUno, nDos, nTemp; oJuego.pulsada = new Array (-1,-1); //iniciamos en -1 para solo poder usar las posiciones 1 y 0 oJuego.intentos = 0; oJuego.aciertos = 0; // ordenar array () oJuego.cartas = new Array (MAXIMO_FICHAS) for (i=0; i < MAXIMO_FICHAS ; i++ ){ oJuego.cartas[i] = i; } // desordenar el array() i = 100 ; while (i--){ nUno = azar(); //aleatorio para separar las parejas nDos = azar(); //aleatorio para separar la pareja de la anterior if (nDos != nUno ){ //establecemos el orden nTemp = oJuego.cartas[nUno] oJuego.cartas[nUno] = oJuego.cartas[nDos] oJuego.cartas[nDos] = nTemp; } } mostrarTablero(); //mostramos el tablero gracias a la función mostrarTablero } /*********************************/ // funciones varias para el juego function azar(){ return Math.floor(Math.random()*MAXIMO_FICHAS); } /*********************************/ //función para comprobar si se han pulsado una o dos cartas function soloImpar(n){ return (n % 2 == 0 ? n : n - 1); } /*********************************/ //functión para mostrar cada una de las imagenes function mostrar(nFicha){ if (!enPausa){ //buscamos la imagen en el array if ( document.images[nFicha].src.indexOf(oJuego.ruta + "cruz"+ oJuego.extension)!=-1 ) { document.images[nFicha].src = aImagenes[ oJuego.cartas[nFicha] ].src; if ( oJuego.pulsada[0] == -1 ) oJuego.pulsada[0]= nFicha; else oJuego.pulsada[1]= nFicha; } else { //en caso de que se pulse una imagen ya girada alert("Pulsa sobre una imagen sin pareja ... !!"); } } } /*********************************/ //functión para volver a dar la vuelta a las cartas function quitarPausa(){ enPausa= false; document.images[oJuego.pulsada[0]].src = oJuego.ruta + "cruz"+ oJuego.extension; document.images[oJuego.pulsada[1]].src = oJuego.ruta + "cruz"+ oJuego.extension; // volver las teclas oJuego.pulsada[0] = -1; oJuego.pulsada[1] = -1; } /*********************************/ function comprobar(){ // comprobar dos teclas if( enPausa || oJuego.pulsada[1] == -1){ return ; } oJuego.intentos++; //añadimos uno al contador //en caso de acertar if ( soloImpar(oJuego.cartas[oJuego.pulsada[0]]) == soloImpar(oJuego.cartas[oJuego.pulsada[1]]) ) { oJuego.aciertos++; //añadimos uno al contador aciertos //si el número de aciertos multiplicado por 2 es igual al número de fichas //se da por teminado el juego if ( oJuego.aciertos * 2 == MAXIMO_FICHAS ) { //Paramos el cronómetro detenerse() //mensaje de final de juego alert("Bien Jugado ... y solo lo has tenido que intentar "+oJuego.intentos+" veces\nComo premio un chorizo de cantimpalo!!!" + "\nHas tardado en completar el juego "+contador_m+":"+(contador_s-1)); } oJuego.pulsada[0] = -1; oJuego.pulsada[1] = -1; } else { enPausa= true; //activamos pause setTimeout(quitarPausa,1000); //establecemos el pause en 1 segundo para darse la vuelta las imagenes cuando no coincidan } //mostramos los contadores document.getElementById("movimientos").innerHTML = oJuego.intentos; document.getElementById("aciertos").innerHTML = oJuego.aciertos; } /*********************************/ //Evento que al cargarse la ventana carga las funciones cargarImagenes, empezarJuego y cargar el reloj window.onload = function () { cargarImagenes(); empezarJuego(); bienvenida(); } /********************************/ //esta función hace funcionar el reloj desde que se carga la página function carga(){ contador_s =0; contador_m =0; s = document.getElementById("segundos"); m = document.getElementById("minutos"); cronometro = setInterval( function(){ if(contador_s==60) { contador_s=0; contador_m++; m.innerHTML = contador_m; if(contador_m==60) { contador_m=0; } } s.innerHTML = contador_s; contador_s++; } ,1000); } /***********************************/ //Esta función detiene el cronómetro var cronometro; function detenerse(){ clearInterval(cronometro); } /***************************************/ //Función de bienvenida y que inicia al reloj function bienvenida(){ alert("Bienvenid@ a Parejeitor V.3,655.\nBusca las parejas de los principes Diney\n y gana un chorizo de cantimpalo."); carga(); }
Y las CSS de este ejercicio se guardan en un archivo llamado parejas.css
/*fuente, tamaño, margen izquierdo y color de fondo para el body*/ body { font-family: 'Courier New', Courier, monospace, Sans, helvetica, arial, verdana ; font-size: 15px; margin-left: 400px; background-color: black; } /*Posición para la tabla dónde se muestran las imagenes*/ #contenido { position: relative; } /*Posición, margen superior, margen izquierdo, tamaño de la fuente color y negrita del enlace al final de la página.*/ #adicional { position:absolute; margin-top:15px; margin-left: 400px; font-size: 14px; left: 0px; color: #666; font-weight: bold ; } /*CSS par ala etiqueta h1*/ h1 { text-align: right; width: 460px; font-size: 20px; font-weight: bold; color: #9C9CB1; } /*tamaño de la fuenta que afecta a la etiqueta strong que esté dentro de h1*/ h1 strong { font-size: 48px; } /*CSS para la tabla que está dentro del id tablero (definido en js) */ #tablero table{ border: 2px solid #9C9CB1;; padding: 4px 8px; } /*CSS para los tr y td que están contenidos dentro del div con id tablero*/ #tablero tr, #tablero td{ padding: 0; margin: 0; } /*CSS para las imagenes que están dentro de un td que a su vez están dentro del div con id tablero*/ #tablero td img { margin: 4px; padding: 0; height: 100px; width : 100px; border: none; } /*Para cuando se pasa el ratón por encima de las imágenes*/ #tablero td img:hover { margin: 4px; padding: 0; height: 98px; width : 98px; border: 1px solid red; } /*CSS para el formulario que muestra los contadores*/ #datos { position: absolute; top : 0px; left: 480px; padding: 4px 6px; background-color: #c6c6e0; border:1px solid red; } /*CSS para los encabezados de listas de definición que están dentro de los div con id datos*/ #datos dt { font-weight: bold ; } /*CSS para las definiciones de lista de definiciones que están dentro del div con id datos*/ #datos dd { display: block; width: 42px; border: 1px solid #777; padding: 2px; text-align:right; margin: 2px 0 12px 36px; }
Para terminar solo recordar que el directorio imágenes está dentro del directorio dónde guardamos los archivos anteriormente mostrados.
2 Comentarios
Con tu permiso te tomo prestado el código, gracias por el aport
Todo para ti!! … Si lo mejoras no dudes en publicar tus mejoras (todos podemos aprender de ellas). Salu2.