скорость моей анимации увеличивается, чем больше я нажимаю клавиши перемещения. Как я могу замедлить или постепенно увеличить его? - PullRequest
Новая
       5

скорость моей анимации увеличивается, чем больше я нажимаю клавиши перемещения. Как я могу замедлить или постепенно увеличить его?

0 голосов
/ 03 октября 2019

Итак, я создаю простую игру на языке mario в браузере, используя 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();""

1 Ответ

1 голос
/ 03 октября 2019

Вам следует рассмотреть возможность отсоединения функции рисования от пользовательского ввода. Обработчик события keydown должен только обновлять позицию Марио. Ваша функция рисования должна вызываться в цикле и просто отображать текущую позицию на каждой итерации. Таким образом, ваша скорость анимации не будет зависеть от скорости пользовательского ввода.

...