¿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 osnake.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>
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; } }