好的，我正在制作 html 游戏。运动动画有问题（使用 gif）（不使用任何 js 库）

Question

当我向左或向右移动时，它会更改图像 src，因此角色会朝另一个方向看。但是代码的设置方式。一旦按住左或右，它会更改图像 src 但会导致您不断按住左或右，它会不断将图像 src 更改为相同的图像 src，从而不断重新启动 gif。这是代码笔的 link gif 不起作用，因为它保存在我的本地计算机上但有代码。

(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

实际上，您的代码中已经包含了所需的逻辑。让我们看看 press() 回调函数中的这段代码：

  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";
    }
  }

一旦 keyCode 等于键 A，您就将 left 设置为 true。我们需要修改这个条件，以便它只设置 left 到 true 如果它还不是真的，如果它是假的，改变 <img> 元素的 .src 属性.

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

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

附带说明：for-loop 似乎没有任何用途。

好的，我正在制作 html 游戏。运动动画有问题（使用 gif）（不使用任何 js 库）

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

html

javascript

css

gif

html5-canvas