[Reto] – Tu propio juego con Slider y DOM

En el siguiente video se muestra un pequeño juego interactivo construido con HTML, CSS y JavaScript, utilizando:

• Manipulación del DOM
• Eventos (click, teclado, etc.)
• Gestión de estado
• Lógica de juego
• Datos estructurados (JSON con imágenes, título y ALT) o Arrays

Ahora te toca a ti.

No debes copiar el juego.
Debes crear tu propia versión.

---

Diseña y programaun pequeño juego interactivo basado en:

• Un slider de imágenes
• Interacción del usuario
• Alguna regla o mecánica de juego

No tiene que ser igual al del video.
No tiene que ser perfecto.

---

Material que recibirás

• Carpeta con imágenes de paisajes
• Video mostrando el funcionamiento del juego
• (Más adelante) el código de referencia para comparar

---

Requisitos

Tu juego debe incluir:

1. Un slider funcional
   • Cambiar imágenes
   • Mostrar título
   • Usar DOM
2. Algún tipo de interacción
   • Botón
   • Teclado
   • Evento
3. Una regla de juego
   • Adivinar imagen
   • Secuencia
   • Puntos
   • Vidas
   • Tiempo
   • O cualquier idea propia
4. Mostrar feedback en pantalla
   • Mensaje
   • Resultado
   • Estado del juego

---

Libertad creativa (muy importante)

Puedes hacer:

• Un juego más simple
• Un juego más complejo
• Algo distinto al video
• Otra mecánica
• Otra dificultad
• Otra estética
• Otra lógica

No se evalúa que sea igual.
Se evalúa que funcione y que lo entiendas.

---

Pistas para empezar (no obligatorias)

Puedes usar ideas como:

• Imagen secreta
• Vidas
• Contador
• Secuencia
• Puntos
• Cronómetro
• Imagen aleatoria
• Teclas izquierda/derecha
• Botón “Probar”
• JSON con imágenes

Pero también puedes inventar tu propio sistema.

---

Evaluación

Se valorará:

• Que el slider funcione
• Uso correcto del DOM
• Lógica del juego
• Claridad del código
• Que no esté copiado
• Creatividad
• Complejidad acorde a tu nivel

No todos debéis hacer lo mismo.
Cada alumno llegará hasta donde pueda.

---

Segunda fase (muy importante)

Cuando termines:

1. Recibirás el código del juego mostrado en el video.
2. Deberás compararlo con el tuyo.
3. Analizar:
   • Qué hiciste diferente
   • Qué hiciste mejor
   • Qué no entendías antes y ahora sí
   • Qué mejorarías

Esto forma parte del aprendizaje.

---

Filosofía del ejercicio

Programar no es copiar.
Programar es entender, probar, fallar, ajustar y construir.

Si tu juego funciona, aunque sea simple… has ganado.
Si además lo entiendes… entonces ya estás programando de verdad.

Y cuando compares tu código con otro, verás algo fascinante:
dos soluciones distintas pueden resolver el mismo problema.

Recursos

Para poner emoticons facilmente:

https://emojipedia.org/

Aleatorios en Javascript

function randomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
}