javascript - 我按移动键的次数越多，动画的速度就越快。我怎样才能减慢或逐渐增加它？

Question

所以我正在使用 Canvas 在浏览器中创建一个简单的马里奥游戏，到目前为止一切都很顺利，除了我的 Canvas 随着游戏的进展而疯狂加速这一事实。

"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"

在下面调用了一个事件监听器:

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

我的绘制函数基本上将所有内容都动画化了。我假设我必须添加一些东西来解决这个问题？

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();

这是监听我的事件并决定采取什么操作的函数

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();""

Answer 1

您应该考虑将绘图函数与用户输入分离。keydown 事件处理程序应该只更新 Mario 的位置。您的绘制函数应该在循环中调用，并在每次迭代时渲染当前位置。这样，您的动画速度将不依赖于用户输入的速度。