Question

Javascript - 对象不是构造函数

2017-07-20

2106

javascript html constructor syntax-error

所以我见过很多这些问题，但它们相当不通用，而且我没有看到任何对我有用的问题。这是我的 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);

和 board.js（这不是全部，但都是相关的。所有 bubbleShoot 变量都已定义。

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

当我运行代码并单击按钮，运行 startGame() 时，它显示 Uncaught TypeError: bubbleShoot.Board is not a construction 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) 在 HTMLDivElement.elemData.handle (https://code.jquery.com/jquery-3.2.1.js:5014:28)
game.js 的第 19 行是 board = new bubbleShoot.Board(); ，以防您感到疑惑。无论如何，我的问题是：该对象是一个构造函数，那么为什么控制台会返回错误？

Answer 1

正如 Kyle Richardson 正确指出的那样，您定义了 bubbleShoot.board = (function($) { ...

因此，您应该像这样使用它：

var board = new bubbleShoot.board();