Municiones Dinámicas.

Ya hemos visto anteriormente como crear objetos de forma dinámica mediante arreglos, sin embargo, no como eliminarles de igual forma, lo cual es necesario cuando hacemos uso de municiones en nuestros juegos.

Para empezar, he cambiado el formato del canvas, para aprovecharlo de forma vertical, técnica aprovechada de forma común en juegos de naves espaciales. Esto puede hacerse modificando la etiqueta canvas como se vio al comienzo, o asignando los valores respectivos a la variable canvas en la función "init", justo después de obtener su valor inicial:

        canvas.width=200;
        canvas.height=300;

Recomiendo modificar el tamaño de un canvas lo mínimo necesario desde el código. Esto por que puede causar confusión al jugador, y por que cada vez que se cambia su tamaño, su contenido es limpiado a sus valores predeterminados, lo que puede causar efectos no deseados.

Ahora que ya tenemos listo nuestro lienzo, comencemos entonces creando un arreglo para almacenar nuestros disparos:

    var player=new Rectangle(90,280,10,10);
    var shots=[];

Notemos también que he cambiado la posición del rectángulo player, para que aparezca centrado en la parte inferior del juego. Para que su comportamiento sea el de una nave espacial en esta clase de juegos, he cambiado su movimiento para que solo pueda desplazarse de forma horizontal, comentando las líneas de movimiento vertical:

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

De igual forma, en lugar de salir por un lado de la pantalla y aparecer por el otro, queremos mantenerlo dentro de la misma. Para ello, usaremos las siguientes líneas:

            // Out Screen
            if(player.x>canvas.width-player.width)
                player.x=canvas.width-player.width;
            if(player.x<0)
                player.x=0;

Podemos ver que lograr esto es sencillo; tan solo se debe regresar al rectángulo a su máxima coordenada permitida, en caso que la exceda en cualquiera de los dos lados (Habría que agregar condicionales similares para el movimiento en Y, en caso de permitir desplazamiento vertical).

¡Ahora sí! Crearemos un nuevo disparo cada vez que presionamos la barra espaciadora:

            // New Shot
            if(lastPress==KEY_SPACE){
                shots.push(new Rectangle(player.x+3,player.y,5,5));
                lastPress=null;
            }

El comportamiento de este código ya es conocido por nosotros. Toca mover cada uno de los disparos en el arreglo, y en caso que el disparo se encuentre ya fuera de pantalla, procederemos a removerlo:

            // Move Shots
            for(var i=0,l=shots.length;i<l;i++){
                shots[i].y-=10;
                if(shots[i].y<0){
                    shots.splice(i--,1);
                    l--;
                }
            }

Para remover el objeto dentro del arreglo, llamamos a la función splice, en este caso, con dos parámetros: El primero de ellos es la posición del arreglo donde efectuaremos la operación, y el segundo indica la cantidad de objetos a eliminar. Splice puede aceptar más parámetros, que sería una lista de objetos a insertar en dicho lugar, pero en este momento, no nos interesa insertar nada aquí.

Notarán también que se la posición del arreglo "i" es continuado por un --. Esto indica que el valor en i se debe restar en 1 después de efectuar la operación, y esto lo hacemos con el fin que, dentro del for, no se vaya a saltar la lectura del siguiente valor en el ciclo una vez removido el presente (Un segundo disparo podría no efectuar la colisión correspondiente si el objecto anterior a este es removido y no se resta el valor de i en 1 tras esta acción). Para que el la longitud "l" corresponda a la verdadera, esta también es restada en uno.

Ahora que hemos comprendido como remover el disparo, procederemos a dibujarle dentro de la función paint:

        ctx.fillStyle='#f00';
        for(var i=0,l=shots.length;i<l;i++)
            shots[i].fill(ctx);
        
        ctx.fillStyle='#fff';
        ctx.fillText('Last Press: '+lastPress,0,20);
        ctx.fillText('Shots: '+shots.length,0,30);

En este caso, he agregado un nuevo texto a la pantalla, que nos mostrará la cantidad de disparos activos en el juego. Con esto podremos confirmar que nuestros disparos son removidos al llegar a la parte superior de la pantalla.

Código final:

[Canvas not supported by your browser]

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

    var canvas=null,ctx=null;
    var lastPress=null;
    var pressing=[];
    var pause;
    var player=new Rectangle(90,280,10,10);
    var shots=[];

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

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

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

    function act(){
        if(!pause){
            // Move Rect
            //if(pressing[KEY_UP])
            //    player.y-=10;
            if(pressing[KEY_RIGHT])
                player.x+=10;
            //if(pressing[KEY_DOWN])
            //    player.y+=10;
            if(pressing[KEY_LEFT])
                player.x-=10;

            // Out Screen
            if(player.x>canvas.width-player.width)
                player.x=canvas.width-player.width;
            if(player.x<0)
                player.x=0;
            
            // New Shot
            if(lastPress==KEY_SPACE){
                shots.push(new Rectangle(player.x+3,player.y,5,5));
                lastPress=null;
            }
            
            // Move Shots
            for(var i=0,l=shots.length;i<l;i++){
                shots[i].y-=10;
                if(shots[i].y<0){
                    shots.splice(i--,1);
                    l--;
                }
            }
        }
        // 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';
        player.fill(ctx);
        ctx.fillStyle='#f00';
        for(var i=0,l=shots.length;i<l;i++)
            shots[i].fill(ctx);
        
        ctx.fillStyle='#fff';
        ctx.fillText('Last Press: '+lastPress,0,20);
        ctx.fillText('Shots: '+shots.length,0,30);
        if(pause){
            ctx.textAlign='center';
            ctx.fillText('PAUSE',100,150);
            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);

    function Rectangle(x,y,width,height){
        this.x=(x==null)?0:x;
        this.y=(y==null)?0:y;
        this.width=(width==null)?0:width;
        this.height=(height==null)?this.width:height;
    }

    Rectangle.prototype.intersects=function(rect){
        if(rect!=null){
            return(this.x<rect.x+rect.width&&
                this.x+this.width>rect.x&&
                this.y<rect.y+rect.height&&
                this.y+this.height>rect.y);
        }
    }
    
    Rectangle.prototype.fill=function(ctx){
        ctx.fillRect(this.x,this.y,this.width,this.height);
    }

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