En el lab anterior agregaste funcionalidad para que el juego
termine cuando bird
tenga una colision con obstaculos
. En este lab, nos concentraremos en agregar funcionalidad para que el contador
se actualice cuando bird
logre evadir un par de obstaculos
.
Agrega los siguientes métodos dentro de script.js
. Las descripciones para los métodos y propiedades de los objetos contador
,juego
, bird
, y obstaculos
se encuentran más abajo en este README.
- Agrega la propiedad
contador.unidades
- Agrega la propiedad
contador.decenas
- Agrega la propiedad
contador.puntaje
- Agrega el método
contador.dibujar()
- Agrega el método
contador.actualizar()
- Llama a
contador.dibujar()
dentro dejuego.loop()
- Llama a
contador.actualizar()
dentro deobstaculos.mover()
, pasando como argumento un elemento deobstaculos.lista
unidades
- ¿Qué valor tiene?:
contador.unidades
tiene como valor el elemento html con id#unidades
- ¿Dónde se utiliza?:
contador.dibujar()
utiliza la propiedadunidades
para actualizar la imagen que muestra el numero de unidades del contador.
decenas
- ¿Qué valor tiene?:
contador.decenas
tiene como valor el elemento html con id#decenas
- ¿Dónde se utiliza?:
contador.dibujar()
utiliza la propiedaddecenas
para actualizar la imagen que muestra el numero de decenas del contador.
puntaje
- ¿Qué valor tiene?:
contador.puntaje
tiene como valor el numero0
- ¿Dónde se utiliza?:
contador.actualizar()
utiliza a la propiedadcontador.puntaje
para mantener un puntaje de la cantidad deobstaculos
quebird
ha logrado evadir.
dibujar()
- ¿Qué hace?:
contador.dibujar()
utiliza el valor decontador.puntaje
para dibujar en el DOM el puntaje del juego. - ¿Dónde se utiliza?:
juego.loop()
llama acontador.dibujar()
actualizar()
- ¿Qué hace?:
contador.actualizar()
actualiza elcontador.puntaje
cada quebird
logra evadir un obstaculo. - ¿Dónde se utiliza?:
obstaculos.mover()
llama acontador.actualizar()
timerId
- ¿Qué valor tiene?:
juego.timerId
tiene como valor el numero0
(para iniciar) - ¿Dónde se utiliza?:
juego.timerId
se utilizará dentro dejuego.inicar()
para guardar un timer que llame cada 20 milisegundos ajuego.loop
gravedad
- ¿Qué valor tiene?:
juego.gravedad
tiene como valor el numero2
- ¿Dónde se utiliza?: La variable
gravedad
representa el numero de pixeles que se restarán abird.bottom
cuando se aplique el métodobird.efectoGravedad()
skyHeight
- ¿Qué valor tiene?:
juego.skyHeight
tiene como valor el numero580
- ¿Dónde se utiliza?: La variable
skyHeight
representa la altura del div que contiene la imagen de fondo de pantalla del juego (el cielo y la ciudad).juego.skyHeight
se utiliza dentro del métodoobstaculos.crear()
, para calcular la altura de los obstaculos.
timerObstaculos
- ¿Qué valor tiene?:
juego.timerObstaculos
tiene como valor el numero0
(para iniciar) - ¿Dónde se utiliza?:
juego.timerObstaculos
se utilizará dentro dejuego.inicar()
para guardar un timer que llame cada 20 milisegundos ajuego.loop
aleatorio()
- ¿Qué hace?: Devuelve un numero aleatorio entre un minimo y máximo dado
- ¿Dónde se utiliza?:
bird.bottom
llamará ajuego.aleatorio()
para calcular un numero aleatorio entre10
y570
verificaColision()
- ¿Qué hace?: Llama a
bird.colision()
para revisar sibird
tuvo una colision. Sibird.colision()
devuelve el valortrue
, llama ajuego.terminar()
para terminar el juego. - ¿Dónde se utiliza?:
juego.loop()
llamará ajuego.verificaColision()
para revisar constantemente si hubo una colisión.
loop()
- ¿Qué hace? :Llama a
bird.efectoGravedad()
,bird.dibujar()
yjuego.verificaColision()
- ¿Dónde se utiliza?:
juego.iniciar()
inicia unsetInterval()
que llama ajuego.loop()
cada 20 milisegundos. De ésta manera cada 20 milisegundos se aplicará el efecto de gravedad a bird, se dibujará bird en su nueva posicion, y se verificará si hubo una colisión
iniciar()
- ¿Qué hace? : Agrega un eventListener de tal forma que cada que se pulse una tecla, se llame a
bird.move
. También asigna ajuego.timerId
unsetInterval()
que llame ajuego.loop()
cada 20 milisegundos. - ¿Dónde se utiliza?:
juego.iniciar()
se tiene que llamar para iniciar el juego. A través delsetInterval()
cada 20 milisegundos se aplicará el efecto de gravedad abird
, se dibujarábird
en su nueva posicion, y se verificará si hubo una colisión. A través del eventListener, se puede moverbird
terminar()
- ¿Qué hace?: Limpia el timer guardado dentro de
game.timerId
(el que llama cada 20 milisegundos agame.loop
). También, llama ajuego.mostrarGameOver()
yjuego.pararEfectos()
. - ¿Dónde se utiliza?: El metodo
juego.terminar()
se llama cuando hay una colision
mostrarGameover()
- ¿Qué hace?: Agrega el id "game-over" al elemento html con clase
.message
- ¿Dónde se utiliza?:
juego.terminar()
llama ajuego.mostrarGameOver
para mostrar el mensaje "Game Over" cuando el juego termina
pararEfectos()
- ¿Qué hace?: quita el id al elemento con clase
.ground
. También agrega el id "fall" al div con clase.bird
- ¿Dónde se utiliza?:
juego.terminar()
llama ajuego.pararEfectos()
para que bird deje de aleatear y el suelo deje de moverse
div
- ¿Qué valor tiene?:
bird.div
tiene como valor el elemento html con clase.bird
- ¿Dónde se utiliza?:
bird.div
se utiliza dentro del métodobird.dibujar
de tal forma que se pueda dibujar el elemento en posiciones determinadas
bottom
- ¿Qué valor tiene?:
bird.bottom
tiene un valor aleatorio entre10
y570
. Para calcular este valor aleatoriobird.bottom
utiliza el métodojuego.aleatorio()
- ¿Dónde se utiliza?: El valor de
bird.bottom
basicamente determina en donde se va a posicionar el elementobird
. Por lo tantobird.bottom
se utiliza en los metodosbird.efectoGravedad()
,bird.dibujar()
,bird.mover()
ybird.colision()
left
- ¿Qué valor tiene?:
bird.left
tiene como valor el numero250
- ¿Dónde se utiliza?:
bird.left
se utiliza dentro debird.dibujar()
. El valor de bird.left basicamente determinará el numero de pixeles a la izquierda del elemento con clas.bird
width
- ¿Qué valor tiene?:
bird.width
tiene como valor el numero60
- ¿Dónde se utiliza?: El valor de de
bird.width
se utilizará más adelante para determinar si hubo una colision entrebird
y losobstaculos
height
- ¿Qué valor tiene?:
bird.height
tiene como valor numero45
- ¿Dónde se utiliza?: El valor de de
bird.height
se utilizará más adelante para determinar si hubo una colision entrebird
y losobstaculos
efectoGravedad()
- ¿Qué hace?:
bird.efectoGravedad()
disminuye la propiedadbird.bottom
por el valor dejuego.gravedad
- ¿Dónde se utiliza?:
juego.loop()
llama abird.efectoGravedad()
. Recuerda quejuego.loop()
se llama cada 20 milisegundos a través dejuego.iniciar()
.
dibujar()
- ¿Qué hace?:
bird.dibujar()
asigna a la propiedad bottom debird.div
(el elemento html con clas bird) el valor en pixeles de la propiedadbird.bottom
- ¿Dónde se utiliza?:
juego.loop()
llama abird.dibujar()
. Recuerda quejuego.loop()
se llama cada 20 milisegundos a través dejuego.iniciar()
.
mover()
- ¿Qué hace?:
bird.mover()
agrega40
abird.bottom
- ¿Dónde se utiliza?:
juego.iniciar()
agrega un eventListener de tal forma que cuando se pulse una tecla, se llame abird.mover()
colision()
- ¿Qué hace?:
bird.colision()
revisa sibird.bottom
es menor a0
. Si eseto es verdad, devuelve el valortrue
. También revisa sibird.colisionY()
ybird.colisionX()
devuelven un valortrue
. Si esto es verdad, llama ajuego.terminar()
y agrega el id colision a los elementos con los quebird
tuvo una colision. - ¿Dónde se utiliza?:
juego.verificaColision()
llama abird.colision()
para verificar si hubo una colision.
colisionY()
- ¿Qué hace?: Revisa si
bird
tiene una colision con los obstaculos de manera vertical (con el eje Y). Recibe como parametro un elemento deobstaculos.lista
. - ¿Dónde se utiliza?:
bird.colision()
llama abird.colisionY()
para revisar si hubo una colision.
colisionX()
- ¿Qué hace?: Revisa si
bird
tiene una colision con los obstaculos de manera horizontal (con el eje X). Recibe como parametro un elemento deobstaculos.lista
. - ¿Dónde se utiliza?:
bird.colision()
llama abird.colisionX()
para revisar si hubo una colision.
velocidad
- ¿Qué valor tiene?:
obstaculos.velocidad
tiene como valor el numero1
- ¿Dónde se utiliza?:
obstaculos.mover()
disminuye la propiedadleft
de los obstaculos por el valor deobstaculos.velocidad
.
obstacleContainer
- ¿Qué valor tiene?:
obstaculos.obstacleContainer
tiene como valor el elemento html con clase.obstacles
- ¿Dónde se utiliza?:
obstaculos.crearObstaculos()
utilizaobstaculos.obstacleContainer
para agregar al DOM un nuevo obstaculo.
gap
- ¿Qué valor tiene?:
obstaculos.gap
tiene como valor el numero200
- ¿Dónde se utiliza?:
obstaculos.crear()
utiliza aobstaculos.gap
para calcular el espacio que debe de haber entre el obstaculo superior y el obstaculo inferior
maxHeight
- ¿Qué valor tiene?:
obstaculos.maxHeight
tiene como valor el numero320
- ¿Dónde se utiliza?: la propiedad
maxHeight
representa el valor maximo de altura que puede tener un obstaculo. El métodoobstaculos.crear()
utiliza aobstaculos.maxHeight
para determinar la altura de los obstaculos.
minHeight
- ¿Qué valor tiene?:
obstaculos.minHeight
tiene como valor el numero50
- ¿Dónde se utiliza?:la propiedad
minHeight
representa la altura minima que puede tener un obstaculo. El métodoobstaculos.crear()
utiliza aobstaculos.minHeight
para determinar la altura de los obstaculos.
width
- ¿Qué valor tiene?:
obstaculos.width
tiene como valor el numero52
- ¿Dónde se utiliza?: la propiedad
width
representa el ancho de los obstaculos. El métodoobstaculos.crear()
utiliza aobstaculos.width
para determinar el ancho de los obstaculos.
lista
- ¿Qué valor tiene?:
obstaculos.lista
tiene como valor inicial un array vacio - ¿Dónde se utiliza?:
obstaculos.lista
representa una lista de los obstaculos que se muestran en el DOM. El métodoobstaculos.crear()
agrega los obstaculos que se van creando dentro del arrayobstaculos.lista
crear()
- ¿Qué hace?:
obstaculos.crear()
crea un par de obstaculos (obstaculo superior y obstaculo inferior) y los agrega aobstaculos.lista
. - ¿Dónde se utiliza?:
juego.iniciar()
llama aobstaculos.crear()
dibujar()
- ¿Qué hace?:
obstaculos.dibujar()
dibuja a los obstaculos dentro deobstaculos.lista
- ¿Dónde se utiliza?:
juego.loop()
llama aobstaculos.dibujar()
para dibujar a los obstaculos en el DOM
mover()
- ¿Qué hace?:
obstaculos.mover
itera sobre el arrayobstaculos.list
y le substrae el valor deobstaculos.velocidad
a la propiedadleft
de cada elemento del array. - ¿Dónde se utiliza?:
juego.loop()
llama aobstaculos.mover()
eliminar()
- ¿Qué hace?:
obstaculos.eliminar()
recibe un objeto con un par de obstaculos como argumento (basicamente un elemento del arrayobstaculos.lista
). Si la propiedadleft
del par de obstaculos mas el valor deobstaculos.width
es menor a cero, entonces se quita del DOM el par de obstaculos y se quita deobstaculos.lista
el objeto con el par de obstaculos. La lógica de esto es que si la propiedadleft
del par de obstaculos mas el valor deobstaculos.width
es menor a cero, entonces el par de obstaculos no es visible en el DOM, por lo tanto se tiene que eliminar. - ¿Dónde se utiliza?:
obstaculos.mover()
llama aobstaculos.eliminar()
de tal forma que cada que se mueva un obstaculo, se verifica si se tiene que eliminar del DOM.