2

Estoy intentando que con una esfera que cree le coloque 5 puntos o cuadros en cada esquina y en el centro de la esfera el punto es que lo que intento es que al colisionar con el rectángulo detecte que hubo una colisión (no quiero que pare) lo que quiero es que al detectar el rectángulo en cada punto en la consola cambie a true, lo único que eh logrado es que detecte el centro eh intentado utilizar la misma implementación del centro para los otros puntos pero no lo eh conseguido no se me ocurre como lograrlo y eh intentado muchas cosas para hacerlo no se si se me podría ayudar y explicar como realizarlo porfa no soy muy experto en esto estoy aprendiendo Gracias.

let x = 100;
let y = 100; 
let r = 30;
let mover = false; 


const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const button1 = document.getElementById("arriba");
button1.addEventListener("click", () => { 
  moverArribaF = true; 
  moverIzquierdaF = false;
    moverAbajoF = false; 
  moverDerechaF = false;
});

const button2 = document.getElementById("derecha");
button2.addEventListener("click", () => { 
   moverArribaF = false; 
  moverIzquierdaF = false;
    moverAbajoF = false; 
  moverDerechaF = true;
  });

const button3 = document.getElementById("centro");
button3.addEventListener("click", 
  () => { 
    moverArribaF = false; 
    moverIzquierdaF = false;
    moverAbajoF = false; 
    moverDerechaF = false;
    orientacion = "";
    x = canvas.clientWidth / 2;
    y = canvas.clientHeight / 2;
});


const button4 = document.getElementById("izquierda");
button4.addEventListener("click", () => { 
 moverArribaF = false; 
  moverIzquierdaF = true;
    moverAbajoF = false; 
  moverDerechaF = false;
});

const button5 = document.getElementById("abajo");
button5.addEventListener("click", () => { 
   moverArribaF = false; 
  moverIzquierdaF = false;
    moverAbajoF = true; 
  moverDerechaF = false;
});

let moverArribaF = false;
let moverIzquierdaF = false;
let moverDerechaF = false;
let moverAbajoF = false;
let orientacion = "";
let xe = canvas.clientWidth / 2;
let ye = canvas.clientHeight / 2;
let re = 20;

const barraW = Math.floor(canvas.clientWidth * 0.10);
const barraH = Math.floor(canvas.clientHeight * 0.50);
const barraX = canvas.clientWidth / 2 - barraW / 2;
const barraY = canvas.clientWidth / 2 - barraH / 2;

let hayColision = false;

const moverArriba = () => {
  if (y > 0) {
    y -= r;
  } else {
    y = canvas.clientHeight;
  }
};

const moverIzquierda = () => {  
  if (x > 0) {
    x -= r;
  } else {
    x = canvas.clientWidth;
  }
};

const moverAbajo = () => {  
  if (y < canvas.clientHeight - r) {
    y += r;
  } else {
    y = 0;
  }
};
const moverDerecha = () => {  
  if (x < canvas.clientWidth - r) {
    x += r;
  } else {
    x = 0;
  }
};
  

const inicio = () => {
  
  let limiteInicialX = barraX;
  let limiteFinalX = barraX + barraW; 
  let limiteInicialY = barraY
  let limiteFinalY = barraY + barraH
 
  
  //condicion de colision del centro del circulo en X
  if ((x >= limiteInicialX && x <= limiteFinalX) &&  
      (y >= limiteInicialY && y <= limiteFinalY)) {
    hayColision = true;
  } else {
    hayColision = false;
  }
  
  
  
  if (moverArribaF === true) {
    moverArriba();
  } else if (moverIzquierdaF === true) {
    moverIzquierda();
  } 
  
  if (moverAbajoF === true) {
    moverAbajo();
  } else if (moverDerechaF === true) {
    moverDerecha();
  }
    
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);
   
  ctx.fillStyle = "yellow"
  ctx.fillRect(barraX, barraY, barraW, barraH);
  

  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI, false);
  ctx.fill();

ctx.fillStyle = "white";
  ctx.fillRect(x, y, 1, 1);
  ctx.fillRect(x, y - r, 1, 1);
  ctx.fillRect(x, y + r, 1, 1);
  ctx.fillRect(x + r, y, 1, 1);
  ctx.fillRect(x - r, y, 1, 1);


console.clear();
  console.log(`barraW: ${barraW}`);
  console.log(`barraH: ${barraH}`);
  console.log(`barraX: ${barraX}`);
  console.log(`barraY: ${barraY}`);
  console.log(" ");
  console.log(`arriba    x,y = ${x},${y - r}`);
  console.log(`centro    x,y = ${x},${y}`);
  console.log(`abajo     x,y = ${x},${y + r}`);
  console.log(`izquierda x,y = ${x - r},${y}`);
  console.log(`derecha   x,y = ${x + r},${y}`);
  console.log("");
  console.log(`haycolision en X: ${hayColision}`);
    
}

setInterval(inicio, 500);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <center>
    <canvas id="canvas" width="400" height="400"></canvas> 
    <br/>
    <button id="arriba">Arriba</button>
    <button id="izquierda">Izquierda</button>
    <button id="centro">Centro</button>
    <button id="derecha">Derecha</button>
    <button id="abajo">Abajo</button>
  </center>
</body>
</html>

4
  • 2
    1. java es distinto de javascript 2. No creo que sea buena idea poner como etiqueta tarea :/
    – Christian
    Commented el 26 jul. 2021 a las 0:44
  • perdón no fue mi intención
    – FortCout
    Commented el 26 jul. 2021 a las 4:06
  • No te preocupes, solo te doy consejos para que mejores tus preguntas :D. Lo siento no poder ayudar en tu problema
    – Christian
    Commented el 26 jul. 2021 a las 4:15
  • no tengas pena gracias por tu consejo lo tomare en cuenta para futuras preguntas
    – FortCout
    Commented el 26 jul. 2021 a las 4:18

1 respuesta 1

1

La idea es la siguiente, tienes dos objetos con posición x e y en un plano.

Pongamosles de nombre "cubo1","cubo2".

En una graella 100x100, cubo1 esta en la posición 23x,43y midiendo de ancho 2 unidades, y cubo2 esta en 21x, 40y midiendo de ancho 2 unidades.

Area ocupada por cubo1 ---> 23x,24x,43y,44y
Area ocupada por cubo2 ---> 21x,22x, 40y,41y  //Hay colisión? No, los cubos no coinciden en areas ocupadas

Que pasa si aumentamos el ancho de uno de los cubos? O si lo movemos en el eje y 2 unidades arriba?

Ves por donde voy verdad, el ancho del objeto y su posición son lo único que necesitas para detectar la colissión, tu método para detectar colisiones solamente tiene en cuenta la distancia y no el ancho de los objetos, por eso la colisión no funciona bien.

Tu Respuesta

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

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