# 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
```txt
/
├── 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
```html
```
---
## Tablero de Cartas
```html
```
---
## Carta Individual
```html
```
---
## Frente de la Carta
```html
```
---
## Dorso de la Carta
```html
```
---
## Botón de Pantalla Completa
```html
```
---
# 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:
```txt
C:\xampp\htdocs\version3x4\
```
Iniciar Apache y abrir:
```txt
http://localhost/version3x4/
```
---
## Opción 3 — Node.js
Instalar `serve`:
```bash
npm i -g serve
```
Ejecutar:
```bash
serve .
```
---
## Opción 4 — Producción Apache
### Crear carpeta
```bash
sudo mkdir -p /var/www/version3x4
```
### Copiar archivos
```bash
sudo cp -r ./Version3x4/* /var/www/version3x4/
```
### Permisos
```bash
sudo chown -R www-data:www-data /var/www/version3x4
```
### VirtualHost
```apache
ServerName juego.midominio.com
DocumentRoot /var/www/version3x4
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
```
### Activar sitio
```bash
sudo a2ensite juego.midominio.com
sudo systemctl reload apache2
```
---
## Opción 5 — Producción Nginx
```nginx
server {
server_name juego.midominio.com;
root /var/www/version3x4;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
```
Reiniciar Nginx:
```bash
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:
```javascript
.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:
```javascript
mostrarConfetiConTexto("...");
```
---
### Pantalla Completa
El botón:
```html
#fullscreen-btn
```
ejecuta:
```javascript
toggleFullScreen();
```
---
# Ediciones Frecuentes
## Cambiar Imágenes
Reemplazar:
```txt
images/img-1.png
images/img-2.png
...
```
manteniendo:
- nombres
- formato
---
## Cambiar Reverso
Modificar:
```txt
images/back.png
```
---
## Cambiar Layout 3×4 a 4×4
### Agregar más cartas
Duplicar:
```html
```
---
### Agregar nuevas imágenes
```txt
images/img-7.png
images/img-8.png
```
---
### Cambiar Grid CSS
```css
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
```
---
# Ajustar Dificultad
## Velocidad de Animación
Modificar:
```css
.card .view
```
---
## Sacudida de Error
Editar:
```css
.card.shake
```
y:
```css
@keyframes shake;
```
---
## Tiempo de Error
Modificar `setTimeout()` dentro de `script.js`.
---
# Cambiar Mensaje de Victoria
Editar:
```javascript
mostrarConfetiConTexto("Mensaje");
```
---
# Pantalla Completa
La función utiliza:
```javascript
document.documentElement.requestFullscreen();
```
y:
```javascript
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:
```html
```
---
## Temporizador
Agregar:
```html
```
---
## Botón Reiniciar
Crear botón que llame:
```javascript
shuffleCard();
```
---
## Sonidos
Usar:
```javascript
HTMLAudioElement;
```
---
## Mejor Tiempo
Guardar datos con:
```javascript
localStorage;
```
---
# Guía Express de Edición
## Cambiar imágenes
Reemplazar:
```txt
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:
```javascript
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
---
