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.
Para crear animaciones o videojuegos en Canvas seguiremos los siguientes pasos:
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:
default
Rejilla a modo de lienzo:
0
Juego de la serpiente:
0
Partiendo de la animación vista en clase realiza las siguientes modificaciones: