¡Huye!

En la anterior entrega vimos como mover los objetos en un desplazamiento angular, y creamos un objeto que sigue a nuestro jugador para todos lados. Con este conocimiento, crearemos un nuevo juego en esta entrega.

¿Un nuevo juego tan pronto? Así es. Con los conocimientos que ya tenemos de juegos previos, y lo recientemente aprendido, podemos crear un nuevo minijuego. Comencemos declarando las variables que necesitaremos, tú ya sabes la función de cada una:

    var pause=true;
    var gameover=true;
    var score=0;
    var eTimer=0;
    var bombs=[];

Agreguemos también a nuestra función init, un escucha del ratón el cual, al presionar sobre nuestro canvas, activará o desactivará la pausa respectivamente:

        canvas.addEventListener('mousedown',function(evt){
            pause=!pause;
        },false);

Tu ya sabes crear el flujo del juego, así que me enfocaré tan solo en los nuevos elementos. Como habrás notado, tenemos un arreglo de bombas, que almacenarán nuestra lista de explosivos. Estos seguirán a nuestro jugador por toda la pantalla, y tras un rato, explotarán. Para calcular el tiempo de explosión, necesitaremos una nueva variable en nuestro círculo:

        this.timer=0;

Agregamos ahora el temporizador. Cada 0.5 a 3 segundos, se agregará una nueva bomba:

            // Generate new bomb
            eTimer-=deltaTime;
            if(eTimer<0){
                var bomb=new Circle(0,0,10);
                bomb.timer=2;
                bombs.push(bomb);
                eTimer=0.5+random(2.5);
            }

Como a nuestra bomba queremos agregarle una variable que no puede ser accedida desde nuestro constructor, primero creamos una nueva variable bomb. A esta posteriormente, le agregamos el temporizador de 2 segundos y finalmente empujamos la nueva bomba al arreglo de bombas. Por último, se asigna el temporizador para la siguiente bomba.

Continuemos programando el comportamiento de las bombas. Primero, nos encargaremos de que cada bomba siga al jugador, y restamos su temporizador en uno:

            // Bombs
            for(var i=0,l=bombs.length;i<l;i++){
                bombs[i].timer-=deltaTime;
                var angle=bombs[i].getAngle(player);
                bombs[i].move(angle,speed*deltaTime);

Si el temporizador es menor a cero, será el momento de la explosión de la bomba. Su radio se duplicará (Para efecto de la explosión), y si la bomba está colisionando con el jugador, el juego terminará:

                if(bombs[i].timer<0){
                    bombs[i].radius*=2;
                    if(bombs[i].distance(player)<0){
                        gameover=true;
                        pause=true;
                    }
                }
            }

Posteriormente eliminamos la bomba y aumentamos el puntuaje en uno. Para que la explosión sea dibujada antes de eliminarle, haremos esto al siguiente turno, poniendo estas instrucciones al comienzo del ciclo for, antes de restar su temporizador. Esto creará el efecto deseado:

                if(bombs[i].timer<0){
                    score++;
                    bombs.splice(i--,1);
                    l--;
                    continue;
                }

Por último, dibujemos la bomba. Si esta está explotando, la rellenaremos de color blanco. Caso contrario, solo dibujaremos su circunferencia; rojo en estado normal, e intercalará entre rojo y blanco cuando esté por explotar (Cuando el temporizador sea menor a 1 segundo):

        for(var i=0,l=bombs.length;i<l;i++){
            if(bombs[i].timer<0){
                ctx.fillStyle='#fff';
                bombs[i].fill(ctx);
            }
            else{
                if(bombs[i].timer<1&&~~(bombs[i].timer*10)%2==0)
                    ctx.strokeStyle='#fff';
                else
                    ctx.strokeStyle='#f00';
                bombs[i].stroke(ctx);
            }
        }

Para hacer el efecto de que titile en esta ocasión, multiplicaremos el temporizador por 10 y lo convertimos a enteros para obtener las décimas de segundo. Ya de este valor, obtenemos su residuo entre dos, y si este es 0, se pintará su contorno de color blanco. El cálculo permite que titile 5 veces antes de explotar.

Probamos ahora el juego. Veremos ahora que bombas son continuamente generadas de la esquina superior derecha, y explotan tras un momento. Sin embargo, este juego no representa un verdadero reto. Agreguemos algunas mejoras a la generación de bombas:

                var bomb=new Circle(random(2)*canvas.width,random(2)*canvas.height,10);
                bomb.timer=1.5+random(2.5);
                bombs.push(bomb);

La primer línea puede ser un poco confusa, pero en realidad es bastante sencillo. Primero obtenemos un valor al azar de 0 o 1, y lo multiplicamos por el ancho de la pantalla, lo que nos dará un 0 o el valor del ancho mismo. Posteriormente hacemos lo mismo con la altura. Esto nos permitirá que las bombas sean generadas en cualquiera de las cuatro esquinas de nuestro juego.

En la segunda línea, agregamos un factor al azar para las explosiones. Esto permite que el tiempo de explosión no dure siempre lo mismo, y de esta forma, las primeras bombas en aparecer no sean obligatoriamente las primeras en explotar.

Aun con estos cambios el juego no es lo suficiente complejo para hacer perder al jugador. ¿Saben que agregaría realmente un reto a este juego? Si las bombas se movieran más rápido conforme pasa el tiempo de juego...

Agreguemos una segunda variable nueva a los círculos:

        this.speed=0;

Ahora, agreguemos velocidad a la bomba al ser creada:

                bomb.speed=100+(random(score))*10;

A la velocidad base, le estoy sumando un valor al azar con la quinta fracción del máximo valor del puntuaje actual. Esto permitirá no solo bombas veloces en niveles más altos, si no además, bombas con diferentes velocidades, lo que hará que evadirlas sea más difícil.

Por último, no olvides mover las bombas de acuerdo a su velocidad:

                bombs[i].move(angle,bombs[i].speed*deltaTime);

¡Ahora sí! Disfrutemos de nuestro nuevo juego. Con tan solo conocer las bases de un nuevo tipo de movimiento, y todo lo aprendido, pudimos crear un juego totalmente nuevo para nuestra colección, prueba del aprendizaje que has adquirido durante este curso. Y con esto también, concluimos el curso básico de uso del ratón en juegos. Como siempre, las dudas que tengas, puedes dejarlas en los comentarios. ¡Felices códigos!

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var canvas=null,ctx=null;
    var mousex=0,mousey=0;
    var lastUpdate=0;
    var pause=true;
    var gameover=true;
    var score=0;
    var eTimer=0;
    var player=new Circle(0,0,5);
    var bombs=[];

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

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

    function run(){
        requestAnimationFrame(run);
            
        var now=Date.now();
        var deltaTime=(now-lastUpdate)/1000;
        if(deltaTime>1)deltaTime=0;
        lastUpdate=now;
        
        act(deltaTime);
        paint(ctx);
    }

    function reset(){
        score=0;
        eTimer=0;
        bombs.length=0;
        gameover=false;
    }

    function act(deltaTime){
        if(!pause){
            // GameOver Reset
            if(gameover)
                reset();
            
            // Move player
            player.x=mousex;
            player.y=mousey;
            
            // Keep player in canvas
            if(player.x<0)
                player.x=0;
            if(player.x>canvas.width)
                player.x=canvas.width;
            if(player.y<0)
                player.y=0;
            if(player.y>canvas.height)
                player.y=canvas.height;
            
            // Generate new bomb
            eTimer-=deltaTime;
            if(eTimer<0){
                var bomb=new Circle(random(2)*canvas.width,random(2)*canvas.height,10);
                bomb.timer=1.5+random(2.5);
                bomb.speed=100+(random(score))*10;
                bombs.push(bomb);
                eTimer=0.5+random(2.5);
            }
            
            // Bombs
            for(var i=0,l=bombs.length;i<l;i++){
                if(bombs[i].timer<0){
                    score++;
                    bombs.splice(i--,1);
                    l--;
                    continue;
                }
                
                bombs[i].timer-=deltaTime;
                var angle=bombs[i].getAngle(player);
                bombs[i].move(angle,bombs[i].speed*deltaTime);
                
                if(bombs[i].timer<0){
                    bombs[i].radius*=2;
                    if(bombs[i].distance(player)<0){
                        gameover=true;
                        pause=true;
                    }
                }
            }
        }
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        for(var i=0,l=bombs.length;i<l;i++){
            if(bombs[i].timer<0){
                ctx.fillStyle='#fff';
                bombs[i].fill(ctx);
            }
            else{
                if(bombs[i].timer<1&&~~(bombs[i].timer*10)%2==0)
                    ctx.strokeStyle='#fff';
                else
                    ctx.strokeStyle='#f00';
                bombs[i].stroke(ctx);
            }
        }
        ctx.strokeStyle='#0f0';
        player.stroke(ctx);
        
        ctx.fillStyle='#fff';
        //ctx.fillText('Distance: '+player.distance(bombs[0]).toFixed(1),10,10);
        //ctx.fillText('Angle: '+(player.getAngle(bombs[0])*(180/Math.PI)).toFixed(1),10,20);
        ctx.fillText('Score: '+score,10,10);
        if(pause){
            ctx.textAlign='center';
            if(gameover)
                ctx.fillText('GAME OVER',150,100);
            else
                ctx.fillText('PAUSE',150,100);
            ctx.textAlign='left';
        }
    }

    function enableInputs(){
        document.addEventListener('mousemove',function(evt){
            mousex=evt.pageX-canvas.offsetLeft;
            mousey=evt.pageY-canvas.offsetTop;
        },false);
        canvas.addEventListener('mousedown',function(evt){
            pause=!pause;
        },false);
    }

    function Circle(x,y,radius){
        this.x=(x==null)?0:x;
        this.y=(y==null)?0:y;
        this.radius=(radius==null)?0:radius;
        this.timer=0;
        this.speed=0;
    }

    Circle.prototype.distance=function(circle){
        if(circle!=null){
            var dx=this.x-circle.x;
            var dy=this.y-circle.y;
            return (Math.sqrt(dx*dx+dy*dy)-(this.radius+circle.radius));
        }
    }

    Circle.prototype.getAngle=function(circle){
        if(circle!=null)
            return (Math.atan2(circle.y-this.y,circle.x-this.x));
    }

    Circle.prototype.move=function(angle,speed){
        if(speed!=null){
            this.x+=Math.cos(angle)*speed;
            this.y+=Math.sin(angle)*speed;
        }
    }

    Circle.prototype.stroke=function(ctx){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        ctx.stroke();
    }

    Circle.prototype.fill=function(ctx){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        ctx.fill();
    }

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