Flappy Bird Parte 4
Introducción
En el lab anterior lograste que bird
se mueva al presionar una tecla. En este lab vamos a agregar más código JavaScript para que cuando bird
tenga una colisión con el suelo, el juego se termine y los efectos del juego paren.
Instrucciones
Agrega los siguientes métodos dentro de script.js
. Las descripciones para los métodos y propiedades del objeto bird y juego se encuentran más abajo en este README.
- Agrega el método
bird.colision
- Agrega el método
juego.verificaColision
- Llama al método
juego.verificaColision()
dentro del método juego.loop - Agrega el método
juego.mostrarGameover
- Agrega el método
juego.pararEfectos
- Agrega el método
juego.terminar
El objeto juego
Propiedades:
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()
Métodos:
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
El objeto bird:
Propiedades
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
Métodos:
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.