1

Estoy arreglando un antiguo juego que hice sobre la clásica serpiente come manzanas. Las manzanas y el jugador eran rectángulos y funcionaba esta función:

if (( rect["x"]>apple[i]["x"]-a_width && rect["x"]<apple[i]["x"]+a_width ) &&
  (rect["y"]>apple[i]["y"]-a_height && rect["y"]<apple[i]["y"]+a_height) ){

Esto me funcionaba correctamente, pero cuando quise cambiar la formas de las manzanas de rectángulos a circulo, ya no me reconoce cuando toco una manzana.
Código completo:

<html>
<head>
    <title>Prueba</title>
</head>
<body>
    <canvas width="500px" height="500px" style="border:4px solid black;"></canvas>
    <script>
        var rect={
            x:10,
            y:10,
            width:20,
            height:20,
            address:40
        };
        var apple=[];
        var canvas=document.querySelector("canvas");
        var ctx=canvas.getContext("2d");
        const 
            /*Direcciones: Expresada usando el codigo de las teclas del teclado.*/
                TOP=38,
                BOTTOM=40,
                LEFT=37,
                RIGHT=39,
            /*Flags:*/
                PAUSE=80,
                SQUAL=0,
                MAYOR=1,
                MENOR=-1,
                ENTER=13,
            /*Dimensiones:*/
                MAX_WIDTH_CANVAS=500,
                MAX_HEIGHT_CANVAS=500,
            /*Times:*/
                TIME_GHOST=20000,//El tiempo que la serpiente permanecerá siendo fanstasma durante el juego.
                TIME_BONUS=100,/*Es para definir el tiempo en que cada manzana se creará las manzanas en tiempo de bono.*/
                MAX_TIME_BONUS=8000,/*El tiempo maximo en que durara el bono de las manzanas.*/
            /*Funciones:*/
                FUNCTION_TRUE=function(){return true;}/*Funcion que siempre debuelve true.;)*/
            ;
        const a_width=20,a_height=20,radio=Math.sqrt(a_width * a_width + a_height * a_height)/2;
        document.body.addEventListener("keydown",function(e){
            /***@todo: hacer que cuando se regrese del juego este evento cambie a otro que controle los botones.*/
            e.keyCode=(e.keyCode>='A' && e.keyCode<='Z')?(95-e.keyCode)+32:e.keyCode;
            switch(e.keyCode){
                case LEFT://Tecla de la frecha izquierda o key left.
                    rect["address"]=LEFT;
                    break;
                case RIGHT://Tecla de la frecha derecha o key right.
                    rect["address"]=RIGHT;
                    break;
                case TOP://Tecla de la frecha arriba o key up.
                    rect["address"]=TOP;
                    break;
                case BOTTOM://Tecla de la frecha abajo o key bottom.
                    rect["address"]=BOTTOM;
                    break;
                default:/***@todo; cuando tengas toda esta funcion lista quitar este default.*/
                    alert(e.keyCode);
            }
        });
        function move(){
            speed=3;
            switch(rect["address"]){
                case LEFT://Tecla de la frecha izquierda o key left.
                    rect["x"]-=speed;
                    break;
                case RIGHT://Tecla de la frecha derecha o key right.
                    rect["x"]+=speed;
                    break;
                case TOP://Tecla de la frecha arriba o key up.
                    rect["y"]-=speed;
                    break;
                case BOTTOM://Tecla de la frecha abajo o key bottom.
                    rect["y"]+=speed;
                    break;
                default:/***@todo; cuando tengas toda esta funcion lista quitar este default.*/
                    console.error("Direccion no valida");
            }
        }
        function draw(){
            ctx.beginPath();
            ctx.fillStyle = "green";
            ctx.fillRect(rect["x"], rect["y"], rect["width"], rect["height"]);
            ctx.fill();
            for (let i in apple){
                ctx.arc(apple[i]["x"],apple[i]["y"],radio,0,(Math.PI/180) *360);
            }
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }
        function analize(){
            if (rect["x"]>MAX_WIDTH_CANVAS || rect["x"]<0 || rect["y"]>MAX_HEIGHT_CANVAS || rect["y"]<0){//Se sale de la pared, asi que pierde el juego.
                alert("Game over.");
                clearInterval(move_interval);
                clearInterval(appleInterval);
            }else{
                for (let i in apple){
                    if ((rect["x"]>apple["x"]-a_width && rect["x"]<apple["x"]+a_width ) &&
                        (rect["y"]>apple["y"]-a_height && rect["y"]<apple["y"]+a_height)){//Come una manzana.
                        alert("Yommy");
                        ctx.clearRect(apple["x"],apple["y"],a_width,a_height);
                        apple=remove_indice(apple,i);
                    }
                }
            }
        }
        function createApple(){
            apple[apple.lenght]={
                x:Math.random()*MAX_WIDTH_CANVAS,
                y:Math.random()*MAX_HEIGHT_CANVAS,
            };
        }
        function main(){
            ctx.clearRect(rect["x"],rect["y"],rect["width"],rect["height"]);//A juro debemos borrar al jugador antes de moverlo.
            move();
            analize();
            draw();
        }
        var move_interval=setInterval(main,170);
        var appleInterval=setInterval(createApple,4000);
        createApple();//Primera manzana
        function remove_indice(last_array,delete_indice){
            let new_array=[];
            let i_new_array=0;//Indice del nuevo array.
            for (let i in last_array){
                if ( i==delete_indice ){
                    continue;
                }
                new_array[i_new_array]=last_array[i];
                i_new_array++;
            }
            return new_array;
        }
    </script>
</body>
</html>

Nota: Es solo una versión de prueba no mi juego completo, porque es muy largo.

5
  • "cuando quise cambiar la formas de las manzanas a rectangulos" <-- círculos .... Por otro lado, si puedo recomendarte algo: descartá todo el código que sea de jugabilidad, intentando llegar a un ejemplo mínimo verificable que solamente muestre la parte del chequeo de colisiones
    – Pollo
    el 10 feb. 2023 a las 0:30
  • ... ¿Como hago eso?. Para mostrar el chequeo de colisiones se debe mover, sino se mueve como se muestra?. Al ser desición de usuario que movimiento hacer puedes decidir pa donde mover. Y al generación de manzana es para cuando se borre una manzana(un bug que siempre sale y no entiendo porque, pareciera como si ya no quisiera dibujar la manzana, se que no es porque detecte colaciones porque no sale el alerta, solo se borra la parte que paso el rectángulo y no la manzana completa.
    – DABL03
    el 10 feb. 2023 a las 0:51
  • @Pollo Gracias por avisarme del error en el párrafo. Fue un descuido.
    – DABL03
    el 10 feb. 2023 a las 1:01
  • 1
    puedes seguir utilizando cuadros, solo que tomas las coordenas de la manzana y guardas el cuadro alrededor visualmente seria : for (let i in apple){ ctx.fillStyle = "blue"; ctx.fillRect(apple[i]["x"]-radio, apple[i]["y"]-radio, radio*2, radio*2); ctx.fill(); ctx.arc(apple[i]["x"],apple[i]["y"],radio,0,(Math.PI/180) *360); } espero te sirva de guia =D
    – Bryro
    el 10 feb. 2023 a las 1:16
  • 1
    No tengo ganas de leer el código, pero la colisión de un círculo con un cuadrado debería ser similar a la de un cuadrado con otro. Si la técnica que usas es AABB, la distancia entre el centro de la esfera y los lados del cuadrado será menor o igual al radio cuando haya una colisión.
    – Mateo
    el 10 feb. 2023 a las 16:30

1 respuesta 1

2

mientras resuelvo el choque circulo/cuadrado, te dejo el código que detecta choques de cuadrados y/o rectángulos.

objeto A es el que se está moviendo y dir es la dirección del mismo.

if( dir == "der" ) {
    return = objetoAX + objetoAAncho == objetoBX - 1 &&
             objetoAY + objetoAAlto + 1 > objetoBY &&
             objetoAY < objetoBY + objetoBAlto;
}
else if ( dir == "izq" ) {
    return = objetoAX == objetoBX + objetoBAncho + 1 &&
             objetoAY + objetoAAlto + 1 > objetoBY &&
             objetoAY < objetoBY + objetoBAlto;
}
else if ( dir == "arr" ) {
    return =  objetoAY == objetoBY + objetoBAlto + 1 &&
              objetoAX + objetoAAncho + 1 > objetoBX &&
              objetoAX < objetoBX + objetoBAncho;
}
else if ( dir == "aba" ) {
    return = objetoAY + objetoAAlto == objetoBY -1 &&
             objetoAX + objetoAAncho + 1 > objetoBX &&
             objetoAX < objetoBX + objetoBAncho;
}

OBSERVACIÓN:
Este método funciona bajo ciertas condiciones:

  • solo un objeto se mueve.
  • ambos objetos se mueven pero trabajan sobre el mismo hilo.
  • los objetos avanzan un pixel por vez.

Perdona que no lo adapte a tu código... estoy un poco cansado.

Agregado detecta colision rectángulo/círculo.

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>

Es necesario agregar las propiedades "centro" de la manzana ( bCentroX y bCentroY ) para evitar tener que hacer la cuenta en cada detección.
Hay una probabilidad no nula, de que se me haya deslizado algún error, dado que no pude probarlo, cualquier cosa me comentas.

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.

8
  • Gracias por el esfuerzo, tranquilo y descansa, de todos modos está pregunta no se moverá a ningún lado y yo le daré positivo a tu respuesta.
    – DABL03
    el 10 feb. 2023 a las 0:51
  • Dale gracias, solo me interesa ayudarte. el 10 feb. 2023 a las 0:53
  • @Daniel Briceño, edité mi respuesta con unas observaciones, si tu implementación no encaja con estas condiciones, avisame, por otro lado, deberías quitar tu "upvote" hasta haber probado el código, no es que sea incorrecto (forma parte de un juego mio), sino que puede que no se adapte a tus necesidades. el 10 feb. 2023 a las 11:52
  • 1
    @Daniel Briceño, le hice unas pequeñas correcciones y le agregue una implementación, no se si ya lo has resuelto, espero me disculpes por haber subido una respuesta con errores. el 28 feb. 2023 a las 1:23
  • 1
    @HéctorM. muchas gracias maestro, este comentario viniendo de su parte, es como un premio nobel para mi.!! el 28 feb. 2023 a las 1:45

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.