Animando el canvas

Animando el canvas.

En la primer parte, vimos como dibujar en nuestro lienzo. Eso está bien, pero un juego se trata de interactuar con los objetos, no solo de dibujarlos. Por tanto, necesitamos por comenzar a darle movimiento a nuestro rectángulo.
Primero, declararemos dos nuevas variables: x” y “y. Al comienzo, tras declarar las variables canvas y ctx, agregaremos la siguiente línea:
var x=50,y=50;
Y modificaremos nuestra función “paint” para que limpie la pantalla antes de volver a dibujar en ella, dibuje el rectángulo en las coordenadas mencionadas, y de paso lo haremos un poco más pequeño:
function paint(ctx){
 ctx.clearRect(0,0,canvas.width,canvas.height);
 ctx.fillStyle='#0f0';
 ctx.fillRect(x,y,10,10);
}
Ahora, nuestra función “init” llama solo una vez a la función “paint”, por lo que todo es pintado solo una vez. Para que en verdad se trate de una animación, tenemos que hacer que se llame a la función una y otra vez cada determinado tiempo. Para esto, llamaremos a una función“run()”, sustituyendo donde se llamaba a “paint(ctx)” en la función “init”:
run();
Y crearemos la función “run” de esta forma:
function run(){
 setTimeout(run,50);
 x+=10;
 paint(ctx);
}
En la primer línea, llamaremos a un temporizador, el cual volverá a llamar a “run” en 50 milisegundos. Esto creará un ciclo, ya que cada vez que se llame a la función “run”, esta volverá a llamarse a si misma cada 50 milisegundos (Esto significa que dibujaremos a 20 cuadros por segundo).
Posteriormente en la segunda línea, se aumenta la coordenada en “x” por diez pixeles, y finalmente llama a la función “paint(ctx)”. Guardemos y abramos de nuevo nuestra página “index.html”. Si lo hicimos bien, ¡Veremos a nuestro pequeño rectángulo correr por el lienzo! Allá va... Allá va... Y se fue...
Sí, se fue, y no volverá... Si queremos verlo de nuevo, habrá que actualizar la página, y volverá a hacer lo mismo. Pero si queremos mantener a nuestro rectángulo dentro, podemos condicionarlo a que regrese a la pantalla si sale de esta, agregando las siguientes dos líneas después de “x+=10;”:
if(x>canvas.width)
 x=0;
 Así le indicamos que si su posición es mayor a la del ancho de lienzo, regrese a la posición 0. Si actualizamos la página ahora, veremos que nuestro rectángulo sale por una esquina, y vuelve a aparecer una y otra vez por la opuesta.
Código Final:
Su explorador no soporta Canvas.
window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var x=50,y=50;
function init(){
 canvas=document.getElementById('canvas');
 canvas.style.background='#000';
 ctx=canvas.getContext('2d');
 run();
}
function run(){
 setTimeout(run,50);
 x+=10;
 if(x>canvas.width)
  x=0;
 paint(ctx);
}
function paint(ctx){
 ctx.clearRect(0,0,canvas.width,canvas.height);
 ctx.fillStyle='#0f0';
 ctx.fillRect(x,y,10,10);
}