ok so im making a html game. am having trouble with movement animation (using a gif) (not using any js libraries)

Question

when I move left or right it changes the image src so the character is looking the other direction. but the way the code is set. once holding down left or right it changes the image src but cause your constantly holding down left or right its constantly changing the image src to the same one which keeps restarting the gif. Here is the link to the code pen the gifs don't work because its saved locally on my computer but there is the code.

(function() {
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

  // resize the canvas to fill browser window dynamically
  window.addEventListener("resize", resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    /**
     * Your drawings need to be inside this function otherwise they will be reset when
     * you resize the browser window and the canvas goes will be cleared.
     */
    drawStuff();
  }
  resizeCanvas();

  function drawStuff() {
    // do your drawing stuff here

    var up = false,
      right = false,
      down = false,
      left = false,
      x = window.innerWidth / 2 - 130 / 2,
      y = window.innerHeight / 2 - 130 / 2;

    document.addEventListener("keydown", press);

    function press(e) {
      if (e.keyCode === 87 /* w */ ) {
        up = true;
      }

      if (e.keyCode === 83 /* S */ ) {
        down = true;
      }

      if (e.keyCode === 65 /* A */ ) {
        left = true;

        // 1 for loop
        for (let i = 0; i < 1; i++) {
          // block of code
          document.getElementById("girl flying").src =
            "sprites/characters/girl flying left.gif";
        }
      }

      if (e.keyCode === 68 /* D */ ) {
        right = true;

        // 1 for loop
        for (let i = 0; i < 1; i++) {
          // block of code
          document.getElementById("girl flying").src =
            "sprites/characters/girl flying right.gif";
        }
      }
    }

    document.addEventListener("keyup", release);

    function release(e) {
      if (e.keyCode === 87 /* w */ ) {
        up = false;
      }

      if (e.keyCode === 83 /* S */ ) {
        down = false;
      }

      if (e.keyCode === 65 /* A */ ) {
        left = false;
        document.getElementById("girl flying").src =
          "sprites/characters/girl flying left.gif";
      }

      if (e.keyCode === 68 /* D */ ) {
        right = false;
        document.getElementById("girl flying").src =
          "sprites/characters/girl flying right.gif";
      }
    }

    function gameLoop() {
      var img = document.querySelector("img");
      if (up) {
        y = y - 5;
      }
      if (right) {
        x = x + 5;
      }
      if (down) {
        y = y + 5;
      }
      if (left) {
        x = x - 5;
      }
      img.style.left = x + "px";
      img.style.top = y + "px";

      window.requestAnimationFrame(gameLoop);
    }
    window.requestAnimationFrame(gameLoop);
  }
})();

* {
  margin: 0;
  padding: 0;
}


/* to remove the top and left whitespace */

html,
body {
  width: 100%;
  height: 100%;
}


/* just to be sure these are full screen*/

canvas {
  display: block;
}


/* To remove the scrollbars */

body {
  background: linear-gradient( 180deg, hsl(255, 75%, 50%) 0%, hsl(196, 90%, 50%) 100%);
  background-size: 100vw 100vh;
}

img {
  position: fixed;
  font-size: 130px;
}

<img id="girl flying" src="sprites/characters/girl flying left.gif">

<canvas id="canvas"></canvas>

Answer 1

Actually you already have the required logic right inside your code. Let's look at this bit of code inside your press() callback function:

  if (e.keyCode === 65 /* A */ ) {
    left = true;

    // 1 for loop
    for (let i = 0; i < 1; i++) {
      // block of code
      document.getElementById("girl flying").src =
        "sprites/characters/girl flying left.gif";
    }
  }

Here you're setting left to true as soon as the keyCode equals the key A. We need to modify this condition, so that it only sets left to true if it isn't true yet and in case it's false, change the <img> element's .src attribute.

    if (e.keyCode === 65 /* A */ ) {
        if (!left) {
            left = true;

            document.getElementById("girl flying").src =
                "sprites/characters/girl flying left.gif";
        }
    }

As a side note: the for-loop doesn't seem to have any purpose.