Почему движение моего персонажа не кажется правильным?

Question

Я пытался использовать некоторый код для перемещения моего персонажа на холсте, но по какой-то причине движение очень грубое. Когда я нажимаю клавиши перемещения, персонаж немного двигается, а затем начинает двигаться нормально. Есть ли способ сделать начальное нажатие клавиши более плавным? Вот код, который я использую:

var posX = 0;
var posY = 240;

var velX = 0;
var velY = 3;

document.addEventListener("keydown", function(event) {
    if (event.keyCode == "68") {
        velX = 3;
        posX += velX;
    }else if (event.keyCode == "65") {
        velX = 3;
        posX -= velX;
    }
});

Вот живая демонстрация: https://codepen.io/Twickz/pen/WmPWae

Кроме того, velX и velY - это скорость, а posX и posY - позиции для моего персонажа.

Answer 1

Я думаю, что буфер клавиатуры неисправен.

Одним из решений было бы обойти это: событие нажатия клавиши только запускает движение, и затем вы продолжаете перемещать своего персонажа внутри цикла (setInterval или requestAnimationFrame), пока не произойдет нажатие клавиши.

Примерно так (анимация, возможно, грубая, но работает как PoC): https://codepen.io/anon/pen/VRgNrQ

Answer 2

Вы пробовали с нажатием клавиши ... нажатие клавиши это зло