title: Javascript - object is not a constructor
body: <p>So I've seen a lot of these questions, but they're rather non-generic and nothing I've seen works for me. Here is my index.html:  </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Agent Bubble Popper&lt;/title&gt;
          &lt;link href="CSS/main.css" rel="stylesheet"&gt;
          &lt;script src="https://code.jquery.com/jquery-3.2.1.js"&gt;&lt;/script&gt;
          &lt;script src="JS/game.js"&gt;&lt;/script&gt;
          &lt;script src="JS/ui.js"&gt;&lt;/script&gt;
          &lt;script src="JS/bubble.js"&gt;&lt;/script&gt;
          &lt;script src="JS/sprite.js"&gt;&lt;/script&gt;
          &lt;script src="JS/board.js"&gt;&lt;/script&gt;
          &lt;script src="JS/renderer.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;canvas id="canvas" width="750" height="500"&gt;&lt;/canvas&gt;
          &lt;div id="page"&gt;
              &lt;div id="topFrame"&gt;&lt;/div&gt;
              &lt;div id="game"&gt;
                  &lt;div id="board"&gt;&lt;/div&gt;
                  &lt;div id="bubblesRemaining"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="info"&gt;&lt;/div&gt;
              &lt;div id="bottomFrame"&gt;&lt;/div&gt;
              &lt;div id="startGame" class="dialog"&gt;
                  &lt;div id="startGameMessage"&gt;
                  &lt;h2&gt;Start a new game&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="butStartGame button"&gt;
                  New Game
              &lt;/div&gt;
              &lt;div class="butInfo button"&gt;
                  Bubble Info
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
              var game = new bubbleShoot.game();
              game.init();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Game.js:  </p>
  
  <pre><code>var bubbleShoot = window.bubbleShoot || {};
  bubbleShoot.game = (function($){
      var Game = function(){
          var curBubble;
          var board;
          var bubbleAmt;
          var maxBubbles = 75;
          var bubbles = [];
          var requestAnimationID;
          this.init = function() {
              $(".butStartGame").on("click", startGame);
              $(".butInfo").on("click", startInfo);
          }
          function startGame(){
              $(".butStartGame").off("click", startGame);
              bubbleAmt = maxBubbles;
              bubbleShoot.ui.hideDialog();
              curBubble = getNextBubble();
              board = new bubbleShoot.Board();
              bubbles = board.getBubbles();
              if (!requestAnimationID) {
                  requestAnimationID = setTimeout(renderFrame, 40);
              };
              $("#page").on("click", clickGameScreen);
          }
          function startInfo(){
              $(".butStartGame").off("click", startInfo);
              bubbleShoot.ui.hideDialog();
          }
          function getNextBubble() {
              var bubble = bubbleShoot.Bubble.create();
              bubbles.push(bubble);
              bubble.setState(bubbleShoot.bubbleState.current);
              bubbleShoot.ui.drawBubblesRemaining(bubbleAmt);
              bubbleAmt--;
              return bubble;
          }
          function clickGameScreen(e) {
              console.log("game screen clicked");
              var angle = bubbleShoot.ui.getBubbleAngle(curBubble.getSprite(), e);
              var duration = 750;
              var distance = 1000;
              var distX = Math.sin(angle) * distance;
              var distY = Math.cos(angle) * distance;
              var bubbleCoords = bubbleShoot.ui.getBubbleCoords(curBubble.getSprite());
              var coords = {
                  x: bubbleCoords.x,
                  y: bubbleCoords.y,
              };
              bubbleShoot.ui.fireBubble(curBubble, coords, duration);
              curBubble = getNextBubble();
          }
          function renderFrame() {
              bubbleShoot.renderer.render(bubbles);
              requestAnimatinoID = setTimeout(renderFrame, 40);
          }
      }
      return Game;
  })(jQuery);
  </code></pre>
  
  <p>and board.js (that's not everything, but it's all that's relevant. All of the bubbleShoot variables are defined.  </p>
  
  <pre><code>var bubbleShoot = window.bubbleShoot || {};
  bubbleShoot.board = (function($) {
      var rowAmt = 8;
      var colAmt = 30;
      var Board = function() {
          var that = this;
          var rows = createLayout();
          this.getRows = function() {return rows;}
          this.getBubbles = function() {
              var bubbles = [];
              var rows = this.getRows();
              for (var i = 0; i &lt; rows.length; i++) {
                  var row = rows[i];
                  for (var j = 0; j = row.length; j++) {
                      var bubble = row[j];
                      if (bubble) {
                          bubbles.push(bubble);
                      };
                  };
              };
              return bubbles;
          }
          return this;
      }
      var createLayout = function() {
          var rows = [];
          for (var i = 0; i &lt; rowAmt; i++) {
              var row = [];
              var startCol = i%2 == 0 ? 1: 0;
              for (var j = startCol; j &lt; colAmt; j += 2) {
                  var bubble = bubbleShoot.Bubble.create(i, j);
                  row[j] = bubble;
              };
              rows.push(row);
          };
          return rows;
      }
      return Board;
  })(jQuery);
  </code></pre>
  
  <p>When I run the code and click the button, running <code>startGame()</code>, it says <code>Uncaught TypeError: bubbleShoot.Board is not a constructor
      at HTMLDivElement.startGame (file:///Users/allen/Desktop/Agent%20Bubble%20Popper%20(game)/JS/game.js:19:12)
      at HTMLDivElement.dispatch (https://code.jquery.com/jquery-3.2.1.js:5206:27)
      at HTMLDivElement.elemData.handle (https://code.jquery.com/jquery-3.2.1.js:5014:28)</code><br>
  line 19 of game.js is <code>board = new bubbleShoot.Board();</code>, in case you're wondering. Anyways, my question is: The object is a constructor, so why does the console return an error?</p>