Inicio Apuntes FPApuntes DAW Ejercicio JavaScript: Crear un juego de recordar parejas de imágenes

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

Publicado por entreunosyceros
Publicado el: Última actualización:

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("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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

2 Comentarios

Tammy R 30 abril, 2016 - 2:52 PM

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

Respuesta
sapoclay 30 abril, 2016 - 3:14 PM

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

Respuesta

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.