title: Javascript Pac-Man collision detection
body: <p>Background info: I'm a beginner with Canvas, javascript, and jQuery, and overall game development. This is my first non-text game. </p>
  
  <p>I have been working on this problem for a couple of days, and have hit 2 walls, of which I believe are connected. I'll describe the problems here, then give you the code; </p>
  
  <ol>
  <li><p>When I draw the tiles onto the canvas, the board seems to be mirrored. I'm not sure why this is, but I can't seem to fix it. </p></li>
  <li><p>I have mapped out the available routes for my character to go, but collision detection only works going up and down, but not going left and right. </p></li>
  </ol>
  
  <p>Here's the code: </p>
  
  <pre><code>var TILE_WIDTH = 32, TILE_HEIGHT = 32, TICK_SPEED = 1000/30;
  var playerimg = new Image(), ghostimg = new Image(), walkableimg = new Image(), wallimg = new Image(); 
  
  playerimg.src = "player.png";
  ghostimg.src = "ghost.png";
  walkableimg.src = "walkable.png";
  wallimg.src = "wall.png";
  
  
  var map = [
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,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,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,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]
  
  
  
  ]
  
  var spawnx = 128, spawny = 128;
  
  
  var player = {direction: "right",image: playerimg, x:spawnx, y: spawny, xdir: spawnx, ydir: spawny}, ghost = {image:ghostimg, x:128 , y:128}, wall = {walkable: false,image: wallimg}, walkable = {walkable: true, image: walkableimg}; 
  
  
  function main(){
      setInterval(
  
          function(){
  
              tick();
          }, TICK_SPEED)
  
  }
  
  
  function collisionDetect(direction){
      if(direction = "up" &amp;&amp; map[(player.ydir/32)][(player.xdir/32)] == 0){
          player.y = player.ydir; //up    
          console.log("moved up");
  
  
      } else if(direction = "down" &amp;&amp; map[(player.ydir/32)][(player.xdir32)] == 0){
          player.y = player.ydir; //down
          console.log("moved down");
  
  
      } else if(direction = "left" &amp;&amp; map[player.ydir/32][(player.xdir/32)] == 0){
          player.x = player.xdir; //left
          console.log("moved left");
  
      } else if(direction = "right" &amp;&amp; map[player.ydir/32][(player.xdir/32)] == 0){
          player.x = player.xdir; //right
          console.log("moved right ");
      } 
  
      player.xdir = player.x;
      player.ydir = player.y;
  }
  
  function solidDetect(block){
  
  }
  
  
  
  function render(){
      var field = document.getElementById("draw");
      var ctx = field.getContext("2d");
      renderField();
      renderPlayer();
  
  }  
  
  function renderPlayer(){
      var field = document.getElementById("draw");
      var ctx = field.getContext("2d");
      console.log(player.x,player.y,player.xdir,player.ydir);
      ctx.drawImage(player.image,player.x,player.y);
      ctx.rect(player.x,player.y,10,10);
      ctx.stroke();
  }
  
  function renderField(){
      var field = document.getElementById("draw");
      var ctx = field.getContext("2d");
  
      for(var i = 0; i &lt; 20; i++){
          for(var j = 0; j&lt;20; j++){
  
                  if(map[i][j] == 1){
                      ctx.drawImage(wall.image,TILE_HEIGHT*i,TILE_HEIGHT*j);
  
                  } else if(map[i][j] == 0){
                      ctx.drawImage(walkable.image,TILE_HEIGHT*i,TILE_HEIGHT*j);
  
                  }
  
  
  
          }
      }
  }
  
  function tick(){
  
      render();
  
  }
  
  
  
  
  
  //key listener
  
  
  
  $(document).keypress(function (eventObject) {
          var key = eventObject.keyCode;
          console.log(key);
  
          if (key == 115) {
          // up arrow
          console.log("Key pressed");
          player.ydir += 32;
          player.direction = "up";
          collisionDetect(player.direction);
          }
          else if (key == 119) {
              // down arrow
              console.log("Key pressed");
              player.ydir -= 32;
              player.direction = "down";
              collisionDetect(player.direction);
          }
          else if (key == 97) {
             // left arrow
             console.log("Key pressed");
             player.xdir -= 32;
             player.direction = "left";
             collisionDetect(player.direction);
          }
          else if (key == 100) {
             // right arrow
             console.log("Key pressed");
             player.xdir += 32;
             player.direction = "right";
             collisionDetect(player.direction);
          } else {
              return 1;
          }
  })
  
  
  
  
  main();
  </code></pre>