HTML5/Javascript - My user-triggered canvas animation choppy

Question

У меня простая концепция. Когда игрок нажимает W, A, S или D, изображение на холсте движется соответственно. Однако это приводит к очень прерывистой анимации, и я не уверен, почему (хотя я думаю, что это как-то связано с моими слушателями событий). Ниже мой код.

var playerXPos = 10; 
var playerYPos = 10; 
var playerImg = new Image(); 
playerImg.src = "knight.png"; 

function mainGameLoop(){ 
    window.requestAnimationFrame(mainGameLoop); 
    c = document.getElementById("gameCanvas").getContext("2d"); 


    c.clearRect(0,0,1000,500); 

    c.drawImage(playerImg,playerXPos,playerYPos); 
} 
window.requestAnimationFrame(mainGameLoop); 


    window.addEventListener("keydown", onKeyDown, false); 
    window.addEventListener("keyup", onKeyUp, false); 
    window.addEventListener("keypress", onKeyPress, false); 

    function onKeyDown(e){ 
     var keyCode = e.keyCode; 
     switch(keyCode){ 
      case 87: //w 
       onKeyW(); 
      break; 
      case 65: //a 
       onKeyA(); 
      break; 
      case 83: //s 
       onKeyS(); 
      break; 
      case 68: //d 
       onKeyD(); 
      break; 
     } 



function onKeyW(){ 
    playerYPos -= 5; 
} 
function onKeyA(){ 
    playerXPos -= 5; 
} 
function onKeyS(){ 
    playerYPos += 5; 
} 
function onKeyD(){ 
    playerXPos += 5; 
} 

Почему это делается? Любая помощь приветствуется!

EDIT: Как примечание стороны, я сделал это, прежде чем использовать булевы (когда кнопка ш нажата keyW переменная становится истинным, а в mainGameLoop есть if(keyW == true){playerYPos -= 5;})

Jsfiddle

Answer 1

Здесь вы найдете: jsFiddle

Вы не хотите менять позицию в каждом ключевом событии. Кроме того, вам нужно учитывать время между кадрами. Добавление любого статического количества на кадр всегда будет неустойчивым, поскольку один кадр может составлять 30 мс с последнего или может составлять 60 мс, в зависимости от многих факторов.

var playerXPos = 10; 
var playerYPos = 10; 
var playerSpeed = 0.3; // this is in pixels per ms 

var aPressed = false; 
var wPressed = false; 
var sPressed = false; 
var dPressed = false; 
var lastTime = null; 
function mainGameLoop(timestamp) { 
    var delta = timestamp - (lastTime || timestamp); 

    if(aPressed){ 
     playerXPos -= playerSpeed * delta; 
    } 
    if(dPressed){ 
     playerXPos += playerSpeed * delta; 
    } 
    if(wPressed){ 
     playerYPos -= playerSpeed * delta; 
    } 
    if(sPressed){ 
     playerYPos += playerSpeed * delta; 
    } 

    window.requestAnimationFrame(mainGameLoop); 
    c = document.getElementById("gameCanvas").getContext("2d"); 

    c.clearRect(0, 0, 1000, 500); 
    player(); 
    lastTime = timestamp; 
} 
window.requestAnimationFrame(mainGameLoop); 

function player() { 
    var playerImg = new Image(); 
    //playerImg.src = "knight.png"; 
    c.fillRect(playerXPos, playerYPos,100,100); 
} 

function onKeyW(pressed) { 
    wPressed = pressed; 
} 

function onKeyA(pressed) { 
    aPressed = pressed; 
} 

function onKeyS(pressed) { 
    sPressed = pressed; 
} 

function onKeyD(pressed) { 
    dPressed = pressed; 
} 

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

function onKeyDown(e) { 
    var keyCode = e.keyCode; 
    switch (keyCode) { 
     case 87: 
      //w 
      onKeyW(true); 
      console.log("bro"); 
      break; 
     case 65: 
      //a 
      onKeyA(true); 
      break; 
     case 83: 
      //s 
      onKeyS(true); 
      break; 
     case 68: 
      //d 
      onKeyD(true); 
      break; 
    } 
} 

window.addEventListener("keyup", onKeyUp, false); 

function onKeyUp(e) { 
    var keyCode = e.keyCode; 
    switch (keyCode) { 
     case 87: 
      //w 
      onKeyW(false); 
      console.log("bro"); 
      break; 
     case 65: 
      //a 
      onKeyA(false); 
      break; 
     case 83: 
      //s 
      onKeyS(false); 
      break; 
     case 68: 
      //d 
      onKeyD(false); 
      break; 
    } 
}