javascript - Javascript->移动字符问题

Closed. This question needs debugging details。它当前不接受答案。












                    想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                    2年前关闭。

<html>

<head>
  <title>TileMap2</title>
  <style>
    #canvas {
      outline: 3px solid black;
    }
  </style>
</head>

<body>
  <canvas id="canvas" height="400" width="1000"></canvas>
  <script>
    window.onload = function() {
      drawMap();
    }

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.width = "1000";
    canvas.height = "400";

    var xpos = 0;
    var ypos = 0;
    var grass = new Image();
    var water = new Image();
    var dirt = new Image();
    var mario = new Image();

    mario.src = 'Mario.png';
    grass.src = 'grass1.jpg';
    water.src = 'water.jpg';
    dirt.src = 'dirt.jpg';

    var map = [
      [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1]

    ];

    function drawMap() {
      for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {

          if (parseInt(map[i][j]) == 0) {
            context.drawImage(grass, xpos, ypos);
          }

          if (parseInt(map[i][j]) == 1) {
            context.drawImage(dirt, xpos, ypos)
          };
          if (parseInt(map[i][j]) == 2) {
            context.drawImage(water, xpos, ypos);
          }
          xpos += 100;
        }
        xpos = 0;
        ypos += 100;
      }
      xpos = 0;
      ypos = 0;
      context.drawImage(mario, xpos, ypos, 50, 50);
    }

    function move(e) {
      if (e.keyCode == 39) {
        xpos += 50;
      }
      if (e.keyCode == 37) {
        xpos -= 50;
      }
      if (e.keyCode == 38) {
        ypos -= 50;
      }
      if (e.keyCode == 40) {
        ypos += 50;
      }

      canvas.width = canvas.width;
      context.drawImage(mario, xpos, ypos, 50, 50);

    }
    document.onkeydown = move;
  </script>
</body>

</html>

问题是，当我按箭头键时，马里奥移动，但草地，污垢，水图像消失，唯一剩下的就是马里奥在画布上移动。如果我输入移动功能canvas.width = canvas.width，然后马里奥移动了，则在画布上留下了他以前的位置的亮点，从而解决了这个问题。

最佳答案

要阻止Mario图像留下条纹，您可以在每次更改Mario的位置时清除画布，然后重新绘制地图（Mario在顶部）。

但是，现在，您的drawMap()函数在绘制地图时会修改全局x坐标和y坐标，因此如果我们每次尝试调用drawMap()，都无法跟踪Mario的位置。因此，需要首先对其进行修改，以仅使用一些临时局部变量：

function drawMap() {
  var localX = 0;
  var localY = 0;

  for (var i = 0; i < map.length; i++) {
    for (var j = 0; j < map[i].length; j++) {

      if (parseInt(map[i][j]) == 0) {
        context.drawImage(grass, localX, localY);
      }

      if (parseInt(map[i][j]) == 1) {
        context.drawImage(dirt, localX, localY)
      };
      if (parseInt(map[i][j]) == 2) {
        context.drawImage(water, localX, localY);
      }
      localX += 100;
    }
    localX = 0;
    localY += 100;
  }
}

现在，我们可以绘制地图而不会覆盖Mario的位置。请注意，我从此函数中提取了Mario的图形，因此代码中需要更改的其他部分是：

window.onload = function() {
  drawMap();
  context.drawImage(mario, xpos, ypos, 50, 50);
}

并且，将当前的move()函数更改为：

function move(e) {
  if (e.keyCode == 39) {
    xpos += 50;
  }
  if (e.keyCode == 37) {
    xpos -= 50;
  }
  if (e.keyCode == 38) {
    ypos -= 50;
  }
  if (e.keyCode == 40) {
    ypos += 50;
  }

  context.clearRect(0, 0, canvas.width, canvas.height);
  drawMap();
  context.drawImage(mario, xpos, ypos, 50, 50);
}

这是一个JSFiddle演示。我删除canvas.width = canvas.width清除画布的原因是由于another StackOverflow question中引用的此方法的问题。