Así que estoy creando un juego de mario simple en el navegador usando lienzo y todo va bien hasta ahora, excepto por el hecho de que mi lienzo se acelera como loco a medida que avanza el juego.

"var marioX = 283 ;
var marioY = 365 ;
var gravityfunction = function (){
    if (marioY <365){
        marioY += 0.5 
    } else{
        marioY = marioY;
    }
}



bg.src = "/images/background.png";
playerLeftImg.src = "images/marioleft.png";
playerRightImg.src = "images/marioright.png";
obstacle.src = "images/obstacle.png"

Llamado un detector de eventos a continuación:

window.addEventListener("keydown", moveSquare, false);

// Create Obstacles 
var obstacles = [];

obstacles[0] = {
    x: 925,
    y: 280,
}
//Game Over Function 
function gameOver(){
    if(marioX === obstacleX && marioY === 365){
        alert("game over")
    }
}
// Game function: to draw out everything

Mi función de dibujo que básicamente anima todo. ¿Asumo que tengo que agregar algo a esto para solucionar el problema?

function draw(){

c.clearRect(0,0,canvas.width,canvas.height);

c.drawImage(bg,0,0,canvas.width, canvas.height);


//create a for loop to create obstacles 
    for(let i=0; i<obstacles.length; i++){

    c.drawImage(obstacle,obstacles[i].x,360, 50, 30);

    obstacles[i].x -= 1;

    if(obstacles[i].x==310){
        obstacles.push({
            x : 925,
            y : 280,
        })
    }
}

    c.drawImage(playerRightImg, marioX ,marioY);

    requestAnimationFrame(draw);  
    gravityfunction();
    gameOver();
};
draw();

Esta es la función que escucha mi evento y decide qué acción tomar

function moveSquare(e){
    e.preventDefault();
    switch(e.keyCode){
    case 37:
        // left key is pressed
        if(marioX > 0) {
            marioX -= 70;
            marioY-=0;
            console.log(marioX)
        } else if (marioX<= 0){
            marioX-= 0
            marioY -= 0
        }
        draw();
        break;
    case 32:
        // space key is pressed
        if(marioY > 0){
            (marioY-= 160);
            marioX += 0;
        } else if(marioY <=0){
            marioY -= 0;
            marioX -= 0;
        }
        draw();

        break;
    case 39:
        // right key is pressed
        if(marioX < 925 ){
            marioY+= 0;
            marioX += 70;
            console.log(marioX)
        } else if(marioX >= 925){
            marioY -= 0;
            marioX += 0;
            console.log(marioX)
        }
        draw();

        break;
    case 40:
        if(marioY < 365){
            marioY += 70;
            marioX -=0;
            console.log(marioY)
        } else if(marioY >= canvas.height){
            marioY -= 0;
            marioY -=0;
        }
        draw();
        // down key is pressed
        break;
        };
        }

        draw();""
0
Adil Khan 3 oct. 2019 a las 08:38

1 respuesta

La mejor respuesta

Debería considerar separar la función de dibujo de la entrada del usuario. El controlador de eventos keydown solo debería actualizar la posición de Mario. Su función de dibujo debe llamarse en un bucle y simplemente representar la posición actual en cada iteración. De esta forma, la velocidad de su animación no dependerá de la velocidad de entrada del usuario.

1
giuseppedeponte 3 oct. 2019 a las 06:17