title: Collision Detection / Cannot read property 'defaultView' of undefined
body: <p>I am creating my 1st game, a maze type, with collision detection. I am currently moving the 'tool' div around with continuous motion (still has a few bugs) and checking for collisions.  </p>
  
  <p>As I pass my collision items into the check, bottom of code, I am getting an error 'Cannot read property 'defaultView' of undefined'. </p>
  
  <p>main.js</p>
  
  <pre><code>$(document).ready(() =&gt; {
    console.log('DOMContentLoaded on app');
  
  
    //----------------------------------------------
    //Build walls
    const tx = 100;
    const bx = 600;
    const ly = 10;
    const my = 650;
    const ry = 750;
    const $main = $('main');
    const thick = 10;
    const goal = 100;
    let wallArray = [];
  
    //outline walls
    $main.append(buildWalls(tx, ly, thick, my - ly - goal));
    $main.append(buildWalls(tx, my, thick, ry - my));
    $main.append(buildWalls(tx, ry, bx - tx + thick, thick));
    $main.append(buildWalls(bx, ly, thick, ry - ly));
    $main.append(buildWalls(tx, ly, bx - tx, thick));
    // inside walls
    $main.append(buildWalls(200, 300, 75, thick));
    $main.append(buildWalls(400, 500, thick, 75));
    $main.append(buildWalls(500, 150, 75, thick));
  });
  
  // build walls with inputs
  
  
  function buildWalls(top1, left1, height1, width1) {
    const wall = $('&lt;div&gt;', {
      class: 'wall',
    })
      .css({
        top: top1,
        left: left1,
        height: height1,
        width: width1,
      });
  
    return wall;
  }
  
    //----------------------------------------------
    // tool, prize, and goal
  
  const bPx = 600;
  const bPy = 150;
  const speed = 5;
  const time = 100;
  const tool = createTool();
  const prize = createPrize();
  const moveFunctions = moving(tool, bPy, bPx, speed);
  
  function createTool() {
    return $('&lt;div&gt;')
      .addClass('tool black')
      .attr('id', 'tool')
      .css({ left: bPx, top: bPy })
      .appendTo($('main'));
  }
  
  function createPrize() {
    return $('&lt;div&gt;')
      .addClass('prize')
      .attr('id', 'prize')
      .css({ left: 50, top: 550 })
      .appendTo($('main'));
  }
  
  
  //_________________________________________
  //  for moving the tool around
  
  function moving($el, bPy, bPx, speed) {
    let drag = 0;
    return {
      moveUp() {
        bPy -= speed;
        drag = drag *= -1;
        // $el.css('top', bPy);
        // console.log($el);
      },
      moveLeft() {
        bPx -= speed;
        drag = -1;
      },
      moveDown() {
        bPy += speed;
        drag = 1;
      },
      moveRight() {
        bPx += speed;
        drag = 1;
      },
      looper() {
        $el.css({
          left: bPx += drag,
          top: bPy += drag,
        });
      },
    };
  }
  
  
  // };
  setInterval(moveFunctions.looper, time);
  
  // key controls
  $(document).keydown((event) =&gt; {
    console.log(event.keyCode);
    const key = event.which;
    switch (key) {
      // let keepMoving = 0;
      // move object left
      case 37:
        moveFunctions.moveLeft();
        checkCollisions();
        break;
      // move object right
      case 39:
        moveFunctions.moveRight();
        checkCollisions();
        break;
      // move object up
      case 38:
        moveFunctions.moveUp();
        console.log('{tool} up');
        checkCbreak; llisions();
        break;
      // move object down
      case 40:
        moveFunctions.moveDown();
        checkCollisions();
        break;
      // stop movement... used for when collision happens
      case 32:
        alert('stop');
        break;
    }
  });
  
  // get blocks corners .. wall, tool, item
  function getPositions(block) {
    const $block = $(block);
    const pos = $block.position();
    const width = $block.width();
    const height = $block.height();
    return [[pos.left, pos.left + width], [pos.top, pos.top + height]];
  }
  
  
  // compare if they have overlaping coordinates
  function comparePositions(p1, p2) {
    const x1 = p1[0] &lt; p2[0] ? p1 : p2;
    const x2 = p1[0] &lt; p2[0] ? p2 : p1;
    return !!(x1[1] &gt; x2[0] || x1[0] === x2[0]);
  }
  
  
  function checkCollisions() {
    const block = $('.wall')[0];
    const pos = getPositions(block);
    console.log(this);
    const pos2 = getPositions(this);
    const horizontalMatch = comparePositions(pos[0], pos2[0]);
    const verticalMatch = comparePositions(pos[1], pos2[1]);
    const match = horizontalMatch &amp;&amp; verticalMatch;
    if (match) { alert('COLLISION!!! Finally !!!'); }
  }
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>body{
  margin: auto;
  text-align: center;
  }
  .black {
    background-color: black;
   }
  .red {
    background-color: red;
   }
  
  .tool {
    border: 2px solid black;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    background-color: green;
    position: absolute;
    z-index: 300;
  }
  .wall {
    background-color: black;
    position: absolute;
  }
  .goal {
      background-color: gold;
    position: absolute;
  }
  .prize {
    border: 2px solid black;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    background-color: gold;
    position: absolute;
    z-index: 299;
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;Maze&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;main&gt;
  &lt;/main&gt;
  &lt;script src="main.js" type="text/javascript" charset="utf-8" async defer&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you for any help!</p>