first commit

2026-05-09 12:17:01 -04:00
commit cb00aed531
12 changed files with 890 additions and 0 deletions
@@ -0,0 +1,548 @@
+# 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
+
+---