Parte 3. Usando el teclado.

Nuestro rectángulo ya se mueve por el lienzo, pero para verdaderamente interactuar con él, necesitamos indicarle a dónde queremos que vaya. Para eso, necesitamos primero una variable dónde guardar la tecla presionada:

var lastPress = null;

Y agregar al final de nuestro código un escucha del teclado que almacene la tecla presionada:

document.addEventListener('keydown', function (evt) {
    lastPress = evt.which;
}, false);

Mediante este método, podremos tomar decisiones en el juego sabiendo la última tecla presionada. Cada tecla tiene un valor numérico, el cual tendremos que comparar para realizar la acción deseada dependiendo la tecla presionada. Una buena forma de saber cuál ha sido la última tecla presionada, sería agregando esta línea en nuestra función “paint”:

    ctx.fillText('Last Press: ' + lastPress, 0, 20);

Por ahora no debes preocuparte de eso. Usaremos las teclas izquierda, arriba, derecha y abajo, cuyos valores numéricos son 37, 38, 39 y 40 respectivamente. Para usarlas más facilmente, las guardaremos en valores constantes:

var KEY_LEFT = 37,
    KEY_UP = 38,
    KEY_RIGHT = 39,
    KEY_DOWN = 40;

A diferencia de otros lenguajes de programación, JavaScript no tiene constantes, pero las variables se encargarán del trabajo sin problema.

Vayamos ahora al movimiento del rectángulo. Primero, necesitaremos una nueva variable que almacene la dirección de nuestro rectángulo:

var dir = 0;

Esta variable “dir” tendrá un valor del 0 al 3, siendo 0 hacia arriba, y rotando en dirección de las manecillas del reloj para demás valores cada cuarto de hora.

Ahora utilizaremos un método simple para tener un tiempo consistente entre dispositivos (Puedes leer más en el Apéndice 2: Tiempo consistente entre dispositivos). La forma más fácil para hacer esto por ahora, es dividir las funciones act y paint en dos llamadas distintas, una optimizada para el re-pintar, y una regulada para las acciones:

function repaint() {
    window.requestAnimationFrame(repaint);
    paint(ctx);
}

function run() {
    setTimeout(run, 50);
    act();
}

Como puedes ver dentro de la función "run", llamamos a un temporizador "setTimeout", que llama a la función "run" de nuevo cada 50 milisegundos. Esta es una forma simple de tener el juego a 20 ciclos por segundo.

Nota que, dado que este hace el ciclo de la función "act" asíncrono de la función "repaint", no puedes confiar que lo que realices en el primero, será dibujado en el segundo; pero esto no suele ser un problema cuando el re-pintado es más rápido que el ciclo de acciones. ¡No olvides llamar a ambas funciones en la función init!

Ahora comencemos por detectar la dirección que tomará nuestro rectángulo dependiendo la última tecla presionada, dentro de la función "act":

    // Change Direction
    if (lastPress == KEY_UP) {
        dir = 0;
    }
    if (lastPress == KEY_RIGHT) {
        dir = 1;
    }
    if (lastPress == KEY_DOWN) {
        dir = 2;
    }
    if (lastPress == KEY_LEFT) {
        dir = 3;
    }

Después, moveremos nuestro rectángulo dependiendo la dirección que se haya tomado:

    // Move Rect
    if (dir == 0) {
        y -= 10;
    }
    if (dir == 1) {
        x += 10;
    }
    if (dir == 2) {
        y += 10;
    }
    if (dir == 3) {
        x -= 10;
    }

Por último, buscaremos si el rectángulo ha salido de la pantalla, y en dado caso, lo regresaremos a la misma:

    // Out Screen
    if (x > canvas.width) {
        x = 0;
    }
    if (y > canvas.height) {
        y = 0;
    }
    if (x < 0) {
        x = canvas.width;
    }
    if (y < 0) {
        y = canvas.height;
    }

Te habrás dado cuenta que antes de cada bloque de código, agregué una referencia precedida de dos diagonales (//). Esto es un comentario, y son bastante funcionales para describir qué ocurre en cada sección del código, así, si es necesario modificarlo después, podremos identificar con facilidad sus componentes.

Los comentarios también sirven para “eliminar” líneas de código, pero que podríamos querer utilizar después, por ejemplo, la que dibuja en pantalla cuál fue la última tecla presionada (No querremos que la gente que juegue nuestro juego la vea, ¿O si?).

Guarda el juego y abre “index.html”. Si todo está de forma correcta, ahora podrás controlar al pequeño rectángulo usando las flechas del teclado. ¡Felicidades!

Pausa

Podría dar por concluida la lección de hoy, pero aprovechando que estamos viendo como usar el teclado, te contaré un pequeño truco que se usa para poner “Pausa” a un juego. Comenzaremos por supuesto, creando una variable que indicará si el juego está en pausa:

var pause = true;

Ahora, encerraremos todo el contenido de nuestra función “act” en una condicional “if (!pause)”, o sea, si el juego no está en pausa. Hasta el momento hemos hecho condicionales de una sola línea, por lo que no hemos usado llaves. Pero en caso de ser utilizada más de una línea en la condicional, se deben usar llaves igual que en las funciones, tal como hacemos en el caso actual.

Al final de la condicional “if (!pause)”, agregaremos estas líneas para que al presionar “KEY_ENTER” (13), se cambie el juego entre pausado y sin pausa:

    // Pause/Unpause
    if (lastPress == KEY_ENTER) {
        pause = !pause;
        lastPress = null;
    }

Es muy importante que estas líneas no las encierres dentro del “if (!pause)”, o de lo contrario, jamás podrás quitar la pausa (Por que jamás entrarás a esa parte del código). La asignación “pause = !pause” indica que cambio su valor por el opuesto (falso si es verdadero o verdadero si es falso), y después nulificamos “lastPress”, o de lo contrario, el juego estaría poniendo y quitando pausa sin fin hasta que se presione otra tecla.

Por último, dibujaremos en nuestra función “paint” el texto “PAUSE” de forma centrada, si la pausa está activada:

    // Draw pause
    if (pause) {
        ctx.textAlign = 'center';
        ctx.fillText('PAUSE', 150, 75);
        ctx.textAlign = 'left';
    }

Actualicemos el juego. Ahora cada vez que presionemos la tecla Enter, el juego entrará o saldrá de la pausa.

Actualización: Revisen el comentario dejado por Miguel Ángel, quien da algunos tips y buenas prácticas para mejorar este código y futuros. ¡Gracias! :)

Código final:

[Canvas not supported by your browser]

var KEY_ENTER = 13,
    KEY_LEFT = 37,
    KEY_UP = 38,
    KEY_RIGHT = 39,
    KEY_DOWN = 40,
    
    canvas = null,
    ctx = null,
    lastPress = null,
    pause = true,
    x = 50,
    y = 50,
    dir = 0;

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

document.addEventListener('keydown', function (evt) {
    lastPress = evt.which;
}, false);

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

    // Debug last key pressed
    ctx.fillStyle = '#fff';
    //ctx.fillText('Last Press: ' + lastPress, 0, 20);
    
    // Draw pause
    if (pause) {
        ctx.textAlign = 'center';
        ctx.fillText('PAUSE', 150, 75);
        ctx.textAlign = 'left';
    }
}

function act() {
    if (!pause) {
        // Change Direction
        if (lastPress == KEY_UP) {
            dir = 0;
        }
        if (lastPress == KEY_RIGHT) {
            dir = 1;
        }
        if (lastPress == KEY_DOWN) {
            dir = 2;
        }
        if (lastPress == KEY_LEFT) {
            dir = 3;
        }

        // Move Rect
        if (dir == 0) {
            y -= 10;
        }
        if (dir == 1) {
            x += 10;
        }
        if (dir == 2) {
            y += 10;
        }
        if (dir == 3) {
            x -= 10;
        }

        // Out Screen
        if (x > canvas.width) {
            x = 0;
        }
        if (y > canvas.height) {
            y = 0;
        }
        if (x < 0) {
            x = canvas.width;
        }
        if (y < 0) {
            y = canvas.height;
        }
    }
    
    // Pause/Unpause
    if (lastPress == KEY_ENTER) {
        pause = !pause;
        lastPress = null;
    }
}

function repaint() {
    window.requestAnimationFrame(repaint);
    paint(ctx);
}

function run() {
    setTimeout(run, 50);
    act();
}

function init() {
    // Get canvas and context
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    
    // Start game
    run();
    repaint();
}

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

Siguiente parte: Interactuando con otros elementos.