Keyboard Movement Acting Weird

[OhNoItsATornahdo]

So, I implemented keyboard movement into my game:

PIXI.loader
  .add(rooms[0].imageName, rooms[0].image)
  .add(rooms[1].imageName, rooms[1].image)
  .add(rooms[2].imageName, rooms[2].image)
  .add(player.imageName, player.sprite)
  .load(setup);

function setup() {
  loadRoom(0);
  animationloop();
}

function animationloop() {
  requestAnimationFrame(animationloop);
  document.addEventListener('keydown', function(event) {
    if (event.keyCode == 68) {
      player.x += 1;
    } else if (event.keyCode == 65) {
      player.x -= 1;
    }
    if (event.keyCode == 87) {
      player.y -= 1;
    } else if (event.keyCode == 83) {
      player.y += 1;
    }
  });
  renderer.render(stage);
}

Here is the player in it's starting position:

Then I press (technically, I tapped) 'D':

So everything looks okay right now, but if I press 'D' once again:

How did my player go from the side of the bed to the front of the computer in one tap? It just keeps going; my player teleports farther and farther as I press 'D' or any other button that moves my player.

 

Could someone please help me?

[xerver]

Because every animation loop you are adding a new event listener for keydown. Each frame you are adding a new function that will add 1 to the X coord of you character. So by time you press 'D' there are a ton of listeners added and they all are adding 1.