0

bien pues estoy haciendo un proyecto con javascript de un juego mientras voy aprendiendo mas cosas sobre el.

intente hacer un hitbox pero no me sale.Lo formule con el if si se pasaba del x o el y del canvas , se restaba a su posicion haciendo el efecto de que no se mueve.

obviamente no lo hiso y quiero saber que ideas tienen acerca de como hacer uno.

intenta ir a la derecha veraz que no funciona.

<!DOCTYPE html>
<html>  
    </head>
    <body>
        <meta charset="UTF-8">
        <input id="text" type="text" value="COLEGA"><br>
        <canvas id="camara" width="500" height="500" style="border:5px solid #000000">
        
        <script>
            
            //creando el objecto personaje:
            var Personaje = {
                cx: 250,
                cy: 250,
                control: function(){
                    document.addEventListener("keydown", (e) => {                   
                        if(e.key=="w"){
                            Personaje.cy = Personaje.cy - 1
                        }else if(e.key=="a"){
                            Personaje.cx = Personaje.cx - 1
                        }else if(e.key=="s"){
                            Personaje.cy = Personaje.cy + 1
                        }else if(e.key=="d"){
                            Personaje.cx = Personaje.cx + 1
                        }else if(Personaje.cx == 500)
                            Personaje.cx = Personaje.cx -2
                        }else{
                            console.log("nada importante");
                        }
                    })
                },
            };
            //variables globales:
            var canvas;
            var ctx;
            var velocidad = 7;
            
            //creando bucles:
            //bucle de tiempo
            for(velocidad;velocidad<10;velocidad++){
                Personaje.control();
            };
            //bucle general
            setInterval(function(){
                ctx.clearRect(0,0,500,500);
                ctx.drawImage(img,Personaje.cx,Personaje.cy);
                var info = document.getElementById("text").value;
                ctx.fillText(info,Personaje.cx,Personaje.cy);
            },10);
            //iniciando canvas
            canvas = document.getElementById("camara");
            ctx = canvas.getContext("2d");
            //dibujando personaje   
            var img = new Image();
            img.src = "pixie.png";
            ctx.drawImage(img,Personaje.cx,Personaje.cy);
        </script>
    </body>
</html>
7
  • 1
    Deberias colocar el codigo con comentarios y todo, para que sea más facil ayudarte
    – Shredder
    el 15 abr. 2021 a las 15:18
  • ok tiene comentarios y todo lo editare y veremos si puedes ayudarme
    – COLEGA
    el 15 abr. 2021 a las 15:43
  • Por favor coloca un ejemplo minimo verificable para poder ayudarte
    – user202611
    el 15 abr. 2021 a las 15:44
  • ya lo hice ya puedes verificarlo
    – COLEGA
    el 15 abr. 2021 a las 15:57
  • ejemplo mínimo verificable no significa que debamos verificarlo nosotros. Significa que cuando tienes problemas con la depuración, y dado que nuestro cerebro todavía no puede interpretar código, debes proporcionar un ejemplo que podamos pulsar un botón y ver qué pasa.
    – Benito-B
    el 15 abr. 2021 a las 16:15

1 respuesta 1

1

Creo que tu problema está en el orden de la lógica de tus condicionales. Fíjate que el que comprueba si se ha salido del área está al final, después de comprobar si se presiona "d".

De tu código:

else if(e.key=="d"){
    Personaje.cx = Personaje.cx + 1
}else if(Personaje.cx == 500)
    Personaje.cx = Personaje.cx -2
}

La comprobación de Personaje.cx == 500 te interesa hacerla antes, porque si no va a entrar en e.key == "d" y se va a mover a la derecha. Prueba con ese fragmento así:

// Si presiona "d" ve a la derecha.
else if(e.key=="d") {
    // Si ya esta en el borde, no va mas a la derecha.
    if(Personaje.cx == 500)
        Personaje.cx = Personaje.cx -2
    }
    else {
        Personaje.cx = Personaje.cx + 1
    }
}

Que una vez lo entiendas y lo tengas bien puedes acortarlo así:

// Si presiona "d" ve a la derecha.
else if(e.key=="d") {
    // Si no esta en el borde suma 1, si se paso el borde resta 2.
    Personaje.cx += Personaje.cx < 500 ? 1 : -2;
}
1
  • muchas gracias enserio no lo pense de esa manera y tiene mucho sentido una vez mas gracias
    – COLEGA
    el 15 abr. 2021 a las 22:49

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.