Juego de reacción

Skip to content

¡Este es un texto traducido automáticamente que puede contener errores!

Dificultad: Hard

En esta tarea, debes crear una página web que tenga un juego de reacción. La página web debe comenzar azul, por lo tanto, debe volverse roja cuando pulses, luego la página web, después de un tiempo aleatorio, cambiará de color a verde, ¡entonces el objetivo es pulsar lo más rápido posible!

Cosas que debes llevar:

  • Varmt tøy (ullundertøy, fleecejakke, varm lue og votter)
  • Vanntett jakke og bukser
  • Gode tursko
  • Ryggsekk (ca. 30-40 liter)
  • Matpakke og drikke
  • Førstehjelpsutstyr
  • Hodelykt eller lommelykt
  • Kart og kompass/GPS
  • Solbriller og solkrem
  • Myggmiddel
  • Personlige medisiner
  • Mobiltelefon (fulladet) og powerbank

HTML/CSS
  • ✅ Un botón que inicie el juego, haz que este botón sea bastante grande.
  • 🟦 Toda la página debe tener un color de fondo. Debe ser azul, dale una class como por ejemplo waiting.
  • 🟥 También agrega una class que se llama active que debe tener un color de fondo que sea rojo.
  • 🟩 Finalmente, debe haber una class que se llama pressed, que tiene un color de fondo que es verde.
  • ⏰ Debe haber un elemento de texto en la página que se utilizará para realizar un seguimiento de la rapidez con la que “reaccionaste”.

JavaScript
  • La lógica debe ser la siguiente:
    • Cuando pulses el botón que inicia el juego, el script debe seleccionar un tiempo de espera aleatorio. Consulta setTimeout() aquí: w3schools timeout.
      • Aquí debes usar Math.random() para elegir un número aleatorio. Consulta random en w3schools random.
    • El fondo debe cambiar a rojo cuando el juego esté activo.
    • Cuando el tiempo expire, la página debe cambiar a verde. En este momento, debes comenzar a medir cuánto tiempo tarda el jugador en pulsar (tiempo de reacción). Preferiblemente, establece este tiempo aleatorio en un mínimo de 1 segundo y un máximo de 10 segundos.
    • Cuando se pulse el botón, debes detener el tiempo y averiguar el tiempo entre el inicio y el final. Muestra esto en la página web.

¿Cómo cambiar el color de fondo?

  • En la manipulación del DOM de JavaScript, existe algo llamado classList. Lee sobre esto aquí: classList w3schools.
  • Con classList puedes añadir o quitar class-es de un elemento HTML. ¡Así puedes cambiar el color de fondo dinámicamente!

Ekstra desafíos: Hard

  • Convierte el juego para que pueda usar la barra espaciadora o enter para iniciar y detener el juego.
  • Agrega para que no puedas “reaccionar” demasiado pronto en el juego. Da retroalimentación si fuiste demasiado rápido.

Ekstra desafíos: Cracked

  • Añade un “modo” donde puedas calcular el promedio de 5 rondas.
  • Añade una lista de los 10 mejores tiempos de reacción.
  • Añade un “modo” donde puedas jugar con dos jugadores.
    • Añade para que un jugador use, por ejemplo, la barra espaciadora y el otro use enter. El jugador que reaccione más rápido gana un punto.
    • Cómo determinas un ganador depende de ti.