title: Invisible barrier from old code in javascript
body: <p>i am making a ray casting game in JavaScript, and everything working, except when i changed the canvas and the map size,There was an invisble barrier i previously had a barrier in this spot, (the green line)<a href="https://i.stack.imgur.com/TdkZE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TdkZE.jpg" alt="enter image description here" /></a></p>
  <p>but i have since removed that code and cant find any code that would be making a barrier there. Can some please help, it should be a pretty easy fix i must just be overlooking something, i tried clearing my cache, hard reload, but nothing worked. Here is the code (use wasd to control the player)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;canvas width="600px" height="400px" id="c"&gt;&lt;/canvas&gt;
      &lt;/body&gt;
      &lt;script&gt;
  c = document.getElementById("c");
  w = c.width;
  h = c.height;
  ctx = c.getContext("2d");
  var tilesize = 50;
  var walls = [];
  var rays = [];
  rayangle = 1;
  lowrayangle = -1;
  
  var player = {
      x: 80,
      y: 80,
      size: 10,
      speed: 0.5,
      dir: 0,
      rot: 0,
      rotSpeed: 0.02,
      rotDir: 0,
  }
  
  var map = []
  
  
  
  
  for (y = 0; y &lt; map.length; y++) {
      for (x = 0; x &lt; map[y].length; x++) {
  
          ctx.fillStyle = ["white", "black"][map[y][x]];
          ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);
  
          if (map[y][x] == 1) {
              var wallSeg = {
                  coordX: x * tilesize,
                  coordY: y * tilesize,
                  sizeX: tilesize,
                  sizeY: 0,
              }
              var wallSeg2 = {
                  coordX: x * tilesize,
                  coordY: y * tilesize,
                  sizeX: 0,
                  sizeY: tilesize,
              }
              var wallSeg3 = {
                  coordX: x * tilesize,
                  coordY: (y * tilesize) + tilesize,
                  sizeX: tilesize,
                  sizeY: 0,
              }
              var wallSeg4 = {
                  coordX: (x * tilesize) + tilesize,
                  coordY: y * tilesize,
                  sizeX: 0,
                  sizeY: tilesize,
              }
              walls.push(wallSeg)
              walls.push(wallSeg2)
              walls.push(wallSeg3)
              walls.push(wallSeg4)
  
          }
      }
  }
  
  
  
  
  function keydown(event) {
      switch (event.keyCode) {
          case 87:
              player.dir = 1;
              break;
          case 83:
              player.dir = -1;
              break;
          case 68:
              player.rotDir = -1;
              break;
          case 65:
              player.rotDir = 1;
              break;
      }
  
  }
  
  function keyup(event) {
      switch (event.keyCode) {
          case 87:
              player.dir = 0;
              break;
          case 83:
              player.dir = 0;
              break;
          case 68:
              player.rotDir = 0;
              break;
          case 65:
              player.rotDir = 0;
              break;
      }
  
  }
  
  window.requestAnimationFrame(update)
  
  function update() {
      var map = []
      var map = [
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,],
      [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1,],
      [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1,],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,],
      [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,],
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,]
  ]
      ctx.clearRect(0, 0, w, h);
      rays = [];
      //move
  
  
      rotstep = player.rotSpeed * player.rotDir
      movestep = player.speed * player.dir;
      player.rot += rotstep;
      rayangle += rotstep;
      lowrayangle += rotstep;
      newY = player.y - Math.cos(player.rot) * movestep;
      newX = player.x - Math.sin(player.rot) * movestep;
  
      leftbY = (player.y - 10) - Math.cos(player.rot) * movestep;
      leftbX = (player.x - 10) - Math.sin(player.rot) * movestep;
      rightbY = (player.y + 10) - Math.cos(player.rot) * movestep;
      rightbX = (player.x + 10) - Math.sin(player.rot) * movestep;
  
  
  
      //borders 
      var leftcol = Math.floor((leftbX) / tilesize)
      var leftrow = Math.floor((leftbY) / tilesize)
      var rightcol = Math.floor((rightbX) / tilesize)
      var rightrow = Math.floor((rightbY) / tilesize)
      if (map[rightcol][rightrow] == 0 &amp;&amp; map[leftcol][leftrow] == 0) {
          player.y = newY;
          player.x = newX;
      }
  
      //map
      for (y = 0; y &lt; map.length; y++) {
          for (x = 0; x &lt; map[y].length; x++) {
  
              ctx.fillStyle = ["white", "black"][map[y][x]];
              ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);
  
          }
      }
  
  
  
      //rays  
  
      for (i = lowrayangle; i &lt; rayangle; i += 0.03) {
  
          var detail = 0.05;
          var rayLn = 1000;
          var memX;
          var memY;
          for (j = 0; j &lt; rayLn; j += detail) {
              var lY = player.y - Math.cos(i) * j;
              var lX = player.x - Math.sin(i) * j;
  
              memX = lX;
              memY = lY;
  
              lX = lX - (lX % tilesize);
              lY = lY - (lY % tilesize);
  
              if (map[lY / tilesize][lX / tilesize] == 1) {
                  break;
              }
          }
  
          var ray = {
              rayAngle: i,
              newY: memY,
              newX: memX,
              x: player.x,
              y: player.y
          }
          rays.push(ray)
      }
      for (i = 0; i &lt; rays.length; i++) {
          ctx.beginPath();
          ctx.moveTo(rays[i].x, rays[i].y)
          ctx.lineTo(rays[i].newX, rays[i].newY)
          ctx.stroke();
      }
      //player
      markerY = player.y - Math.cos(player.rot) * 30;
      markerX = player.x - Math.sin(player.rot) * 30;
      ctx.fillStyle = "red";
      ctx.beginPath();
      ctx.ellipse(player.x, player.y, player.size, player.size, player.rot * (Math.PI / 180), 0, 2 * Math.PI);
      ctx.fill();
      
      window.requestAnimationFrame(update)
  }
  
  document.addEventListener("keydown", function(event) {
      keydown(event);
  })
  document.addEventListener("keyup", function(event) {
      keyup(event);
  })
      &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>