Juego de Memoria - HTML, CSS y JavaScript

Juego de memoria interactivo desarrollado únicamente con HTML, CSS y JavaScript puro.

El proyecto incluye:

• Sistema de cartas con animaciones
• Barajado automático
• Pantalla completa
• Confetti al ganar
• Diseño responsive
• Sistema de comparación de pares

---

Tecnologías Utilizadas

• HTML5
• CSS3
• JavaScript Vanilla
• Canvas Confetti (CDN)

---

Estructura del Proyecto

/
├── index.html
├── style.css
├── script.js
├── fullscreen-icon.png
└── images/
    ├── back.png
    ├── img-1.png
    ├── img-2.png
    ├── img-3.png
    ├── img-4.png
    ├── img-5.png
    └── img-6.png

---

Estructura HTML Principal

Contenedor del Juego

<div class="wrapper"></div>

---

Tablero de Cartas

<ul class="cards"></ul>

---

Carta Individual

<li class="card"></li>

---

Frente de la Carta

<div class="view front-view">
  <img src="images/back.png" />
</div>

---

Dorso de la Carta

<div class="view back-view">
  <img src="images/img-N.png" />
</div>

---

Botón de Pantalla Completa

<button id="fullscreen-btn">
  <img src="fullscreen-icon.png" />
</button>

---

Funciones Principales

El archivo script.js contiene las funciones principales del juego.

Función	Descripción
shuffleCard()	Baraja y reinicia las cartas
flipCard()	Voltea una carta
matchCards()	Compara dos cartas
toggleFullScreen()	Activa/desactiva pantalla completa
mostrarConfetiConTexto()	Muestra confetti al ganar

---

Instalación

Opción 1 — Abrir Directamente

1. Descomprimir el proyecto
2. Abrir index.html

Ideal para pruebas rápidas.

---

Opción 2 — Localhost con XAMPP

Copiar el proyecto a:

C:\xampp\htdocs\version3x4\

Iniciar Apache y abrir:

http://localhost/version3x4/

---

Opción 3 — Node.js

Instalar serve:

npm i -g serve

Ejecutar:

serve .

---

Opción 4 — Producción Apache

Crear carpeta

sudo mkdir -p /var/www/version3x4

Copiar archivos

sudo cp -r ./Version3x4/* /var/www/version3x4/

Permisos

sudo chown -R www-data:www-data /var/www/version3x4

VirtualHost

<VirtualHost *:80>
  ServerName juego.midominio.com
  DocumentRoot /var/www/version3x4

  <Directory /var/www/version3x4>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>
</VirtualHost>

Activar sitio

sudo a2ensite juego.midominio.com
sudo systemctl reload apache2

---

Opción 5 — Producción Nginx

server {
  server_name juego.midominio.com;

  root /var/www/version3x4;
  index index.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

Reiniciar Nginx:

sudo systemctl reload nginx

---

Funcionamiento del Juego

Tablero

• Formato 3×4
• 12 cartas
• 6 pares

---

Mecánica

Volteo

Cuando el usuario hace click:

• se ejecuta flipCard()
• la carta gira

---

Comparación

matchCards() compara:

.back-view img

---

Acierto

Si coinciden:

• permanecen abiertas
• aumenta contador matched

---

Fallo

Si no coinciden:

• se aplica .shake
• se espera un tiempo
• las cartas se vuelven a tapar

---

Victoria

Cuando todos los pares son encontrados:

mostrarConfetiConTexto("...");

---

Pantalla Completa

El botón:

#fullscreen-btn

ejecuta:

toggleFullScreen();

---

Ediciones Frecuentes

Cambiar Imágenes

Reemplazar:

images/img-1.png
images/img-2.png
...

manteniendo:

• nombres
• formato

---

Cambiar Reverso

Modificar:

images/back.png

---

Cambiar Layout 3×4 a 4×4

Agregar más cartas

Duplicar:

<li class="card"></li>

---

Agregar nuevas imágenes

images/img-7.png
images/img-8.png

---

Cambiar Grid CSS

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

---

Ajustar Dificultad

Velocidad de Animación

Modificar:

.card .view

---

Sacudida de Error

Editar:

.card.shake

y:

@keyframes shake;

---

Tiempo de Error

Modificar setTimeout() dentro de script.js.

---

Cambiar Mensaje de Victoria

Editar:

mostrarConfetiConTexto("Mensaje");

---

Pantalla Completa

La función utiliza:

document.documentElement.requestFullscreen();

y:

document.exitFullscreen();

---

Checklist de Pruebas

Validaciones Básicas

• Las 12 cartas aparecen
• Las cartas giran
• Los pares permanecen abiertos
• El shake funciona
• El tablero se baraja
• El fullscreen funciona
• Responsive correcto

---

Problemas Comunes

Problema	Causa	Solución
Cartas blancas	Ruta incorrecta	Revisar /images
No funciona el juego	Error JS	Revisar consola F12
No aparece confetti	CDN bloqueado	Revisar conexión
Fullscreen falla	Sin interacción	Ejecutar tras click
Responsive roto	Grid incorrecto	Ajustar CSS

---

Mejoras Opcionales

Contador de Movimientos

Agregar:

<div id="moves"></div>

---

Temporizador

Agregar:

<div id="time"></div>

---

Botón Reiniciar

Crear botón que llame:

shuffleCard();

---

Sonidos

Usar:

HTMLAudioElement;

---

Mejor Tiempo

Guardar datos con:

localStorage;

---

Guía Express de Edición

Cambiar imágenes

Reemplazar:

images/img-*.png

---

Añadir más pares

1. Duplicar cartas
2. Añadir nuevas imágenes
3. Ajustar grid CSS

---

Cambiar dificultad

Modificar:

• setTimeout()
• animaciones CSS

---

Cambiar texto de victoria

Editar:

mostrarConfetiConTexto();

---

Características Técnicas

• No utiliza backend
• No requiere base de datos
• Todo funciona en el navegador
• Proyecto completamente frontend
• Compatible con hosting estático

---