0

Verán, estoy haciendo un experimento para hacer un juego platformer para dispositivos móviles con Javascript. El código no es perfecto pero funciona bien, hasta que te mueves en el aire, ya que esto causa que el cubo se quede pegado por unos segundos sin hacer nada. Aquí está el código completo.

var x_minus;
var x_plus;
var gravity = 3;
let screen = document.querySelector("canvas");
let display = screen.getContext("2d");
display.fillStyle = "blue";
display.fillRect(0, screen.height - 30, 30, 30);
        
const play = {
    y: screen.height - 30,
    x: 0,
    s: 30,
    repaint: function () {
        display.clearRect(0, 0, screen.width, screen.height);
        display.fillRect(this.x, this.y, this.s, this.s);
    }
};
    
setInterval(function () {
    if (play.y + play.s < screen.height) {
        play.y += gravity;
        play.repaint();
    }
}, 20);
    
function moveLeft() {
    if (play.x > 0) {
        play.x -= 5;
        play.repaint();
    }
}
    
function moveRight() {
    if (play.x + play.s < screen.width) {
        play.x += 5;
        play.repaint();
    }
}
    
function doJump() {
    if (play.y + play.s >= screen.height) {
        var impulse = gravity * 5;
        var y = setInterval(function () {
            if (impulse <= 0) {
                clearInterval(y);
            } 
            else {
                play.y -= impulse;
                impulse--;
                play.repaint();
            }
        }, 20);
    }
}
             
<!DOCTYPE html>
<html>
    <style>
        body { background-color: slateblue; margin-bottom: 0; }
        canvas { width: 100%; border: 2px solid black; background-color: lightgray; height:90% }
          * { text-align: center; user-select: none; }
        button { padding: 20px 59px; background-color: tomato; }
    </style>
<body>
    <canvas></canvas>
    <button id="left" ontouchstart="x_minus = setInterval(moveLeft, 30)" ontouchend="clearInterval(x_minus)"> LEFT </button>
    <button id="jump" onclick="doJump()"> JUMP </button>
    <button id="right" ontouchstart="x_plus = setInterval(moveRight, 30)" ontouchend="clearInterval(x_plus)"> RIGHT </button>        
    </body>
</html> 

He probado varias cosas, cómo modificar el código de los botones.

Tal vez podría ser el script de caída, pero no tiene sentido. Así que solo me podrían decir la solución

5
  • ¿Y qué pasa cuando te mueves en el aire?
    – Candid Moe
    Commented el 14 nov. a las 21:24
  • Hola Wscript, bienvenido, si necesitas ayuda, te sugiero que edites tu pregunta, y agregues un código (mínimo) que se pueda probar, una descripción del juego, y el comportamiento esperado tanto como el obtenido. Commented el 14 nov. a las 22:23
  • Cómo dije, se pega durante un corto lapso de tiempo. Y para hacer un código ejecutable, no se cómo hacerlo en dispositivos móviles
    – Wscript
    Commented el 15 nov. a las 0:04
  • Ejecutando el código, no se mueve de derecha a izquierda, pero parece que el salto funciona bien. ¿Podrías añadir pasos para reproducir el problema?
    – Alvaro Montoro
    Commented el 15 nov. a las 2:57
  • Ah perdón, solo hice una versión para dispositivos móviles. Si quieren que funcione en PC, solo tienen que cambiar "ontouchstart" y "ontouchend" por "onmousedown" y "onmouseup"
    – Wscript
    Commented el 15 nov. a las 10:31

1 respuesta 1

1

A menos que tu juego sea de animaciones fijas, no deberías usar setInterval. Una mejor solución es la que presenta este sitio. Consiste en crear un ciclo de juego con window.requestAnimationFrame. De esta manera obtienes una tasa de refresco constante sin bloquear la pestaña.

Y en el ciclo simularías las físicas con las fórmulas de cinemática que probablemente conozcas. Te doy un ejemplo simple. No es perfeto pero funciona. Ten en cuenta que para que la simulación sea más realista debes escalar el espacio adecuadamente. Sin escala, las medidas tienen unidad de pixeles, pixeles/s, pixeles/s², etc.

var x_minus;
var x_plus;
var gravity = 9.8;
let screen = document.querySelector("canvas");
let display = screen.getContext("2d");
display.fillStyle = "blue";
display.fillRect(0, screen.height - 30, 30, 30);
        
const play = {
    y: screen.height - 30,
    x: 0,
    s: 30,
    speedX: 0,
    speedY: 0,
    deltaTime: 0,
    lastTime: 0,
    repaint: function () {
        display.clearRect(0, 0, screen.width, screen.height);
        display.fillRect(this.x, this.y, this.s, this.s);
    }
};

function grounded(){
    return play.y >= screen.height - 30;
}

function doPhysics(){
    const avanceX = play.speedX * play.deltaTime;
    const avanceY = -play.speedY * play.deltaTime;
    if (play.x + avanceX >= 0 && play.x + avanceX < screen.width - 30) {
        play.x += avanceX;
    }
    if (play.y + avanceY >= 0 && play.y + avanceY < screen.height - 30) {
        play.y += avanceY;
    }

    if (grounded()){
        play.speedY = 0;
        play.y = screen.height - 30;

        if (Math.abs(play.speedX) > 0.02) play.speedX *= 0.9;
        else if (Math.abs(play.speedX) > 0) play.speedX = 0;
    }
    else {
        play.speedY -= gravity * play.deltaTime;
    }
}

window.requestAnimationFrame(gameLoop);

function gameLoop(time) {
    play.deltaTime = (time - play.lastTime) / 1000;
    play.lastTime = time;
    doPhysics();
    play.repaint();
    window.requestAnimationFrame(gameLoop);
}
<!DOCTYPE html>
<html>
    <style>
        body { background-color: slateblue; margin-bottom: 0; }
        canvas { width: 100%; border: 2px solid black; background-color: lightgray; height:90% }
          * { text-align: center; user-select: none; }
        button { padding: 20px 59px; background-color: tomato; }
    </style>
<body>
    <canvas></canvas>
    <button id="left" onclick="play.speedX -= 100"> LEFT </button>
    <button id="jump" onclick="play.speedY = 30"> JUMP </button>
    <button id="right" onclick="play.speedX += 100"> RIGHT </button>        
    </body>
</html> 

7
  • gracias, pero ahora corre muy lento y muy errático
    – Wscript
    Commented el 15 nov. a las 10:26
  • La razón es que al tratar de moverte en el aire, no puedes, solo acumula velocidad. Pero al tocar suelo, toda esa velocidad acumulada se ejecuta. Esa ejecución no me convence del todo, pero de todas formas gracias
    – Wscript
    Commented el 15 nov. a las 10:34
  • @Wscript como mencioné, las unidades están en píxeles. No es perfecto pero de forma similar se hacen los juegos. Es cuestión de pulir el código para obtener un resultado más convincente. O puedes usar un motor, framework o librería de creación de juegos como Phaser.
    – Mateo
    Commented el 16 nov. a las 5:13
  • No, usare código duro y puro 🧑🏻‍💻
    – Wscript
    Commented el 16 nov. a las 12:53
  • +10, con el código que me recomendaste más algunas modificaciones pude conseguir que funcionara. Fueron las siguientes: 1. Modificar los events de los botones, así puedes mantenerlos presionados; 2. Modificar el impulso de salto para que sea más alto; 3. Calcular screen.height en lugar de screen.width, no se cómo te confundiste entre los dos; 4. Modificar el deltaTime para que sea más rápido, no es muy recomendable, pero no es un juego, solo un experimento
    – Wscript
    Commented el 16 nov. a las 13:25

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.