title: Cannot detect collision for objects drawn in canvas javascript
body: <p>Hey I am currently building a simple pacman in javascript as a learning project. I am able to render a basic board, pacman, pellets and big pellets with basic canvas drawings (arc etc) . The game is responsive to key codes moving pacman around but Imstruggling when I want to test for collision and access x and y values of canvas drawings. My board is drawn in for loop that iterates through a layout/grid 2d array of numbers and draws something different depending on the number, 0 representing walls, 1 - pellets etc. I feel I may be making an error in the drawBoard for loop also..  I have started to go back and forth between using a function to draw walls and then trying to access its X and Y positions:</p>
  <pre><code>function drawBoard(){
    for (let i = 0; i &lt; ROWS; i++){
      for (let j = 0; j &lt; COLS; j++){
        const x = j * tile.width;
        const y = i * tile.height;
        if (layout[i][j] === 0){
          wallX = x;
          wallY = y;
          drawWall(wallX, wallY);
        // walls.push(new Wall(wallX, wallY));
      } else if (layout[i][j] === 1){
        drawPellets(x, y);
      } else if (layout[i][j] === 4){
        drawBigPellets(x,y);
      }
    };
  };
  }
  
  function drawWall(wallX, wallY){
    ctx.fillStyle=&quot;lightBlue&quot;;
    ctx.fillRect(wallX, wallY, wallWidth , wallHeight);
    ctx.strokeRect(wallX, wallY, wallWidth, wallHeight); 
  }
  </code></pre>
  <p>or creating new class objects in a  for loop then attempting to access the x and y position:</p>
  <pre><code>class Wall {
    // constructor(x, y){
    //   this.x = x;
    //   this.y = y;
    //   this.wallWidth = wallWidth;
    //   this.wallHeight = wallHeight;
     
  //     for (var w = 0; w&lt;walls.length;w++){
  //         walls[w].draw();
  //         walls[w].checkCollision();
  //         if (collided) {
  //           console.log(&quot;collided&quot;);
  //         }
  //       };
      
  //   }
  //   draw(){
  //     ctx.fillStyle=&quot;lightBlue&quot;;
  //     ctx.fillRect(this.x, this.y, this.wallWidth , this.wallHeight);
  //     ctx.strokeRect(this.x, this.y, this.wallWidth , this.wallHeight);
  //   }
  //   checkCollision(){
  //     if (getDistance(this.x, this.y, GAME_STATE.playerX, GAME_STATE.playerY) &lt; 0){
  //       collided = true;
  //     };
  //   }
      
  // }
  </code></pre>
  <p>To detect for collision I have tried two different functions, shown below, trying also to call them in a method of Wall object..</p>
  <pre><code>function intersectRect(r1, r2) {
    return !(r2.left &gt; r1.right || 
             r2.right &lt; r1.left || 
             r2.top &gt; r1.bottom ||
             r2.bottom &lt; r1.top);
  }
  
  // function getDistance(x1, y1, x2, y2){
  //   var xDistance = x2 - x1;
  //   var yDistance = y2 - y1;
    
  //   return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
  // }
  </code></pre>
  <p>Needless to say Im getting very confused and was wandering if someone could give me a simple way to detect whether pacman touches a drawn wall or pellet etc..</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//notes:
  // draw grid: pellets, ghost, pacman
  // move pacman automatically and change direction
  // add score
  // life lost
  // gameover
  // reset when gameover
  //TO DO:
  //1. Create layout matrix - render matrix as grid with tile width and height.
  //for each number in matrix draw a tile with width and height and value image or color. draw tiles.
  //2. Give different value to corresponding number on grid e.g. color/img
  //3. Draw players
  //4. Give functions
  const KEY_CODE_RIGHT = 39;
  const KEY_CODE_LEFT = 37;
  const KEY_CODE_UP = 38;
  const KEY_CODE_DOWN = 40;
  const COLS = 19;
  const ROWS = 22;
  
  const PLAYER_MAX_SPEED = 100;
  
  const canvas = document.getElementById("pacmanBoard");
  const ctx = canvas.getContext("2d");
  
  let tile = {
    width: 25,
    height: 25
  };
  canvas.width = tile.width * 19;
  canvas.height = tile.width * 22;
  let wallX, wallY,
    wallWidth = tile.width;
  let wallHeight = tile.height;
  
  const GAME_STATE = {
    lastTime: Date.now(),
    leftPressed: false,
    rightPressed: false,
    upPressed: false,
    downPressed: false,
    playerX: canvas.width / 2,
    playerY: canvas.height / 2 - 10,
    playerRadius: 10,
    pellets: [],
    walls: []
  }
  
  const layout = [
    [0, 0, 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, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 4, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 4, 0],
    [0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0],
    [0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
    [2, 2, 2, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 2, 2, 2],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 3, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [2, 2, 2, 2, 1, 1, 1, 0, 3, 3, 3, 0, 1, 1, 1, 2, 2, 2, 2],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [2, 2, 2, 0, 1, 0, 1, 1, 1, 2, 1, 1, 1, 0, 1, 0, 2, 2, 2],
    [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 4, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 4, 0],
    [0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
    [0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 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, 0, 0]
  ];
  let walls = [];
  let collided = false;
  
  function draw() {
  
    clearCanvas();
    drawPlayer();
    drawBoard();
  }
  
  function clamp(v, min, max) {
    if (v &lt; min) {
      return min;
    } else if (v &gt; max) {
      return max;
    } else {
      return v;
    }
  }
  
  function clearCanvas() {
    ctx.fillStyle = "black";
    ctx.strokeStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeRect(0, 0, canvas.width, canvas.height);
  }
  
  function drawBoard() {
    for (let i = 0; i &lt; ROWS; i++) {
      for (let j = 0; j &lt; COLS; j++) {
  
        const x = j * tile.width;
        const y = i * tile.height;
        if (layout[i][j] === 0) {
          wallX = x;
          wallY = y;
          drawWall(wallX, wallY);
          // walls.push(new Wall(wallX, wallY));
        } else if (layout[i][j] === 1) {
          drawPellets(x, y);
        } else if (layout[i][j] === 4) {
          drawBigPellets(x, y);
        }
  
      };
    };
  
  }
  
  function drawWall(wallX, wallY) {
    ctx.fillStyle = "lightBlue";
    ctx.fillRect(wallX, wallY, wallWidth, wallHeight);
    ctx.strokeRect(wallX, wallY, wallWidth, wallHeight);
    //   class Wall {
    //   constructor(x, y){
    //     this.x = x;
    //     this.y = y;
    //     this.width = tile.width;
    //     this.height = tile.height;
    //     this.type = "wall";
  
    //   }
    //   draw(){
    //     ctx.fillStyle="lightBlue";
    //     ctx.fillRect(this.x, this.y, this.width , this.height);
    //     ctx.strokeRect(this.x, this.y, this.width , this.height);
    //   }
    //   checkCollision(){
  
    //     return (GAME_STATE.playerX-GAME_STATE.playerRadius &lt; this.x + 20)
    //   &amp;&amp; (GAME_STATE.playerX+GAME_STATE.playerRadius &gt; this.x)
    //   &amp;&amp; (GAME_STATE.playerY-GAME_STATE.playerRadius &lt; this.y + 20)
    //   &amp;&amp; (GAME_STATE.playerY+GAME_STATE.playerRadius &gt; this.y)
    //   ;
    // }
    // }
  }
  
  // class Wall {
  // constructor(x, y){
  //   this.x = x;
  //   this.y = y;
  //   this.wallWidth = wallWidth;
  //   this.wallHeight = wallHeight;
  
  //     for (var w = 0; w&lt;walls.length;w++){
  //         walls[w].draw();
  //         walls[w].checkCollision();
  //         if (collided) {
  //           console.log("collided");
  //         }
  //       };
  
  //   }
  //   draw(){
  //     ctx.fillStyle="lightBlue";
  //     ctx.fillRect(this.x, this.y, this.wallWidth , this.wallHeight);
  //     ctx.strokeRect(this.x, this.y, this.wallWidth , this.wallHeight);
  //   }
  //   checkCollision(){
  //     if (getDistance(this.x, this.y, GAME_STATE.playerX, GAME_STATE.playerY) &lt; 0){
  //       collided = true;
  //     };
  //   }
  
  // }
  
  // function getDistance(x1, y1, x2, y2){
  //   var xDistance = x2 - x1;
  //   var yDistance = y2 - y1;
  
  //   return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
  // }
  function drawPellets(x, y) {
    ctx.beginPath();
    ctx.arc(x + tile.width / 2, y + tile.height / 2, 3, 0, 2 * Math.PI, false);
    ctx.fillStyle = "blue";
    ctx.fill();
    GAME_STATE.pellets.push();
  }
  
  function removePellets(x, y) {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, tile.width, tile.height);
  }
  
  function drawBigPellets(x, y) {
    ctx.beginPath();
    ctx.arc(x + tile.width / 2, y + tile.height / 2, 5, 0, 2 * Math.PI, false);
    ctx.fillStyle = "green";
    ctx.fill();
  }
  
  function drawPlayer() {
  
    ctx.beginPath();
    ctx.arc(GAME_STATE.playerX, GAME_STATE.playerY, GAME_STATE.playerRadius, 0.25 * Math.PI, 1.25 * Math.PI, false);
    ctx.fillStyle = "rgb(255, 255, 0)";
    ctx.fill();
    ctx.beginPath();
    ctx.arc(GAME_STATE.playerX, GAME_STATE.playerY, GAME_STATE.playerRadius, 0.75 * Math.PI, 1.75 * Math.PI, false);
    ctx.fill();
  }
  
  function updatePlayer(dt) {
    if (GAME_STATE.leftPressed) {
      GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
      // GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
    }
    if (GAME_STATE.rightPressed) {
      GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
    }
    if (GAME_STATE.upPressed) {
      GAME_STATE.playerY -= dt * PLAYER_MAX_SPEED;
    }
    if (GAME_STATE.downPressed) {
      GAME_STATE.playerY += dt * PLAYER_MAX_SPEED;
    }
  
    drawPlayer(GAME_STATE.playerX, GAME_STATE.playerY);
    GAME_STATE.playerX = clamp(GAME_STATE.playerX, GAME_STATE.playerRadius, canvas.width - GAME_STATE.playerRadius);
    GAME_STATE.playerY = clamp(GAME_STATE.playerY, GAME_STATE.playerRadius, canvas.height - GAME_STATE.playerRadius);
  }
  
  
  
  
  function update(e) {
  
    const currentTime = Date.now();
    const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
    draw();
    updatePlayer(dt);
    // if (intersectRect(GAME_STATE.playerRadius, wallX)) {
    //   console.log("intersected");
    // }
  
  
    GAME_STATE.lastTime = currentTime;
    window.requestAnimationFrame(update);
  }
  
  
  function intersectRect(r1, r2) {
    return !(r2.left &gt; r1.right ||
      r2.right &lt; r1.left ||
      r2.top &gt; r1.bottom ||
      r2.bottom &lt; r1.top);
  }
  
  function onKeyDown(e) {
    if (e.keyCode === KEY_CODE_LEFT) {
      GAME_STATE.leftPressed = true;
      // GAME_STATE.playerX -= 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    } else if (e.keyCode === KEY_CODE_RIGHT) {
      GAME_STATE.rightPressed = true;
      // GAME_STATE.playerX += 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    } else if (e.keyCode === KEY_CODE_UP) {
      GAME_STATE.upPressed = true;
      // GAME_STATE.playerX += 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    } else if (e.keyCode === KEY_CODE_DOWN) {
      GAME_STATE.downPressed = true;
      // GAME_STATE.playerX += 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    }
  }
  
  function onKeyUp(e) {
    if (e.keyCode === KEY_CODE_LEFT) {
      GAME_STATE.leftPressed = false;
      // GAME_STATE.playerX -= 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    } else if (e.keyCode === KEY_CODE_RIGHT) {
      GAME_STATE.rightPressed = false;
      // GAME_STATE.playerX += 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    } else if (e.keyCode === KEY_CODE_UP) {
      GAME_STATE.upPressed = false;
      // GAME_STATE.playerX += 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    } else if (e.keyCode === KEY_CODE_DOWN) {
      GAME_STATE.downPressed = false;
      // GAME_STATE.playerX += 5;
      // const player = document.querySelector(".player");
      // setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
    }
  }
  
  window.addEventListener('keydown', onKeyDown);
  window.addEventListener('keyup', onKeyUp);
  window.requestAnimationFrame(update);
  
  
  
  
  // let score = 0;
  // let lives = 3;
  // let tile = {
  //   width: 20,
  //   height: 20
  // };
  // board.width = tile.width * 19;
  // board.height = tile.width * 22; 
  // let pacmanPosition = {
  //   x: board.width/2,
  //   y: board.height/2
  // };
  // let dx = 10;
  // let dy = 0;
  
  // const maze = new Array();
  // const mazeWidth = board.width;
  // const mazeHeight = board.height;
  //  // wall    = 0;
  // // pellet = 1;
  // // empty   = 2;
  // // block   = 3;
  // // bigpill  = 4;
  
  // const layout = [
  //   [0, 0, 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, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  //  [0, 4, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 4, 0],
  //  [0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
  //  [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  //  [0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0],
  //  [0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  //  [0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
  //  [2, 2, 2, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 2, 2, 2],
  //  [0, 0, 0, 0, 1, 0, 1, 0, 0, 3, 0, 0, 1, 0, 1, 0, 0, 0, 0],
  //  [2, 2, 2, 2, 1, 1, 1, 0, 3, 3, 3, 0, 1, 1, 1, 2, 2, 2, 2],
  //  [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
  //  [2, 2, 2, 0, 1, 0, 1, 1, 1, 2, 1, 1, 1, 0, 1, 0, 2, 2, 2],
  //  [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
  //  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  //  [0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
  //  [0, 4, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 4, 0],
  //  [0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
  //  [0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  //  [0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
  //  [0, 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, 0, 0]
  // ];
  
  // function makeMaze(){
  //   for (var i = 0; i&lt; layout.length; i++) {
  //     maze[x] = new Array();
  //     for (var j = 0; j &lt; layout[i].length; j++){
  //       if (maze[i][j] === 0){
  
  //       }
  //     }
  //   }
  // }
  
  // function drawAll() {
  //   for (var x=0;x&lt;maze.length;x++){
  //   for(var y=0;y&lt;maze[x].length;y++){
  //    drawTile(x,y);  }
  //     }
  // }
  
  // function drawTile(x,y) {
  //   ctx.fillStyle="lightBlue";
  //   ctx.fillRect(x * tile.width , y * tile.height, tile.width , tile.height);
  //   ctx.strokeRect(x * tile.width , y * tile.height, tile.width , tile.height); 
  // }
  
  // main();
  
  // function main() {
  //   clearCanvas();
  //   drawPacman();
  //   drawPellets();
  //   drawGhosts();
  //   // drawAll();
  // }
  
  // function reset() {
  
  // }
  
  // function clearCanvas(){
  //   ctx.fillStyle = "black";
  //   ctx.strokeStyle = "blue";              ctx.fillRect(0,0,board.width, board.height);
  //   ctx.strokeRect(0,0,board.width, board.height);
  // }
  
  // function drawLine() {
  //   for (var i = 0; i &lt; layout.length; i++) {
  //     let squares = layout[i];
  //     if (squares === 0) {
  
  //     }
  //   }
  // }
  
  // function drawPacman() {
  //   ctx.beginPath();
  //   ctx.arc(pacmanPosition.x, pacmanPosition.y, 10, 0.25 * Math.PI, 1.25 * Math.PI, false);
  //   ctx.fillStyle = "rgb(255, 255, 0)";
  //   ctx.fill();
  //   ctx.beginPath();
  //   ctx.arc(pacmanPosition.x, pacmanPosition.y, 10, 0.75 * Math.PI, 1.75 * Math.PI, false);
  //   ctx.fill();
  //   // ctx.beginPath();
  //   // ctx.arc(100, 75, 10, 0, 2 * Math.PI, false);
  //   // ctx.fillStyle = "rgb(0, 0, 0)";
  //   // ctx.fill();
  // }
  
  // function drawPellets() {
  //   ctx.beginPath();
  //   ctx.arc(50, 50, 3, 0,  2 * Math.PI, false);
  //   ctx.fillStyle = "blue";
  //   ctx.fill();
  // }
  
  // function drawGhosts(){
  //   ctx.beginPath();
  //         ctx.fillStyle = "blue";
  //         ctx.arc(150 , 150, 10, Math.PI, 2* Math.PI);
  //         ctx.lineTo(150 + 10, 150 + 10);
  //         ctx.arc(150 + 10 / 2, 150 + 10, 10 * 0.5, 0, Math.PI);
  //         ctx.arc(150 + 10 / 2 - 10 , 150 + 10,10 * 0.5, 0, Math.PI);
  //         ctx.closePath();
  //         ctx.fill();
  //         ctx.strokeStyle = "blue";
  //         ctx.stroke();
  // }
  
  // function movePacman(){
  
  // }
  
  // function randomMove(){
  
  // }
  
  // function changeDirection() {
  
  // }
  
  // function addScore() {
  //   score += 10;
  //   document.getElementById("score").innerHTML = score;
  // }
  
  // function lifeLost(){
  //   lives -= 1;
  //   document.getElementById("lives").innerHTML = lives;
  // }
  
  
  
  // document.addEventListener('DOMContentLoaded', () =&gt; {
  
  //   const scoreDisplay = document.getElementById('score')
  //   const width = 28
  //   let score = 0
  //   const grid = document.querySelector('.grid')
  //   const layout = [
  //     1,1,1,1,1,1,1,1,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,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,
  //     1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
  //     1,3,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,3,1,
  //     1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
  //     1,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,
  //     1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,
  //     1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,0,1,
  //     1,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,1,
  //     1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1,
  //     1,1,1,1,1,1,0,1,1,4,4,4,4,4,4,4,4,4,4,1,1,0,1,1,1,1,1,1,
  //     1,1,1,1,1,1,0,1,1,4,1,1,1,2,2,1,1,1,4,1,1,0,1,1,1,1,1,1,
  //     1,1,1,1,1,1,0,1,1,4,1,2,2,2,2,2,2,1,4,1,1,0,1,1,1,1,1,1,
  //     4,4,4,4,4,4,0,0,0,4,1,2,2,2,2,2,2,1,4,0,0,0,4,4,4,4,4,4,
  //     1,1,1,1,1,1,0,1,1,4,1,2,2,2,2,2,2,1,4,1,1,0,1,1,1,1,1,1,
  //     1,1,1,1,1,1,0,1,1,4,1,1,1,1,1,1,1,1,4,1,1,0,1,1,1,1,1,1,
  //     1,1,1,1,1,1,0,1,1,4,1,1,1,1,1,1,1,1,4,1,1,0,1,1,1,1,1,1,
  //     1,0,0,0,0,0,0,0,0,4,4,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,1,
  //     1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
  //     1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,
  //     1,3,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,3,1,
  //     1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1,
  //     1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1,
  //     1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1,
  //     1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1,
  //     1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1,
  //     1,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,
  //     1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
  //   ]
  //   // 0 - pac-dots
  //   // 1 - wall
  //   // 2 - ghost-lair
  //   // 3 - power-pellet
  //   // 4 - empty
  
  //   const squares = []
  
  //   //create your board
  //   function createBoard() {
  //     for (let i = 0; i &lt; layout.length; i++) {
  //       const square = document.createElement('div')
  //       grid.appendChild(square)
  //       squares.push(square)
  
  //       //add layout to the board
  //       if(layout[i] === 0) {
  //         squares[i].classList.add('pac-dot')
  //       } else if (layout[i] === 1) {
  //         squares[i].classList.add('wall')
  //       } else if (layout[i] === 2) {
  //         squares[i].classList.add('ghost-lair')
  //       } else if (layout[i] === 3) {
  //         squares[i].classList.add('power-pellet')
  //       }
  //     }
  //   }
  //   createBoard()
  
  
  //   //create Characters
  //   //draw pacman onto the board
  //   let pacmanCurrentIndex = 490
  //   squares[pacmanCurrentIndex].classList.add('pac-man')
  //   //get the coordinates of pacman on the grid with X and Y axis
  //   // function getCoordinates(index) {
  //   //   return [index % width, Math.floor(index / width)]
  //   // }
  
  //   // console.log(getCoordinates(pacmanCurrentIndex))
  
  //   //move pacman
  //   function movePacman(e) {
  //     squares[pacmanCurrentIndex].classList.remove('pac-man')
  //     switch(e.keyCode) {
  //       case 37:
  //         if(
  //           pacmanCurrentIndex % width !== 0 &amp;&amp;
  //           !squares[pacmanCurrentIndex -1].classList.contains('wall') &amp;&amp;
  //           !squares[pacmanCurrentIndex -1].classList.contains('ghost-lair')
  //           )
  //         pacmanCurrentIndex -= 1
  //         if (squares[pacmanCurrentIndex -1] === squares[363]) {
  //           pacmanCurrentIndex = 391
  //         }
  //         break
  //       case 38:
  //         if(
  //           pacmanCurrentIndex - width &gt;= 0 &amp;&amp;
  //           !squares[pacmanCurrentIndex -width].classList.contains('wall') &amp;&amp;
  //           !squares[pacmanCurrentIndex -width].classList.contains('ghost-lair')
  //           ) 
  //         pacmanCurrentIndex -= width
  //         break
  //       case 39:
  //         if(
  //           pacmanCurrentIndex % width &lt; width - 1 &amp;&amp;
  //           !squares[pacmanCurrentIndex +1].classList.contains('wall') &amp;&amp;
  //           !squares[pacmanCurrentIndex +1].classList.contains('ghost-lair')
  //         )
  //         pacmanCurrentIndex += 1
  //         if (squares[pacmanCurrentIndex +1] === squares[392]) {
  //           pacmanCurrentIndex = 364
  //         }
  //         break
  //       case 40:
  //         if (
  //           pacmanCurrentIndex + width &lt; width * width &amp;&amp;
  //           !squares[pacmanCurrentIndex +width].classList.contains('wall') &amp;&amp;
  //           !squares[pacmanCurrentIndex +width].classList.contains('ghost-lair')
  //         )
  //         pacmanCurrentIndex += width
  //         break
  //     }
  //     squares[pacmanCurrentIndex].classList.add('pac-man')
  //     pacDotEaten()
  //     powerPelletEaten()
  //     checkForGameOver()
  //     checkForWin()
  //   }
  //   document.addEventListener('keyup', movePacman)
  
  //   // what happens when you eat a pac-dot
  //   function pacDotEaten() {
  //     if (squares[pacmanCurrentIndex].classList.contains('pac-dot')) {
  //       score++
  //       scoreDisplay.innerHTML = score
  //       squares[pacmanCurrentIndex].classList.remove('pac-dot')
  //     }
  //   }
  
  //   //what happens when you eat a power-pellet
  //   function powerPelletEaten() {
  //     if (squares[pacmanCurrentIndex].classList.contains('power-pellet')) {
  //       score +=10
  //       ghosts.forEach(ghost =&gt; ghost.isScared = true)
  //       setTimeout(unScareGhosts, 10000)
  //       squares[pacmanCurrentIndex].classList.remove('power-pellet')
  //     }
  //   }
  
  //   //make the ghosts stop flashing
  //   function unScareGhosts() {
  //     ghosts.forEach(ghost =&gt; ghost.isScared = false)
  //   }
  
  //   //create ghosts using Constructors
  //   class Ghost {
  //     constructor(className, startIndex, speed) {
  //       this.className = className
  //       this.startIndex = startIndex
  //       this.speed = speed
  //       this.currentIndex = startIndex
  //       this.isScared = false
  //       this.timerId = NaN
  //     }
  //   }
  
  //   //all my ghosts
  //   ghosts = [
  //     new Ghost('blinky', 348, 250),
  //     new Ghost('pinky', 376, 400),
  //     new Ghost('inky', 351, 300),
  //     new Ghost('clyde', 379, 500)
  //     ]
  
  //   //draw my ghosts onto the grid
  //   ghosts.forEach(ghost =&gt; {
  //     squares[ghost.currentIndex].classList.add(ghost.className)
  //     squares[ghost.currentIndex].classList.add('ghost')
  //     })
  
  //   //move the Ghosts randomly
  //   ghosts.forEach(ghost =&gt; moveGhost(ghost))
  
  //   function moveGhost(ghost) {
  //     const directions =  [-1, +1, width, -width]
  //     let direction = directions[Math.floor(Math.random() * directions.length)]
  
  //     ghost.timerId = setInterval(function() {
  //       //if the next squre your ghost is going to go to does not have a ghost and does not have a wall
  //       if  (!squares[ghost.currentIndex + direction].classList.contains('ghost') &amp;&amp;
  //         !squares[ghost.currentIndex + direction].classList.contains('wall') ) {
  //           //remove the ghosts classes
  //           squares[ghost.currentIndex].classList.remove(ghost.className)
  //           squares[ghost.currentIndex].classList.remove('ghost', 'scared-ghost')
  //           //move into that space
  //           ghost.currentIndex += direction
  //           squares[ghost.currentIndex].classList.add(ghost.className, 'ghost')
  //       //else find a new random direction ot go in
  //       } else direction = directions[Math.floor(Math.random() * directions.length)]
  
  //       //if the ghost is currently scared
  //       if (ghost.isScared) {
  //         squares[ghost.currentIndex].classList.add('scared-ghost')
  //       }
  
  //       //if the ghost is currently scared and pacman is on it
  //       if(ghost.isScared &amp;&amp; squares[ghost.currentIndex].classList.contains('pac-man')) {
  //         squares[ghost.currentIndex].classList.remove(ghost.className, 'ghost', 'scared-ghost')
  //         ghost.currentIndex = ghost.startIndex
  //         score +=100
  //         squares[ghost.currentIndex].classList.add(ghost.className, 'ghost')
  //       }
  //     checkForGameOver()
  //     }, ghost.speed)
  //   }
  
  //   //check for a game over
  //   function checkForGameOver() {
  //     if (squares[pacmanCurrentIndex].classList.contains('ghost') &amp;&amp;
  //       !squares[pacmanCurrentIndex].classList.contains('scared-ghost')) {
  //       ghosts.forEach(ghost =&gt; clearInterval(ghost.timerId))
  //       document.removeEventListener('keyup', movePacman)
  //       setTimeout(function(){ alert("Game Over"); }, 500)
  //     }
  //   }
  
  //   //check for a win - more is when this score is reached
  //   function checkForWin() 
  //     if (score === 274) {
  //       ghosts.forEach(ghost =&gt; clearInterval(ghost.timerId))
  //       document.removeEventListener('keyup', movePacman)
  //       setTimeout(function(){ alert("You have WON!"); }, 500)
  //     }
  //   }
  // })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div&gt; Score: &lt;span id="score"&gt;0&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt; Lives: &lt;span id="lives"&gt;3&lt;/span&gt;&lt;/div&gt;
    &lt;canvas id="pacmanBoard"&gt;&lt;/canvas&gt;
  
  &lt;/body&gt;
  
  
  &lt;!-- &lt;body&gt;
      &lt;div class="grid"&gt;&lt;/div&gt;
  
      &lt;h3&gt;Score:&lt;span id="score"&gt;&lt;/span&gt;&lt;/h3&gt;
  
    &lt;/body&gt; --&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Full codepen can be found here ..
  <a href="https://codepen.io/tallulahh/pen/jOMNPjB?editors=1111" rel="nofollow noreferrer">https://codepen.io/tallulahh/pen/jOMNPjB?editors=1111</a></p>
  <p>thanks in advance!</p>