La prueba consiste en completar un juego inacabado que pretende concienciar sobre la importancia del estudio constante y responsable como clave para la superación de estudios de cierta dificultad.
Puede descargar los recursos necesarios que contienen:
index.html
: Página web con la que se trabajará durante la prueba. El resto de archivos no deben modificarse. Cualquier modificación será descartada y no se tendrá en cuenta como resultado de la prueba. En ella sólo será necesario usar código JavaScript (JS).- Carpeta
recursos
conteniendo:estilo.css
: Archivo con las reglas de estilo del juego.coche.gif
: Archivo con el sprite animado de un hombre en vehículo.gauge.min.js
: Archivo con el código para la aguja de estudio.no-tocar.js
: Archivo con el código de la claseEstudiante
y la creación de la aguja de estudio.
Prototipo.png
: Imagen del resultado esperado.README.MD
: Estas instrucciones.
El estado de implementación actual es:
- Aguja de nivel de estudio operativa
body
completado- Variable
horasDeClase
con valor1000
(valor para completar el curso)
A partir de aquí se pide:
- Instanciar un objeto de la clase
Estudiante
y asignarlo a la variableestudiante
. - Completar la función
pintarJuego()
para añadir las siguientes funcionalidades:- Mostrar el nivel de estudio actual (valor de
estudiante.estudio
) en el display que aparece justo debajo de la aguja (ahora mismo sólo aparecem/h
:m
inutos de estudio porh
ora de clase) - Desplazar la capa con
class="estudianteWrapper"
igual al%
de clases recibidas (estudiante.horasDeClase
) del total (variable globalhorasDeClase
). Se usará la propiedad de margen izquierdo de la citada capa para crear el efecto de desplazamiento. No debe superar el valor de95%
por motivos de estilo.
- Mostrar el nivel de estudio actual (valor de
- Implementar la función
checkAgobio()
que:- Devolverá
false
en caso de que el estudio actual sea mayor de120 m/h
o menor de20 m/h
. En otro caso devolverátrue
. - Mostrará en pantalla el mensaje
¡Te has quemado!
si el estudio es excesivo o¡Te ha pillado el toro!
si es escaso.
- Devolverá
- Implementar la función
actualizarJuego()
para que pinte el juego si el agobio es correcto y se continua en el curso o que llame a la función de fin del juego. Esta función de actualización se llamará periódicamente cada100ms
. - Añadir los listeners para que:
- Mientras se pulsa la [barra espaciadora], el
estudiante
apriete los codos (estudiante.apretarLosCodos()
). - En caso contrario se relajará (
estudiante.relajarse()
). - Cada listener se añadirá por JS (no usar HTML) y de dos formas distintas.
- Mientras se pulsa la [barra espaciadora], el
- Durante el juego se debe registrar el nivel de estudio actual cada segundo. Esos valores se almacenarán en una variable de su elección. No olvide registrar también el valor al final del juego aunque no coincida con la lectura periódica. Los valores registrados se usarán, entre otras cosas, para ser pintados en la gráfica Gráfico de estudio. El eje
x
representará las horas de clase recibidasestudiante.horasDeClase
hasta el momento del registro y el ejey
el nivel de estudio actual en el momento del registro. - Implementar la función
finDelCurso
que finalice el juego de tal modo que:- El juego debe finalizar con un estudio actual reseteado a un valor de
0
. - El último mensaje mostrado (
alert
) debe ser el de fin del juego. El texto será¡Has terminado el curso!
[salto de línea]Tu media de estudio fue:
[media con dos decimales]m/h
. La media es el promedio de los valores de estudio actual registrados periódicamente. - Cancele el registro periódico, pero almacene el valor final.
- Los eventos de teclado deben anularse.
- El juego no volverá a pintarse tras pintar el estado final.
- Muestre la gráfica con los registros de estudio guardados. Utilice para ello la capa con
id
igual agrafica
(se encuentra al final delbody
). Esta capa está inicialmente oculta por la claseCSS
que usa (oculto
). Desocúltela eliminándo sólo esa clase y rellénela con la gráfica. Puede implementar la gráfica completamente, aunque se permite y recomienda utilizar una librería de su elección para hacerlo.
- El juego debe finalizar con un estudio actual reseteado a un valor de