Parte 2. 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, esto se hace dibujando un rectángulo del tamaño completo del lienzo. Posteriormente dibujamos el rectángulo en las coordenadas mencionadas, el cual haremos de paso un poco más pequeño:

function paint(ctx) {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = '#0f0';
    ctx.fillRect(x, y, 10, 10);
}

En este ejemplo, estamos dibujando el rectángulo de fondo de color negro. Puedes darle cualquier valor hexadecimal desde '#000' hasta '#fff'. Experimenta con colores diferentes para que encuentres el que consideres quede mejor con tu juego.

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() {
    window.requestAnimationFrame(run);
    act();
    paint(ctx);
}

En la primer línea, llamaremos a un requestAnimationFrame. Esta función pedirá al navegador para el siguiente momento en que pueda realizar un cuadro de animación, usualmente a 60 cuadros por segundo en computadoras de buen rendimiento, aunque puede variar en computadoras de rendimiento menor. Para saber más al respecto, ve al Apendice 1: RequestAnimationFrame.

Posteriormente, llamamos a las funciones "act()" y "paint(ctx)". Hemos visto antes que "paint" dibuja todo en nuestro lienzo. La función "act" es usada para llamar a todas las acciones en nuestro juego; en este caso, moveremos nuestro rectángulo sumándole 2 pixeles por cuadro a nuestra variable "x":

function act(){
    x += 2;
}

Aun cuando las acciones pudieran ser puestas en la función "paint", es recomendado hacerlo por aparte, para prevenir errores, como en el que lo que se muestra en pantalla no es lo mismo que ocurre realmente (Si mezclas ambos al mismo tiempo esto puede ocurrir, por eso es mejor mover primero y al final dibujarlo). Además, hacerlo de forma separada facilita saber dónde ocurren los eventos para modificarlos posteriormente.

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 += 2;”:

    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.

Problema de compatibilidad:

Debido a que algunas versiones antiguas de navegadores no soportan requestAnimationFrame como tal, deberías agregar esta función al final de tu código (más información en el Apéndice 1: RequestAnimationFrame):

window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 17);
        };
}());

Código final:

[Canvas not supported by your browser]

var canvas = null,
    ctx = null,
    x = 50,
    y = 50;

window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 17);
        };
}());

function paint(ctx) {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = '#0f0';
    ctx.fillRect(x, y, 10, 10);
}

function act() {
    x += 2;
    if (x > canvas.width) {
        x = 0;
    }
}

function run() {
    window.requestAnimationFrame(run);
    act();
    paint(ctx);
}

function init() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    
    run();
}

window.addEventListener('load', init, false);

Siguiente parte: Usando el teclado.