function detectaChoque() {
if( objetoAX + objetoAAncho > objetoBX && objetoAX < objetoBX + objetoBAncho &&
objetoAY < objetoBY + objetoBAlto && objetoAY + objetoAAlto > objetoBY ) {
if( dir.equals( "der" )) {
if( bCentroY < objetoAY + objetoAAlto && bCentroY > objetoAY ) {
return true;
}
else {
if( bCentroY < objetoAY ) {
detectaColisionCirculo( objetoAY - bCentroY, objetoAX + objetoAAncho - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX + objetoAAncho - bCentroX ); // antes decía objetoAY + objetoBAlto
}
}
}
else if ( dir.equals( "izq" )) {
if( bCentroY < objetoAY + objetoAAlto && bCentroY > objetoAY ) {
return true;
}
else {
if( bCentroY < objetoAY ) {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX - bCentroX );
}
}
}
else if ( dir.equals( "arr" )) {
if( bCentroX < objetoAX + objetoAAncho && bCentroX > objetoAX ) {
return true;
}
else {
if( bCentroX < objetoAX ) {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX + objetoAAncho- bCentroX );
}
}
}
else if ( dir.equals( "aba" )) {
if( bCentroX < objetoAX + objetoAAncho && bCentroX > objetoAX ) {
return true;
}
else {
if( bCentroX < objetoAX ) {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX + objetoAAncho - bCentroX );
}
}
}
return false;
}
}
function detectaColisionCirculo( ladoA, ladoB ) {
if( Math.sqrt( ladoA * ladoA + ladoB * ladoB ) < radio ) {
choco();
}
}
let iniciando = true
let objetoBX = 40;
let objetoBY = 40;
let objetoBAlto = 140;
let objetoBAncho = 140;
let bCentroX = objetoBX + objetoBAncho / 2;
let bCentroY = objetoBY + objetoBAlto / 2;
let diametro = objetoBAlto;
let radio = diametro / 2;
let bicho;
let arr;
let aba;
let der;
let izq; // botones
let objetoAX = 10;
let objetoAY = 10;
let objetoAAlto = 20;
let objetoAAncho = 20;
let direccion = "derecha";
function mover() {
if( iniciando ) {
iniciando = false;
document.getElementById( "arr" ).addEventListener( "click", function() {
direccion = "arriba";
});
document.getElementById( "aba" ).addEventListener( "click", function() {
direccion = "abajo";
});
document.getElementById( "der" ).addEventListener( "click",function() {
direccion = "derecha";
});
document.getElementById( "izq" ).addEventListener( "click", function() {
direccion = "izquierda";
});
bicho = document.getElementById( "bicho" );
ion();
}
if( direccion == "arriba" ) {
objetoAY -= 1;
bicho.style.marginTop = objetoAY + 'px';
}
else if( direccion == "abajo" ) {
objetoAY += 1;
bicho.style.marginTop = objetoAY + 'px';
}
else if( direccion == "derecha" ) {
objetoAX += 1;
bicho.style.marginLeft = objetoAX + 'px';
}
else if( direccion == "izquierda" ) {
objetoAX -= 1;
bicho.style.marginLeft = objetoAX + 'px';
}
if( detectaChoque() ) {
bicho.style.background = "red";
}
else {
bicho.style.background = "blue";
}
}
function detectaChoque() {
if( objetoAX + objetoAAncho > objetoBX && objetoAX < objetoBX + objetoBAncho &&
objetoAY < objetoBY + objetoBAlto && objetoAY + objetoAAlto > objetoBY ) {
if( direccion === "derecha" ) {
if( bCentroY < objetoAY + objetoAAlto && bCentroY > objetoAY ) {
return true;
}
else {
if( bCentroY < objetoAY ) {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX + objetoAAncho - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX + objetoAAncho - bCentroX );
}
}
}
else if( direccion === "izquierda" ) {
if( bCentroY < objetoAY + objetoAAlto && bCentroY > objetoAY ) {
return true;
}
else {
if( bCentroY < objetoAY ) {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX - bCentroX );
}
}
}
else if( direccion === "arriba" ) {
if( bCentroX < objetoAX + objetoAAncho && bCentroX > objetoAX ) {
return true;
}
else {
if( bCentroX < objetoAX ) {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY - bCentroY, objetoAX + objetoAAncho - bCentroX );
}
}
}
else if( direccion === "abajo" ) {
if( bCentroX < objetoAX + objetoAAncho && bCentroX > objetoAX ) {
return true;
}
else {
if( bCentroX < objetoAX ) {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX - bCentroX );
}
else {
return detectaColisionCirculo( objetoAY + objetoAAlto - bCentroY, objetoAX + objetoAAncho - bCentroX );
}
}
}
}
return false;
}
function choco() {
bicho.style.background = "red";
}
function detectaColisionCirculo( ladoA, ladoB ) {
return Math.sqrt( ladoA * ladoA + ladoB * ladoB ) < radio;
}
function ion() {
var c = document.getElementById( "myCanvas" );
var ctx = c.getContext( "2d" );
ctx.arc( 75, 75, 74, 0, Math.PI * 2, false );
ctx.fill();
}
// ## // ## //
*{ padding: 0px; position: absolute;} .bot { width:20px; height:20px; } #escenario { width: 440px; height: 220px; margin-left: 0px; margin-top: 0px; background-color: yellow; } #a { margin-left: 230px; margin-top: 130px; } #arr { margin-left: 270px; margin-top: 60px; } #izq { margin-left: 250px; margin-top: 80px; } #der { margin-left: 290px; margin-top: 80px; } #aba { margin-left: 270px; margin-top: 100px; } #bicho { margin-left: 10px; margin-top: 10px; background-color: blue; } canvas { width: 280px; height: 140px; margin-left: 40px; margin-top: 40px; }
<body> <section id="escenario"> <canvas id="myCanvas"> Canvi </canvas> <div class="bot" id= "bicho"> </div> <button id="a" onclick="setInterval( mover, 100 )"> Dale nomás! </button> <br> </section> <footer id="control"> <button class="bot" id="arr" onclick="ion()" > </button> <br> <button class="bot" id="der" > </button> <br> <button class="bot" id="izq" > </button> <br> <button class="bot" id="aba" > </button> <br> </footer> </body>
Edición: corregí algunos errores, y añadí una implementación. Nota: la función no está hecha para detectar la "salida", por eso el cambio de color al salir no es correcto.