title: Rendering solid objects in html canvas?
body: <p>I'm making an html5 canvas game, and I need to render some solid objects. It's a sort of sandbox game, and so here's how I was planning on doing it:<br></p>
  <ol>
  <li>Find out which square(s) the player is touching</li>
  <li>Check if surrounding squares are solid</li>
  <li>If so, do not let the player pass that point</li>
  <li>Repeat when the gameloop function does<br></li>
  </ol>
  <p>I'm sorry if you don't understand what I'm saying, but the ground is made up of squares that are the same size as the player's hitbox (meaning that the hitbox can't go inside a solid object). Hope this helps you understand.<br>
  <strong>Here's what I need:</strong><br>
  I can't find out how to detect all the squares around the one that the player is in. Here's my function so far:</p>
  <pre><code>function rendersolid() {
    var x = player.x;
    var y = player.y;
  
    var pass = {
    top: true;
    left: true;
    bottom: true;
    right: true;
  };
    if (map[x][y] == !undefined) {
    console.log(map[x][y]);
    }
    //check surrounding blocks (and if they're #)
    //change 'pass' variables to false if you CAN'T pass, else true
  
    //do not let the player pass that point
    //FYI, Math.floor(y - 1) is one square above the player, as the same with x is one left of the player
    if (pass.top == false &amp;&amp; player.y &lt; Math.floor(y - 1)) {
    player.y = Math.floor(y);
  } else if (pass.left == false &amp;&amp; player.x &gt; Math.floor(x + 1)) {
    player.x = Math.floor(x);
  } else if (pass.bottom == false &amp;&amp; player.y &gt; Math.floor(y + 1)) {
    player.y = Math.floor(y);
  } else if (pass.right == false &amp;&amp; player.x &lt; Math.floor(x - 1)) {
    player.x = Math.floor(x);
  }
  }
  </code></pre>
  <p>And I'm also unsure what to do if the player is touching two squares? Sorry if this is a terrible question, and thanks for reading through it. I hope you try to answer, and Thanks in advance!</p>
  <p><strong>EDIT:</strong>
  I'm so terribly sorry, but I forgot to mention that my map is an ASCII map, and here's the variable for it<br></p>
  <pre><code>var map = 
  `##................................................
  ##........'........................'..............
  ..'.''....'.....'..........'.''....'.....'........
  ....'...'....................'...'................
  ..'..'.....................'..'...................
  ...''.......................''....................
  ..'....'...'.....'.........'....'...'.....'.......
  .......'...........'............'...........'.....
  .......'......'.................'......'..........
  ....'........................'....................
  ...'..'...'.................'..'...'..............
  .......'......'....'............'......'....'.....
  ............'....'...'...............'....'...'...
  ...'....'..'...'............'....'..'...'.........
  ...'.....'......'...........'.....'......'........
  ..............'.'.....'................'.'.....'..
  ......'.....'...'..............'.....'...'........
  .......'.......'.......'........'.......'.......'.
  ....'......'.......'......'..'....................
  ..........'.'''''.'''..............'.'...'..'.....
  ...'.....'....'...'.........'...'......'..........
  .....'....'...'...'''.........'....'.........'....
  .....'.....'..'.....'.........'.....'........'....
  ...'......'...'...'''.......'......'...'...'......
  ........'...............'......'....'.............
  .......'.....''...........'.......'.........'.....
  ..........'.......'................'..............
  ..'.''....'.....'..........'.''....'.....'........
  ....'...'.......'...''.......'...'................
  ..'..'....'.......'....'...'..'...................
  ...''.......................''....................
  ..'....'...'.....'.........'....'...'.....'.......
  .......'...........'............'...........'.....
  .......'......'.................'......'..........
  ....'........................'....................
  ..........'.'...'.'................'.'.'...'.'....
  ...'.....'....'.............'.....'...'....'......
  .....'....'.........'.........'....'........'.....
  .....'.....'..'.....'.........'.....'.............
  ...'......'...'...'.........'......'...'...'.'....
  ...'..'...'.................'..'...'..............
  .......'......'....'............'......'....'.....
  ............'....'...'...............'....'...'...
  ...'....'..'...'............'....'..'...'.........
  ...'.....'......'...........'.....'......'........
  ..............'.'.....'................'.'.....'..
  ......'.....'...'..............'.....'...'........
  .......'.......'.......'........'.......'.......'.
  ....'......'.......'.........'......'.......'.....
  ..................................................`.split(&quot;\n&quot;);
  </code></pre>
  <br>
  And here's the colormap:
  <pre><code>var colorMap = {
  '.': &quot;#47CB00&quot;, //For grass
  '#': &quot;#000000&quot;, //Black, solid
  '+': &quot;#878787&quot;, //Grey
  '\'': &quot;#349500&quot;, //Darker green, for grass texture (ignore the '\')
  '0': &quot;#FFFFFF&quot;  //white
  };
  </code></pre>