Usando el ratón

Ya aprendimos a crear juegos con el uso del teclado, pero hay otro tipo de juegos que hacen uso del ratón, por lo que ahora nos enfocaremos en su uso.

Primero que nada, declararemos dos variables que almacenarán la posición de nuestro ratón cuando este sea movido:

    var mousex=0,mousey=0;

 Rastrearemos el movimiento de nuestro ratón a través de un escucha del movimiento del mouse:

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

Las variables evt.pageX y evt.pageY nos permiten saber la posición de nuestro ratón con respecto a la página. Restando los valores offsetLeft y offsetTop de nuestro canvas, obtendremos la posición de nuestro ratón con respecto al canvas.

En nuestra función game, asignaremos la posición de nuestro ratón a nuestras variables X y Y. Posteriormente, buscaremos si la posición está fuera del canvas, y la regresaremos a su interior, para asegurarnos de esta forma que el personaje esté siempre visible dentro del juego:

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

        if(x<0)
            x=0;
        if(x>canvas.width)
            x=canvas.width;
        if(y<0)
            y=0;
        if(y>canvas.height)
            y=canvas.height;
    }

Por último, dibujaremos nuestro personaje en la función paint. Para dibujarlo, esta ocasión no usaremos un rectángulo, si no un círculo, ya que ofrece varias ventajas con respecto al uso del ratón.

Para dibujar un círculo, usaremos la función arc, la cual recibe seis variables:

ctx.arc(centerX, centerY, radius, startAngle, endAngle, clockwise);

Las variables startAngle y endAngle van en radianes. Para que sea un círculo lo que dibujaremos con la función arc, los ángulos deben ser siempre 0 y Math.PI*2 (360 grados en radianes). Ya que arc solo crea un elemento pero no lo dibuja, debemos usar la función beginPath antes de llamar a arc, y stroke o fill después de la función arc, según sea nuestra intención.

Por tanto, nuestra función paint quedará de esta forma:

    function paint(ctx){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.strokeStyle='#0f0';
        ctx.beginPath();
        ctx.arc(x,y,5,0,Math.PI*2,true);
        ctx.stroke();
    }

De esta forma, conseguiremos dibujar un círculo siempre en la posición de nuestro ratón.

Apéndice: Eventos de ratón.

En esta primer entrada del tema del uso del ratón, solo hemos hecho uso del evento mousemove. A continuación te damos una lista con todos los eventos de ratón, para que tú mismo experimentes con ellos por tu cuenta:

mousemove

Se ejecuta cuando el mouse se mueve.

mousedown

Se ejecuta cuando un botón del mouse es presionado.

mouseup

Se ejecuta cuando un botón del mouse es liberado.

click

Se ejecuta cuando un botón del mouse es presionado y liberado en un corto lapso de tiempo.

dblclick

Se ejecuta cuando un botón del mouse es presionado y liberado dos veces en un corto lapso de tiempo.

mouseover

Se ejecuta cuando el ratón entra en el área del elemento que llama a esta función.

mouseout

Se ejecuta cuando el ratón sale del área del elemento que llama a esta función.

Código final:

(Nota: he cambiado los valores del canvas a 300x200 para aprovechar mejor la pantalla con el mouse)
[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 x=0,y=0;

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

        run();
    }

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

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

        if(x<0)
            x=0;
        if(x>canvas.width)
            x=canvas.width;
        if(y<0)
            y=0;
        if(y>canvas.height)
            y=canvas.height;
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.strokeStyle='#0f0';
        ctx.beginPath();
        ctx.arc(x,y,5,0,Math.PI*2,true);
        ctx.stroke();
    }

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

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