En el apartado anterior hemos visto cómo pintar gráficos en un lienzo de <canvas>. Veamos ahora cómo realizar una pequeña animación y cómo interactuar con los elementos del lienzo mediante el teclado.
1. Animaciones en Canvas
Para crear animaciones o videojuegos en Canvas seguiremos los siguientes pasos:
- Pintamos un gráfico en Canvas.
- Borramos el Canvas pasados unos milisegundos.
- Volvemos a pintar un gráfico con un ligero cambio.
- Borramos el Canvas pasados unos milisegundos.
- Seguimos el mismo proceso de los pasos anteriores.
Esta técnica es como crear dibujos animados utilizando una hoja que hay que borrar cada fotograma. Este borrado se realiza tan rápido que el ojo humano humano no lo detecta y lo que se aprecia es una animación. Este es el principio que se suele aplicar en los videojuegos en dos dimensiones.
Veamos un ejemplo:
default
Ver juego de la serpiente completo en CodePen
Ejercicios propuestos
Actividad 8.1
Partiendo de la animación vista en clase realiza las siguientes modificaciones:
- Implementa el movimiento del player por el lienzo en función de las teclas presionadas (KEY_LEFT=37, KEY_UP=38, KEY_RIGHT=39, KEY_DOWN=40;).
- Implementa la funcionalidad “pausar el juego”.