How can I make my movement continuous?

Question

I'm making a game with simple movement code. I don't want the movement to be too complex since it's going to be a small game once it's done.

Right now the character moves 10 units at a time, then stops, then 10 units, then stops, and this looks jerky.

I'd like the character to move continuously, without stopping in between. I tried lowering the playerSpeed to make it less jerky, but then the character moved too slowly and players got bored. Instead I want the character to move a little every frame, not a big jump with delays in between.

Here's what I've tried so far:

playerSpeed = 10;

document.addEventListener('keydown', function(e){
 if(e.key === 'w' && playerY >= 5){
  playerY-= playerSpeed;
  ctx.clearRect(0, 0, outerWidth, outerHeight);
  drawProtagonistFacingUp();
} 
 if(e.key == 'd' && playerX < outerWidth - 50){
  playerX+= playerSpeed;
  ctx.clearRect(0,0,outerWidth, outerHeight);
  drawProtagonistFacingRight();
}

if(e.key == 's' && playerY < outerHeight - 100){
 playerY+= playerSpeed;
 ctx.clearRect(0,0,outerWidth, outerHeight);
 drawProtagonistFacingDown();
}

if(e.key == 'a' && playerX > 5){
  playerX-= playerSpeed;
 ctx.clearRect(0, 0,outerWidth, outerHeight);
 drawProtagonistFacingLeft();
}
});

Answer 1

The movement isn't smooth because you only move your character when the keydown event is emitted which occurs at most a few times per second (I'm not sure how often exactly).

What you want to do instead is, have a boolean variable which tells you whether a key has been pressed (set to true on keydown, false on keyup). In your main game loop, if the variable is set to on, you would then move the player by playerSpeed * timeDelta (difference in time between now and the previous iteration, which you can calculate using getTime).