juego-de-memoria/README.md

# 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
<div class="wrapper"></div>
```

---

## Tablero de Cartas

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

---

## Carta Individual

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

---

## Frente de la Carta

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

---

## Dorso de la Carta

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

---

## Botón de Pantalla Completa

```html
<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:

```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
<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

```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
<li class="card"></li>
```

---

### 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
<div id="moves"></div>
```

---

## Temporizador

Agregar:

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

---

## 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

---