Ejercicio JavaScript: Crear un juego de recordar parejas de imagenes

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

Ejercicio JavaScript: Crear un juego de recordar parejas de imagenes

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.

El código JavaScript se guarda en un archivo llamado parejas.js que guardo en el mismo directorio que el resto de archivos.

Y las CSS de este ejercicio se guardan en un archivo llamado parejas.css

Para terminar solo recordar que el directorio imágenes está dentro del directorio dónde guardamos los archivos anteriormente mostrados.


2 Comments

Deja un comentario

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