Aprende a crear juegos en HTML5 Canvas

lunes, 28 de mayo de 2012

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

12 comentarios:

  1. hola!!
    seria mucho pedir que pudieran publicar algun ejemplo de como utilizar conjuntamente moveover y click!!

    ResponderEliminar
    Respuestas
    1. ¡Hola Anómimo!

      Estamos preparando una pequeña guía para un segundo juego, esta vez usando el ratón, el cual tendrá estas acciones que tú pides. Perdona nuestra demora, pero hemos estado ocupados. Si tienes duda sobre el uso de estos dos, pregúntanos y buscaremos ayudarte rápidamente entre tanto.

      Eliminar
    2. pasamelo plox lo estoy buscando

      Eliminar
    3. Puedes encontrarlo en el inicio, siguiendo los pasos del tema "Arrastra y suelta".
      Felices códigos

      Eliminar
  2. Hola disculpa, pero como quedaria el codigo si lo q deseo es q al hacer clic me dibuje un un circulo.? ayudame si puedes y graxias de antemano..!!

    ResponderEliminar
    Respuestas
    1. Primero lee el artículo http://juegoscanvas.blogspot.mx/2012/08/presionando-el-boton-del-raton.html para que aprendas a manejar el uso del clic.

      Después, crea una variable para guardar los círculos:

      var circles = new Array();

      Y modifica cuando detecte un nuevo clic, para agregar un círculo:

      circles.push(new Circle(mousex,mousey,20));

      Eso logrará tu objetivo.

      Solo debo preguntar antes: ¿De casualidad estás haciendo un painter? Pues de ser así, hay soluciones mas sencillas a esta tarea, que no requiere almacenar objetos en variables. Tus preguntas me hacen pensar que eso es lo que intentas...

      Suerte ;)

      Eliminar
  3. Hola, te agradezco por todo el trabajo que has hecho en estos tutoriales, estan muy bien explicados y detallados.
    Me gustaria aprovechar de preguntar, si quiero hacer un circulo cuando hago click y que luego desaparezca... como lo puedo hacer?

    ResponderEliminar
  4. Mi consejo es que tengas el círculo ya creado y este en una posición fuera de la pantalla. Cuando hagas clic, muevas los valores XY del circulo a los del ratón, y con una variable timer, lo mantengas ahí el tiempo deseado, antes de regresarlo.

    Para saber como usar los clics, sigue el tutorial en http://juegoscanvas.blogspot.mx/2012/08/presionando-el-boton-del-raton.html

    Mucha suerte! ;)

    ResponderEliminar
  5. hola, hice una lluvia de cuadros pero ahora quisiera agarrarlos con el mouse me podrías asesorar te agradeceria

    ResponderEliminar
    Respuestas
    1. ¿Has probado el ejemplo de Drag&Drop cuatro temas adelante?

      Eliminar
  6. Hola, como puedo hacer una linea entre el player y el raton que sea infinita, es decir que sobrepase el ratón. Tengo esto

    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.lineWidth=1;
    ctx.moveTo(player.x+player.width-cam.x,player.y-cam.y);

    ctx.lineTo(mouse.x-cam.x,mouse.y-cam.y);


    ctx.stroke();

    quiero que siga y no se pare en el raton

    ResponderEliminar
    Respuestas
    1. Solucionado, coseno,seno, angulo y solucionado.

      Eliminar