Javascript -->moving character Issue

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>

The problem is that when i am pressing the arrow keys mario moves but the grass,dirt,water images disapper and the only thing remaining is mario moving in a canvas. That problem is solved if i type in the move function canvas.width=canvas.width but then mario moves leaving highlights of his previous positions on the canvas.

score 1 · Answer 1 · edited Jul 29 '18 at 03:50

1

To stop your Mario image from leaving streaks, you can clear your canvas each time you change Mario's position, and redraw the map (with Mario on top).

But right now, your drawMap() function modifies the global x- and y-coordinates when it draws the map, which makes it impossible to track Mario's position if we try to call drawMap() every time. So it needs to be modified first, to use just some temporary local variables:

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

Now, we can draw the map without overwriting Mario's position. Note that I pulled out the drawing of Mario from this function, so the other parts of your code that need to change are:

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

And, change your current move() function to:

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

Here's a JSFiddle to demonstrate. The reason I removed canvas.width = canvas.width for clearing the canvas is due to the problems with this method cited in another StackOverflow question.

edited Jul 29 '18 at 03:50

Bhargav Rao

50,140
28
121
140

answered Sep 02 '15 at 15:23

Serlite

12,130
5
38
49

Thanks a lot for the answer. – Nick Green Sep 02 '15 at 17:55
Thanks a lot for the answer. Unfortunately it doesnt't work it just moves the horizantal and the vertical line of pictures from mario's starting coordinates ... function move(e){ //[...] context.drawImage(mario,xpos,ypos,50,50); context.clearRect(0, 0, canvas.width, canvas.height); drawMap(); } – Nick Green Sep 02 '15 at 18:02
Actually i get the same result as function move(e){//[....] canvas.width=canvas.width; context.drawImage(mario,xpos,ypos,50,50); drawMap(); } – Nick Green Sep 02 '15 at 18:04
All right, I see. Let me make an edit to my answer. – Serlite Sep 02 '15 at 18:11
Thank you vey much my problem is solved now !!! – Nick Green Sep 02 '15 at 18:27
@NickGreen Great, glad I could help you out! Be sure to accept the answer if it gave you the working solution - that way, others can know that your question has been answered. – Serlite Sep 02 '15 at 18:36
I have a question though. Could you please explain why you put two different variables in the draw map function ? – Nick Green Sep 03 '15 at 11:11
@NickGreen Because it looked like you were using the `xpos` and `ypos` variables to store Mario's position, since those were the reference coordinates you were using to draw Mario. However, your original `drawMap()` function modified those two variables when it was drawing your map elements, ultimately resetting them back to 0. As a result, every time `drawMap()` was called, Mario's position would get overwritten. That was why I had the function use a couple local variables instead, so the global ones (containing Mario's position) would be preserved. – Serlite Sep 03 '15 at 16:15

Javascript -->moving character Issue

1 Answers1