Why is the player moving strangely?

Question

JavaScript

I'm making a game. I'm making a player move. But he moves very fast.
Here is the code

document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    x = 32;
    y = 32;
    xs = 0;
    ys = 0;
    up = 0;
    left = 0;
    right = 0;
    down = 0;
    radius = 500;
    color = 1;
    onground = 0;
    jump = 0;
    jumpcount = 30;
    map = [];
    blocks = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
    for(i=0;i<300;i++){
      if(blocks[i] == 1){
        map.push({x:xs,y:ys});
      } 
      xs+=32;
      if(xs >= 640){
        ys+=32;
        xs = 0;
      }
    }
    document.addEventListener("mousedown", function(e){
      x = e.pageX-32;
      y = e.pageY-32;
    });
    document.addEventListener("keydown", function(e){
      if(e.keyCode == 65){
        left = 1;
      }
      if(e.keyCode == 68){
        right = 1;
      }
    });
    document.addEventListener("keyup", function(e){
      if(e.keyCode == 65){
        left = 0;
      }
      if(e.keyCode == 68){
        right = 0;
      }
    });
    function draw(){
      xs = 0;
      ys = 0;
      ctx.clearRect(0,0,640,480);
      radius = 500;
      color = 1;
      for(i=0;i<5;i++){
      	ctx.fillStyle = "rgb(202,"+color+",250)";
        ctx.beginPath();
        ctx.arc(320,240,radius,0,2*Math.PI);
        ctx.fill();
        ctx.closePath();
        radius-=100;
        color+=50;
      }
      ctx.fillStyle = "yellow";
      ctx.fillRect(x,y,32,32);
      for(i=0;i<5;i++){
        if(onground == 0){
      	  y+=1;
        }
        for(j in map){
          if(x <= map[j].x && x+32 >= map[j].x && y <= map[j].y && y+32 >= map[j].y ||
          	 x <= map[j].x+32 && x+32 >= map[j].x+32 && y <= map[j].y && y+32 >= map[j].y){
            onground = 1;
            break
          }else{
            onground = 0;
          }
        }
      }
      for(i=0;i<5;i++){
        for(j in map){
          if(y <= map[j].y && y+32 >= map[j].y && x >= map[j].x+32 && x+32 >= map[j].x+32 ||
             y <= map[j].y+32 && y+32 >= map[j].y+32 && x >= map[j].x+32 && x+32 >= map[j].x+32){
            if(left == 1){
              x-=1;
            }
          }
        }
      }
      ctx.fillStyle = "black";
      for(i=0;i<300;i++){
        if(blocks[i] == 1){
          ctx.fillRect(xs,ys,32,32);
        }
        xs+=32;
        if(xs>= 640){
          xs = 0;
          ys+=32;
        }
      }
    }

    setInterval(draw,20);

It's strange that he did everything right.

Answer 1

Here such structure well test cleanly works.

for(i=0;i<5;i++){
        var left1 = 0;
        for(j in map){
          if(y <= map[j].y && y+32 >= map[j].y && x >= map[j].x+32 && x+32 >= map[j].x+32 ||
             y <= map[j].y+32 && y+32 >= map[j].y+32 && x >= map[j].x+32 && x+32 >= map[j].x+32){
            left1 = 1;
          }
        }
        if(left == 1 && left1 == 1){
          x-=1;
        }
      }