Ejercicio JavaScript: Crear un juego de recordar parejas de imágenes
Ejercicio JavaScript: Crear un juego de recordar parejas de imágenes

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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("[email protected] 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.







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 1.3 / 5. Recuento de votos: 8

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Resumen
Ejercicio JavaScript: Crear un juego de recordar parejas de imágenes
Nombre
Ejercicio JavaScript: Crear un juego de recordar parejas de imágenes
Descripción
Aquí puedes ver un pequeño juego de recordar parejas. Un ejercicio básico realizado con JavaScript, CSS3 y HTML. También puedes ver el código funcionando.
Autor
sapoclay
Nombre del editor
entreunosyceros
Logo del editor
Esta entrada tiene 2 comentarios
  1. Tammy R

    Con tu permiso te tomo prestado el código, gracias por el aport

    1. sapoclay

      Todo para ti!! … Si lo mejoras no dudes en publicar tus mejoras (todos podemos aprender de ellas). Salu2.

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.