Mover mientras se presiona tecla.

Aprendimos a cambiar la dirección de un objeto dependiendo de la última tecla presionada. ¿Pero cómo se haría si deseamos mover el objeto solo cuando una tecla está siendo presionada? Es, después de todo, el comportamiento más común en la mayoría de los juegos.

Para aprender a hacer esto, ocuparemos el código que utilizamos en la Parte 3. Usando el teclado y lo modificaremos como se indica a continuación:

Primero, crearemos una variable de tipo arreglo, donde guardaremos todas las teclas que están siendo presionadas:

    var pressing=[];

Ahora, modificaremos el EventListener al final, guardando en nuestro arreglo, en la posición equivalente a la tecla presionada, el valor booleano true, indicando así que esta tecla está siendo presionada.

    document.addEventListener('keydown',function(evt){
        lastPress=evt.keyCode;
        pressing[evt.keyCode]=true;
    },false);

De igual forma, agregaremos un EventListener para cuando la tecla es liberada, cambiando entonces su valor a falso.

    document.addEventListener('keyup',function(evt){
        pressing[evt.keyCode]=false;
    },false);

Así podremos saber cuando una tecla está siendo presionada. Ahora modificaremos de la función "act" la sección donde cambiamos la dirección y movemos el rectángulo por este código:

            // Move Rect
            if(pressing[KEY_UP])
                y-=10;
            if(pressing[KEY_RIGHT])
                x+=10;
            if(pressing[KEY_DOWN])
                y+=10;
            if(pressing[KEY_LEFT])
                x-=10;

Noten que ya no debemos cambiar primero la dirección y luego mover el objeto, ya que el movimiento está dictado de forma directa por la tecla presionada. Así, podremos interactuar en tiempo real con los objetos en pantalla dependiendo la tecla presionada.

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var KEY_ENTER=13;
    var KEY_LEFT=37;
    var KEY_UP=38;
    var KEY_RIGHT=39;
    var KEY_DOWN=40;

    var canvas=null,ctx=null;
    var x=50,y=50;
    var lastPress=null;
    var pressing=[];
    var pause=true;

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

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

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

    function act(){
        if(!pause){
            // Move Rect
            if(pressing[KEY_UP])
                y-=10;
            if(pressing[KEY_RIGHT])
                x+=10;
            if(pressing[KEY_DOWN])
                y+=10;
            if(pressing[KEY_LEFT])
                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 paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.fillStyle='#0f0';
        ctx.fillRect(x,y,10,10);
        ctx.fillStyle='#fff';
        //ctx.fillText('Last Press: '+lastPress,0,20);
        if(pause){
            ctx.textAlign='center';
            ctx.fillText('PAUSE',150,75);
            ctx.textAlign='left';
        }
    }

    document.addEventListener('keydown',function(evt){
        lastPress=evt.keyCode;
        pressing[evt.keyCode]=true;
    },false);

    document.addEventListener('keyup',function(evt){
        pressing[evt.keyCode]=false;
    },false);

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