Question

<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，那么问题就解决了，但是马里奥会在画布上移动以前位置的高光。

Answer 1

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

但是现在，你的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的绘图，因此代码的其他部分需要更改：

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中引用的此方法存在问题。

Javascript - ＆gt;移动角色问题

1 个答案: