Javascript - object is not a constructor

Question

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:

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>Agent Bubble Popper</title>
        <link href="CSS/main.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="JS/game.js"></script>
        <script src="JS/ui.js"></script>
        <script src="JS/bubble.js"></script>
        <script src="JS/sprite.js"></script>
        <script src="JS/board.js"></script>
        <script src="JS/renderer.js"></script>
    </head>
    <body>
        <canvas id="canvas" width="750" height="500"></canvas>
        <div id="page">
            <div id="topFrame"></div>
            <div id="game">
                <div id="board"></div>
                <div id="bubblesRemaining"></div>
            </div>
            <div id="info"></div>
            <div id="bottomFrame"></div>
            <div id="startGame" class="dialog">
                <div id="startGameMessage">
                <h2>Start a new game</h2>
            </div>
            <div class="butStartGame button">
                New Game
            </div>
            <div class="butInfo button">
                Bubble Info
            </div>
            </div>
        </div>
        <script>
            var game = new bubbleShoot.game();
            game.init();
        </script>
    </body>
</html>

Game.js:

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);

and board.js (that's not everything, but it's all that's relevant. All of the bubbleShoot variables are defined.

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 < 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 < rowAmt; i++) {
            var row = [];
            var startCol = i%2 == 0 ? 1: 0;
            for (var j = startCol; j < colAmt; j += 2) {
                var bubble = bubbleShoot.Bubble.create(i, j);
                row[j] = bubble;
            };
            rows.push(row);
        };
        return rows;
    }
    return Board;
})(jQuery);

When I run the code and click the button, running startGame(), it says 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)
line 19 of game.js is board = new bubbleShoot.Board();, in case you're wondering. Anyways, my question is: The object is a constructor, so why does the console return an error?

board = new bubbleShoot.Board(); try changing that to board = new bubbleShoot.board(); - lowercase b on .board — Kyle Richardson
– Kyle Richardson, Commented Jul 20, 2017 at 17:29
@KyleRichardson I tried that, and for some reason when I click the start game button the web page lags out. My mouse remains the pointer even when I move it off anything clickable, and I can't reload. However, I can close the tab. — Hazard
– Hazard, Commented Jul 20, 2017 at 17:43
"and for some reason when I click the start game button the web page lags out" Then the question you posted initially has been solved? You need to ask a new question — Ruan Mendes
– Ruan Mendes, Commented Jul 20, 2017 at 17:48
@JuanMendes, with bubbleShoot.Board, I can click the button without the page lagging out. — Hazard
– Hazard, Commented Jul 20, 2017 at 17:49
From what you have shown, you get an error when trying new bubbleShoot.Board, what do you mean you can click the button? You have not shown any code that defines bubbleShoot.Board — Ruan Mendes
– Ruan Mendes, Commented Jul 20, 2017 at 17:59

Pritam Banerjee · Accepted Answer · 2017-07-20 17:45:51Z

4

As pointed out correctly by Kyle Richardson you defined bubbleShoot.board = (function($) { ...

So you should use it like :

var board = new bubbleShoot.board();

edited Jul 20, 2017 at 17:45

answered Jul 20, 2017 at 17:43

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kyle Richardson Over a year ago

Hey, thanks for posting my solution :) I vote you up!

Pritam Banerjee Over a year ago

@KyleRichardson Thanks. I did not see your solution. But since you posted first I mentioned you in the answer.

Kyle Richardson Over a year ago

I was just given ya a hard time anyhow, doesn't bother me :)

Ruan Mendes Over a year ago

Nothing wrong with posting someone else's comment if you proved that it is the problem.

Hazard Over a year ago

bubbleShoot.board is a module function, meaning that after running it deletes itself. The reason for module functions is to prevent variables tripping over each other.

|

Collectives™ on Stack Overflow

Javascript - object is not a constructor

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related