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);
HTML
<!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>