Skip to main content
3 de 3
se añadieron 7 caracteres en el cuerpo
DABL03
  • 1.2k
  • 6
  • 26

¿Como detectar una colisión de un circulo y un cuadrado?

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.

DABL03
  • 1.2k
  • 6
  • 26