- Crear funciones
- Seleccionar elementos utilizando
.querySelector()
- Cambiar el estilo de un elemento utilizando
.style
Hemos aprendido que en la programación muchas veces necesitamos que nuestro código realice una tarea especifica varias veces. Por ejemplo, para crear un efecto de "graveded" podemos mover un elemento 2 pixeles hacia abajo cada 2 segundos de tal forma que parezca que el elemento se esta cayendo. En lugar de reescribir el mismo código varias veces, podemos crear una función y llamarla cada determinado tiempo.
Es hora de poner en práctica nuestros aprendizajes.
En éste lab crearás un efecto de gravedad sobre bird
, de tal manera que se mueva 2 pixeles hacia abajo cada 2 segundos y parezca que bird
esta cayendo al suelo.
Bifurca (fork) y clona (clone) este lab en tu entorno local. Navega a su directorio en la terminal, luego ejecuta el comando code .
para abrir sus archivos en Visual Studio Code.
-
Creaa una variable
bird
con el valor del elemento con clase.bird
-
Creaa una variable
gravedad
con el valor del numero2
-
Creaa una variable
birdBottom
con el valor del numero100
-
Crea la función
efectoGravedad()
. Cuando se llame a la funciónefectoGravedad()
:
- El valor de la variable
birdBottom
debe disminuir por el valor de la variablegravedad
- El valor de la propiedad
bottom
debird
debe ser el nuevo valor debirdBottom + "px"
- Crea la función
loop()
. Cuando se llame a la funciónloop()
:
- Se debe de llamar a la función
efectoGravedad()
- Crea una variable
timerId
con valor de:setInterval(loop, 20)