Presionando el boton del raton

Anteriormente vimos como calcular la distancia entre dos objetos, y de esta forma, como poder interactuar con ellos. Ahora demos algo de funcionalidad a esto, creando un pequeño "Dispara al objetivo".

Si tomaste el curso original donde aprendimos a hacer el juego de la serpiente, notarás que mucho de esto es reciclado de la parte 4 "Interactuando otros elementos". Comencemos rescatando algunas de las variables usadas en esta sección, sus funciones ya las has de conocer:

    var lastPress=null;
    var score=0;

Como ya habrás supuesto, usaremos score para almacenar el puntuaje acumulado en el juego, y lastPress para almacenar, no esta vez la última tecla presionada en el teclado, si no el último botón presionado del ratón.

Nota: lastPress puede almacenar al mismo tiempo, tanto el último botón presionado del ratón, como la última tecla presionada por el teclado. Solo errará en almacenar ambas acciones, si son presionados al mismo tiempo con diferencia menor a media décima de segundo. Que esto suceda, es muy poco probable, sin embargo, si desarrollas un videojuego donde esperas que algo así pueda ocurrir, y ambas acciones son imprescendibles de ser leídas en el código al mismo tiempo, debes tomarlo en cuenta para evitar problemas, y en dado caso, almacenar ambas acciones en variables diferentes.

Pasemos a ver como almacenar en lastPress cuando el botón del ratón es presionado:

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

Con este escucha, cada vez que el ratón sea presionado, asignaremos a lastPress el valor de evt.which, el cual nos indica el último botón del ratón presionado, siendo 1 para clic izquierdo, 2 para clic central, y 3 para clic derecho.

Ahora, modificaremos la parte en donde se medía la distancia entre player y target, para que al ser lastPress uno (clic izquierdo presionado), se ponga el fondo claro (efecto de disparo), y si la distancia entre player y target es menor de cero (colisionan), el score se aumente en uno, y el objetivo cambie de posición a otro lugar al azar en la pantalla, justo como la manzana del juego de la serpiente:

        if(lastPress==1){
            bgColor='#333';
            if(player.distance(target)<0){
                score++;
                target.x=random(canvas.width/10-1)*10+target.radius;
                target.y=random(canvas.height/10-1)*10+target.radius;
            }
        }
        else
            bgColor='#000';

Nota que a la nueva posición, le sumamos el radio de target, esto dado que se dibuja desde el centro y no desde la esquina superior derecha, como el rectángulo.

No olvides la función random que hemos usado en juegos anteriores:

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

Y dibujar el score al final de la función paint, así como regresar lastPress a su valor nulo:

        ctx.fillStyle='#fff';
        ctx.fillText('Distance: '+player.distance(target).toFixed(1),0,10);
        ctx.fillText('Score: '+score,0,20);
        lastPress=null;

Al probar el juego, veremos nuestro resultado. Cada que disparemos a uno de los objetivos, nuestro score se sumará en uno, y el objetivo cambiará de posición en la pantalla.

Ahora, es posible que notes, que al hacer clic en cualquier lugar de tu página, el fondo se hará más claro, lo que significa el registro de un disparo. Lo mas lógico es que deseemos registrar solo cuando se presiona el ratón dentro de nuestro canvas, y no en cualquier lugar de nuestra página.

Para esto, debemos asignar el escucha del ratón precisamente al canvas, y no al documento. Pero si intentamos asignar este escucha antes de dar el valor inicial a nuestro canvas, esto producirá un error, ya que el valor predefinido de la variable canvas es nulo. Por eso, debemos asignar este escucha dentro del init.

Para poder manejar de forma más sencilla los escuchas, los juntaremos todos dentro de una función enableInputs. Modifica el init a forma que quede de la siguiente forma:

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

        enableInputs();
        run();
    }

Posteriormente, agrega este código en lugar de los actuales escuchas del ratón.

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

Como veremos, ahora agregamos el escucha del mousedown a nuestro canvas justo después de darle su valor inicial, dentro de la función init.

Al final, el código se verá como mostraremos más adelante, pero antes, les dejaré una tarea a través de nuestra nueva dinámica...

El reto de la semana.

Ya tenemos las bases para un juego nuevo en este momento, pero le hacen falta gráficos y sonidos. Tú ya aprendiste a hacer esto cuando hicimos juntos el curso del juego de la serpiente, por lo que tienes todas las habilidades necesarias para lograrlo. ¡Adelante!

Solo te daré un consejo, para prevenir un posible error. Recuerda que los círculos se dibujan desde el centro y no desde el punto superior izquierdo, como los rectángulos o las imágenes. Es por eso, que al dibujar la imagen a un círculo, debes restar su radio a la posición inicial, de esta forma:

        ctx.drawImage(img,this.x-this.radius,this.y-this.radius);

¡Mucha suerte!

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var canvas=null,ctx=null;
    var lastPress=null;
    var mousex=0,mousey=0;
    var score=0;
    var bgColor='#000';
    var player=new Circle(0,0,5);
    var target=new Circle(100,100,10);

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

        enableInputs();
        run();
    }

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

    function run(){
        requestAnimationFrame(run);
        act();
        paint(ctx);
    }

    function act(){
        player.x=mousex;
        player.y=mousey;

        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;

        if(lastPress==1){
            bgColor='#333';
            if(player.distance(target)<0){
                score++;
                target.x=random(canvas.width/10-1)*10+target.radius;
                target.y=random(canvas.height/10-1)*10+target.radius;
            }
        }
        else
            bgColor='#000';
    }

    function paint(ctx){
        ctx.fillStyle=bgColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.strokeStyle='#f00';
        target.stroke(ctx);
        ctx.strokeStyle='#0f0';
        player.stroke(ctx);

        ctx.fillStyle='#fff';
        ctx.fillText('Distance: '+player.distance(target).toFixed(1),0,10);
        ctx.fillText('Score: '+score,0,20);
        lastPress=null;
    }

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

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

    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.stroke=function(ctx){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        ctx.stroke();
    }

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