Enemigos comunes: El disparador.

Uno de los seguidores del blog ha preguntado como crear un enemigo que dispare. Aprovechando esta duda, he decidido abrir esta nueva sección que cubra algunos de los enemigos más populares en los juegos de naves. Para mantenerlo simple, no los agregaré directo sobre el código anterior, si no que los pondré en un código individual, y tendrás tú que encargarte de integrarle con el resto de tu juego si deseas usar alguno de estos.

Hasta el momento hemos trabajado con el tipo de enemigo más básico, el kamikaze, cuya única función es estrellarse contra el jugador. Ahora, para empezar esta serie de enemigos populares, hablaremos del segundo tipo de enemigo popular: El disparador. Esa molesta nave que no es solo peligrosa por su presencia, si no que además lanza disparos en contra de nuestro personaje.

En realidad, veremos aquí no solo un tipo de enemigo, si no dos. ¿Por qué dos? Si lo analizas un momento, comprenderás que los disparos enemigos, son en realidad, un tercer tipo de enemigo. Comencemos agregando estos dibujos a nuestra hoja de sprites:

Si sigues usando la hoja de estilos de la lección pasada, los disparos enemigos han de comenzar en el pixel 75, y la nueva nave en el pixel 80.

Comencemos por decidir la forma en que actuará nuestro enemigo. Para hacerlo distinto a nuestro kamikaze, haremos que este aparezca únicamente en la parte superior de nuestra pantalla en intervalos al azar, se mueva de forma horizontal, y lance algunos disparos antes de desaparecer por el otro lado de la pantalla.

Para empezar, declararemos un nuevo contador, que nos indicará el tiempo antes de crear un nuevo enemigo:

    var eTimer=0;

Disminuiremos el contador en uno en el ciclo de tiempo, y cuando llegue a cero, crearemos una nueva disparadora en la parte superior izquierda, y pondremos un nuevo valor al azar a nuestro contador:

            // Generate Enemy
            eTimer--;
            if(eTimer<0){
                enemies.push(new Rectangle(0,40,10,10,1));
                eTimer=20+random(40);
            }

El nuevo valor indica que se generará una nueva nave dentro de 20 a 60 ciclos después, esto equivale de 1 a 3 segundos. En este momento, para muestra, está bien que se generen las naves en tan corto lapso de tiempo, pero cuando las incluyas en tu juego, es posible que quieras que esto ocurra en un lapso de tiempo más disperso.

Pasemos a programar la disparadora (enemigo al que asignamos el tipo 1). Tu ya sabes como hacer que se mueva, solo asigna esta vez los valores para que se desplace hacia la derecha:

            if(enemies[i].type==1){
                enemies[i].x+=5;
                // Shooter Outside Screen
                if(enemies[i].x>canvas.width){
                    enemies.splice(i--,1);
                    l--;
                    continue;
                }

Como la disparadora se encuentra en la parte superior siempre, y el jugador en la parte inferior, no tiene caso que comparemos si ambas naves entran en colisión. Pasemos a crear los disparos de la nave, el concepto es el mismo que la creación de la disparadora, y el intervalo de tiempo ha sido pensado para que dispare de 2 a 4 veces más o menos por aparición, sin que haga dos disparos muy juntos:

                    // Shooter Shots
                    enemies[i].timer--;
                    if(enemies[i].timer<0){
                        enemies.push(new Rectangle(enemies[i].x+3,enemies[i].y+5,5,5,2));
                        enemies[i].timer=10+random(30);
                    }

Por último, agrega la intersección entre las disparadoras y nuestros disparos. Querremos eliminar a la nave enemiga si da la casualidad que uno de nuestros disparos logra pegar en contra de esta:

                    // Shot Intersects Shooter
                    for(var j=0,ll=shots.length;j<ll;j++){
                        if(shots[j].intersects(enemies[i])){
                            score++;
                            shots.splice(j--,1);
                            ll--;
                            enemies.splice(i--,1);
                            l--;
                        }
                    }

Continuemos por programar los disparos enemigos (enemigo al que asignamos el tipo 2). Su función es bastante simple: se mueve hacia abajo, y si pega con el jugador, lo daña; nada más que eso. Es lógico que los disparos enemigos se mueva más rápido que las naves enemigas:

                // EnemyShot
                else if(enemies[i].type==2){
                    enemies[i].y+=10;
                    // EnemyShot Outside Screen
                    if(enemies[i].y>canvas.height){
                        enemies.splice(i--,1);
                        l--;
                        continue;
                    }
                    
                    // Player Intersects EnemyShot
                    if(player.intersects(enemies[i])&&player.timer<1){
                        player.health--;
                        player.timer=20;
                    }
                }

Por último, vamos a dibujarle. Incluyo el dibujado de la nave kamikaze para dejar claro como se dibujarían todos los elementos juntos:

        for(var i=0,l=enemies.length;i<l;i++){
            ctx.strokeStyle='#00f';
            if(enemies[i].type==0){
                if(enemies[i].timer%2==0)
                    enemies[i].drawImageArea(ctx,spritesheet,30,0,10,10);
                else{
                    ctx.strokeStyle='#fff';
                    enemies[i].drawImageArea(ctx,spritesheet,40,0,10,10);
                }
            }
            else if(enemies[i].type==1)
                enemies[i].drawImageArea(ctx,spritesheet,80+(aTimer%2)*10,0,10,10);
            else if(enemies[i].type==2)
                enemies[i].drawImageArea(ctx,spritesheet,75,(aTimer%2)*5,5,5);
        }

Probamos el código, y veremos la nave disparadora apareciendo continuamente y lanzando sus disparos en contra nuestra. Si lo has agregado directo en tu juego, podrás sentir la interacción de todos sus elementos. Con esto, tenemos ya nuestra enemiga nave disparadora.

¿Qué otros enemigos comunes les gustaría conocer en esta sección? Espero sus comentarios.

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var canvas=null,ctx=null;
    var pause;
    var aTimer=0;
    var eTimer=0;
    var player=new Rectangle(90,280,10,10,0,3);
    var shots=[];
    var enemies=[];
    var spritesheet=new Image();
    spritesheet.src='assets/spritesheet.png';

    function random(max){
        return ~~(Math.random()*max);
    }

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

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

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

    function act(deltaTime){
        if(!pause){
            // Generate Enemy
            eTimer--;
            if(eTimer<0){
                enemies.push(new Rectangle(0,40,10,10,1));
                eTimer=20+random(40);
            }
            
            // Move Enemies
            for(var i=0,l=enemies.length;i<l;i++){
                if(enemies[i].timer>0)
                    enemies[i].timer--;
                
                // Shooter
                if(enemies[i].type==1){
                    enemies[i].x+=5;
                    // Shooter Outside Screen
                    if(enemies[i].x>canvas.width){
                        enemies.splice(i--,1);
                        l--;
                        continue;
                    }
                    
                    // Shooter Shots
                    enemies[i].timer--;
                    if(enemies[i].timer<0){
                        enemies.push(new Rectangle(enemies[i].x+3,enemies[i].y+5,5,5,2));
                        enemies[i].timer=10+random(30);
                    }
                    
                    // Player Intersects Shooter
                    /*if(player.intersects(enemies[i])&&player.timer<1){
                        player.health--;
                        player.timer=20;
                    }*/
                    
                    // Shot Intersects Shooter
                    for(var j=0,ll=shots.length;j<ll;j++){
                        if(shots[j].intersects(enemies[i])){
                            score++;
                            shots.splice(j--,1);
                            ll--;
                            enemies.splice(i--,1);
                            l--;
                        }
                    }
                }
                // EnemyShot
                else if(enemies[i].type==2){
                    enemies[i].y+=10;
                    // EnemyShot Outside Screen
                    if(enemies[i].y>canvas.height){
                        enemies.splice(i--,1);
                        l--;
                        continue;
                    }
                    
                    // Player Intersects EnemyShot
                    if(player.intersects(enemies[i])&&player.timer<1){
                        player.health--;
                        player.timer=20;
                    }
                }
            }
            
            // Timer
            aTimer+=deltaTime;
            if(aTimer>3600)
                aTimer-=3600;
        }
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        for(var i=0,l=enemies.length;i<l;i++){
            ctx.strokeStyle='#00f';
            if(enemies[i].type==0){
                if(enemies[i].timer%2==0)
                    enemies[i].drawImageArea(ctx,spritesheet,30,0,10,10);
                else{
                    ctx.strokeStyle='#fff';
                    enemies[i].drawImageArea(ctx,spritesheet,40,0,10,10);
                }
            }
            else if(enemies[i].type==1)
                enemies[i].drawImageArea(ctx,spritesheet,80+(~~(aTimer*10)%2)*10,0,10,10);
            else if(enemies[i].type==2)
                enemies[i].drawImageArea(ctx,spritesheet,75,(~~(aTimer*10)%2)*5,5,5);
        }
        
        ctx.fillStyle='#fff';
        ctx.fillText('Score: 0',0,20);
        ctx.fillText('Health: ?',150,20);
        if(pause){
            ctx.textAlign='center';
            ctx.fillText('PAUSE',100,150);
            ctx.textAlign='left';
        }
    }

    function Rectangle(x,y,width,height,type,health){
        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;
        this.type=(type==null)?1:type;
        this.health=(health==null)?1:health;
        this.timer=0;
    }

    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);
    }

    Rectangle.prototype.drawImageArea=function(ctx,img,sx,sy,sw,sh){
        if(img.width)
            ctx.drawImage(img,sx,sy,sw,sh,this.x,this.y,this.width,this.height);
        else
            ctx.strokeRect(this.x,this.y,this.width,this.height);
    }

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