En el lab anterior lograste crear y dibujar un obstaculo. En este lab vamos a agregar más código JavaScript para mover los obstaculos.
Agrega los siguientes métodos dentro de script.js
. Las descripciones para los métodos y propiedades de los objetos juego
, bird
, y obstaculos
se encuentran más abajo en este README.
- Agrega la propiedad
obstaculos.velocidad
- Dentro de
obstaculos.crear()
, modifica el valor de la propiedadleft
del objectoparObstaculos
. El nuevo valor debe serwindow.innerWidth
- Agrega el método
obstaculos.mover()
- Agrega la propiedad
juego.timerObstaculos
- Llama a
obstaculos.mover()
dentro dejuego.loop()
- Dentro de
juego.iniciar()
, asigna ajuego.timerObstaculos
unsetInterval()
que llame aobstaculos.crear
cada3000
milisegundos. - Dentro de
juego.terminar()
, limpia el timerjuego.timerObstaculos
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
- ¿Dónde se utiliza?:
juego.verificaColision()
llama abird.colision()
para verificar 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()