3

¿Como determinar la dirección que se mueve el mouse?

Descripción inicial:

Estoy haciendo un juego sencillo, es una versión del juego Snake o una serpiente que come manzana y aumenta su cola sin que pueda tocar su cola o las paredes.

Problema:

Hay veces que mi fórmula se equivoca y no determina la dirección correcta a la que debe moverse y es muy difícil hacer que se mueva en la dirección que indico al mover el mouse.

Código:

//Canvas es una variable que contiene un elemento canvas.
canvas.addEventListener("mousemove",function(e){
    let dim=snake.dims[0];
    let is_x=(dim.x==e.clientX)?SQUAL:(dim.x>e.clientX)?MAYOR:MENOR;
    let is_y=(dim.y==e.clientY)?SQUAL:(dim.y>e.clientY)?MAYOR:MENOR;
    if (is_x && is_y){//Si no son iguales.
        if (is_x>is_y){//BOTTOM | LEFT
            //Sedemos el control a BOTTOM o a LEFT.
            dim.address=( dim.y-e.clientY<e.clientX-dim.x )?BOTTOM:LEFT;
        }else{//TOP | RIGHT
            //Sedemos el control a TOP o a RIGHT.
            dim.address=( e.clientY-dim.y<dim.x-e.clientX )?TOP:RIGHT;
        }
    }
});

Descripciones de las clases usadas:

Clase Dim:

Es una clase que define las dimensiones(x,y,width,height) del los objeto, tambien define su dirección(address).
Tiene dos constructores: El primero determina los atributos anteriormente mencionado, el segundo es una funcion estática que retorna un nuevo objeto Dim:

Dim.new_dim=function(dim){
   return new Dim(dim.x,dim.y,dim.width,dim.height,dim.address);
};

Clase Snake:

snake es un objeto que define como atributo una colección de Dim que representan toda la cola, el primer elemento es el que se necesita cambiar la dirección(snake.dims[0].address) por medio del evento, la serpiente cambiará de posición de la siguiente manera:

snake.dims[1].address=Dim.new_dim(snake.dims[0]);

La variable address determinará en que dirección moverse, acepta estos valores: TOP, BOTTOM, LEFT y RIGHT. Que con un switch cambiará la posición de la primera cola o snake.dims[0].

Codigo Completo:

<!doctype html>
<html lang="es">
    <head>
        <title>Example.</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style>
            canvas{
                border:3px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas">Su navegador esta muy obsoleto, deberia descargar uno que sea mas actualizado.</canvas>
        <script>
            const MAX_WIDTH=500,
                       MAX_HEIGHT=500,
                        //Para identificar la posicion de los objetos.
                       TOP=0,
                       BOTTOM=1,
                       LEFT=2,
                       RIGHT=3,
                       //Para determinar que direccion se mueve el mouse.
                       SQUAL=0,
                       MAYOR=1,
                       MENOR=0;
            var snake, //La serpiente del juego.
                   time_game=300, //Tiempo de retraso en la serpiente.
                   ctx, //Contexto 2d del elemento canvas.
                   id_interval_game;//Tendra el id del setInteval para la funcion game.
             
            class Dim{
                constructor(x,y,width,height,address){
                    this.x=x;
                    this.y=y;
                    this.width=width;
                    this.height=height;
                    this.address=address;
                }
            }
            Dim.new_dim=function(dim){
                return new Dim(dim.x,dim.y,dim.width,dim.height,dim.address);
            }
            class Snake{
                constructor(dim,color="green"){
                    this.dims=[dim];
                    this.color=color;
                }
                move_dim(dim,speed){
                    switch ( dim.address ){
                        case TOP:// -speed
                            dim.y-=speed;
                            break;
                        case BOTTOM:// +speed
                            dim.y+=speed;
                            break;
                        case RIGHT://+speed
                            dim.x+=speed;
                            break;
                        case LEFT://-speed
                            dim.x-=speed;
                            break;
                    }
                }
                update(speed,ctx){
                    this.deleted_all(ctx);
                    let now=Dim.new_dim(this.dims[0]);
                    this.move_dim(this.dims[0],speed);
                    for (let i=1;i<this.dims.length;i++){
                        let after=Dim.new_dim(this.dims[i]);
                        this.dims[i]=now;//arrastramos la cola actual a donde va la cola anterior.
                        now=after;
                        //Complovamos si la cabeza toca su cola.
                        if (this.dims[0].x==now.x && this.dims[0].y==now.y){
                            return true;//Game-Over.
                        }
                    }
                    return false;//Normal
                }
                draw(ctx){
                    let fillStyle=ctx.fillStyle;//Para guardar el color usado anteriormente.
                    ctx.beginPath();
                    ctx.fillStyle=this.color;
                    for ( let dim of this.dims ){
                        ctx.fillRect(dim.x,dim.y,dim.width,dim.height);
                    }
                    ctx.closePath();
                    ctx.fillStyle=fillStyle;
                }
                deleted_all(ctx){
                    for (let dim of this.dims){
                        ctx.clearRect(dim.x,dim.y,dim.width,dim.height);
                    }
                }
            };
            
            window.onload=function(){
                 let canvas=document.getElementById("canvas");
                 canvas.setAttribute("width",MAX_WIDTH+"px");
                 canvas.setAttribute("height",MAX_HEIGHT+"px");
                 
                 ctx=canvas.getContext("2d");
                 
                 canvas.addEventListener("mousemove",function(e){
                     /////////////////////////////////////////////////////////////////////////
                     //Aqui va el codigo que causa el problema.
                     let dim=snake.dims[0];
                     let is_x=(dim.x==e.clientX)?SQUAL:(dim.x>e.clientX)?MAYOR:MENOR;
                     let is_y=(dim.y==e.clientY)?SQUAL:(dim.y>e.clientY)?MAYOR:MENOR;
                     if (is_x && is_y){//Si no son iguales.
                         if (is_x>is_y){//BOTTOM | LEFT
                             //Sedemos el control a BOTTOM o a LEFT.
                            dim.address=( dim.y-e.clientY<e.clientX-dim.x )?BOTTOM:LEFT;
                         }else{//TOP | RIGHT
                             //Sedemos el control a TOP o a RIGHT.
                            dim.address=( e.clientY-dim.y<dim.x-e.clientX )?TOP:RIGHT;
                         }
                     }
                 });
                 snake=new Snake(
                                       new Dim(MAX_WIDTH>>1,MAX_HEIGHT>>1,10,10,LEFT),
                                      "red"
                              );
                 id_interval_game=setInterval(game,time_game);//Iniciamos el juego.
            }
            function game(){
                if (snake.update(10,ctx) || snake.dims[0].x>MAX_WIDTH || snake.dims[0].x<0 || snake.dims[0].y>MAX_HEIGHT || snake.dims[0].y<0 ){//Game over.
                    alert("Game-Over. :  ( ");
                    clearInterval(id_interval_game);
                }
                snake.draw(ctx);
            }
            
        </script>
    </body>
</html>
6
  • 1
    Sin ánimos de quitar el mérito a tu trabajo, en mi opinión, y sólo es una opinión, manejar el movimiento del actor mediante el teclado sería un poco más efectivo que hacerlo mediante el mouse. Repito que es sólo una opinión y no una sugerencia. Saludos el 27 nov. 2021 a las 16:05
  • @MauricioCosteras Gracias por la opinión:), También lo hice, pero me gustaría manejar el evento mouse y toucher, con el evento toucher pienso utilizar la misma fórmula, pero no sé si debo cambiarla en el evento toucher( Ojo: Mi pregunta solo tiene que ver para el evento mousemove y cuando obtenga la respuesta la adapto al toucher ). el 27 nov. 2021 a las 17:49
  • 1
    yéndonos al lado matemático. Tendrías que evaluar la posición en el eje x o y. Si la serpiente está yendo hacia arriba o hacia abajo solo tiene permitido moverse a los lado, por lo que al mover el maouse tendrás que evaluar la posición X del mouse y la de la serpiente. Si la posición del X del mouse es mayor a la de la serpiente entonces te mueves a la derecha, de lo contrario a la izquierda. Lo mismo para ir hacia arriba o abajo.
    – Christian
    el 29 nov. 2021 a las 0:00
  • @Christian Eso es lo que trato de hacer con la formula que enseñe: let is_x=(dim.x==event.clientX)?SQUAL:(dim.x>event.clientX)?MAYOR:MENOR; let is_y=(dim.y==event.clientY)?SQUAL:(dim.y>event.clientY)?MAYOR:MENOR; if (is_x && is_y){//Si no son iguales. if (is_x>is_y){//BOTTOM | LEFT //Sedemos el control a BOTTOM o a LEFT. dim.address=( dim.y-event.clientY<event.clientX-dim.x )?BOTTOM:LEFT; }else{//TOP | RIGHT //Sedemos el control a TOP o a RIGHT. dim.address=( event.clientY-dim.y<dim.x-event.clientX )?TOP:RIGHT; } } el 29 nov. 2021 a las 0:43
  • podrías poner todo el código para replicar tu problema. Creo que tengo lo solución pero me hace falta probarlo y lo haría pero no sé como funciona un canvas ni nada de eso. No soy experto en JS
    – Christian
    el 29 nov. 2021 a las 0:51

1 respuesta 1

0

Cambié la fórmula para lograr el efecto que quiero:

canvas.addEventListener("mousemove",function(e){
    let dim=snake.dims[0];
    
    //Creamos un flag que dirá si el mous esta menor o igual a la posición X y Y de la serpiente.
    let is_x=(dim.x==e.clientX)?SQUAL:(e.clientX>dim.x)?MAYOR:MENOR;//Mayor significa RIGHT
    let is_y=(dim.y==e.clientY)?SQUAL:(e.clientY>dim.y)?MAYOR:MENOR;//Mayor significa BOTTOM.
    let dis_x=(is_x==MAYOR)?e.clientX-dim.x:dim.x-e.clientX;
    let dis_y=(is_y==MAYOR)?e.clientY-dim.y:dim.y-e.clientY;
    if (dis_x>dis_y){
        dim.address=(is_x==MAYOR)?RIGHT:LEFT;
    }else{
        dim.address=(is_y==MAYOR)?BOTTOM:TOP;
    }
});

Expricacion:

1- Creamos dos flags, que nos dirá si la posición del mouse es menor, igual o mayor a la posición de la serpiente.

    //Creamos un flag que dirá si el mous esta menor o igual a la posición X y Y de la serpiente.
    let is_x=(dim.x==e.clientX)?SQUAL:(e.clientX>dim.x)?MAYOR:MENOR;//Mayor significa RIGHT
    let is_y=(dim.y==e.clientY)?SQUAL:(e.clientY>dim.y)?MAYOR:MENOR;//Mayor significa BOTTOM.

2- Determinamos la distancia que separa a la serpiente del mouse en relación con la posición x e y:

    let dis_x=(is_x==MAYOR)?e.clientX-dim.x:dim.x-e.clientX;
    let dis_y=(is_y==MAYOR)?e.clientY-dim.y:dim.y-e.clientY;

3- Decidimos si sedemos el control a RIGHT | LEFT o a BOTTOM | TOP lo que decidiremos de esta manera: if (dis_x>dis_y){ lo cual si es true entonces le cedemos el control a RIGHT | LEFT, pero si no es mayor entonces le cedemos el control a BOTTOM | TOP.

4.1- Si la distancia x es mayor a la distancia y entonces tomamos la variable is_x para determinar si el mouse esta a la derecha de la serpiente(RIGHT), sino esta a la izquierda de la serpiente(LEFT) y haci cambiamos su dirección:

    dim.address=(is_x==MAYOR)?RIGHT:LEFT;

4.2- Si la distancia x es menor o igual a la distancia y entonces hacemos el paso anterior(Con la variable is_y) para ver si la serpiente toma la dirección BOTTOM o TOP:

    dim.address=(is_y==MAYOR)?BOTTOM:TOP;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.