Animaciones en Canvas

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:

1. Pintamos un gráfico en Canvas.
2. Borramos el Canvas pasados unos milisegundos.
3. Volvemos a pintar un gráfico con un ligero cambio.
4. Borramos el Canvas pasados unos milisegundos.
5. Seguimos el mismo proceso de los pasos anteriores.

Esta técnica es como crear dibujos animados utilizando una hoja que hay que borrar en 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.

En JavaScript se utiliza el método setInterval() para ejecutar un código concreto cada cierto tiempo. Sin embargo, para modificar el Canvas en intervalos de tiempo se utiliza el método requestAnimationFrame(función).

function run(){
    //requestAnimationFrame(): informa de que queremos realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación.
    requestAnimationFrame(run); //animación optimizada
    accionesJuego();
    pintarLienzo(lienzo);
}

Veamos un ejemplo:

Ejemplos más avanzados:

Rejilla a modo de lienzo:

Juego de la serpiente:

Comprueba tu apendizaje

Ejercicio propuesto

Actividad 8

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”.