Медленная производительность с холстом javascript/html

Question

Итак, я создал себе небольшую демонстрацию с холстом javascript/html в контексте игры gameloop. Вы можете перемещать небольшой квадрат, нажимая клавиши w, a, s, d. Однако, когда удерживается более 3 или 4 секунд, холст становится заикающимся, и квадрат почти перестает двигаться.

Вот javascript;

// -------------------------------------------------------------------- 
// -- MAIN GAME LOOP 
// -------------------------------------------------------------------- 
function gameLoop(){ 
    update(); 
    render(); 
    requestAnimationFrame(gameLoop); 
} 

function update(){ 
    processInput(); 
}; 
function render(){ 
    var canvas = document.getElementById('viewport'); 
    var ctx = canvas.getContext('2d'); 

    if(upDown){ 
     rect.top -= rect.speed; 
    }else if(downDown){ 
     rect.top += rect.speed; 
    }else if(leftDown){ 
     rect.left -= rect.speed; 
    }else if(rightDown) { 
     rect.left += rect.speed; 
    } 

    ctx.clearRect(0, 0, 1024, 768); 
    ctx.beginPath(); 
    ctx.rect(rect.left, rect.top, 50, 50, true); 
    ctx.closePath(); 
    ctx.fill(); 
}; 

var rect = { 
    top: 0, 
    left: 0, 
    speed: 5 
}; 

// -------------------------------------------------------------------- 
// -- OTHER FUNCTIONS 
// -------------------------------------------------------------------- 
var rightDown = false; 
var leftDown = false; 
var upDown = false; 
var downDown = false; 

function processInput(){ 
    $(document).keydown(function(e){ 
     console.log(e.keyCode); 
     if(e.keyCode == 87){upDown = true;} 
     if(e.keyCode == 83){downDown = true;} 
     if(e.keyCode == 68){rightDown = true;} 
     if(e.keyCode == 65){leftDown = true;} 
    }).keyup(function(){ 
     upDown = false; 
     downDown = false; 
     rightDown = false; 
     leftDown = false; 
    }) 
} 

$(document).ready(function(){ 
    requestAnimationFrame(gameLoop); 
}); 

У кого-нибудь есть идеи?

Вот мой кодфель;

http://codepen.io/anon/pen/wKGJOr

Answer 1

Проблема в том, что вы звоните processInput (через update) в вашем gameloop. Эта функция связана с новыми keydown и keyup обработчиками событий каждый раз, когда это называется. Нужно только называть его один раз. Удалить вызов из update, и (например) называют его в ready функции вместо:

$(document).ready(function(){ 
    processInput(); 
    requestAnimationFrame(gameLoop); 
}); 

Регистрируясь все больше и больше обработчиков событий, в результате чего вы намного больше коды для запуска, чем необходимо, следовательно, заикание.

Updated codepen.