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
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>
<!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>