Question

我正在构建一个井字游戏，我希望一旦玩家获胜就重置董事会。

截至目前，当有人连续三次出现时，按照我正在使用的.remove函数，电路板会消失，但game.newgame没有被调用，我不知道为什么。< / p>

以下是代码段：

var gameboard = {

    initialize: function() {
        for(var x = 0; x < 3; x++) {
            for(var y = 0; y < 3; y++) {
                var unit = $("<div class='unit'></div>");
                unit.appendTo('#gameboard');
            }
        }
        console.log(100);
        gameboard.addId();
    },

    addId: function() {
        var id = 1
        $('.unit').each(function() {
            $(this).attr('id', id);
            id++;
        });
    }
};

var game = {

    newGame: gameboard.initialize(),

    currentPlayerTurn: players.firstPlayer.token,   

    displayToken: function() {
        $('.unit').click(function() {
            if(game.currentPlayerTurn === 'X' && !$(this).hasClass('selected')) {
                $(this).addClass('selected').removeClass('unit').text("X");
                game.currentPlayerTurn = players.secondPlayer.token;
            } else if(game.currentPlayerTurn === 'O' && !$(this).hasClass('selected')) {
                $(this).addClass('selected').removeClass('unit').text("O");
                game.currentPlayerTurn = players.firstPlayer.token;
            }
            game.win($(this));
            //console.log($(this));
        })
    },

    win: function(div) {

        game.winCombos.forEach(function(element) {
            element.forEach(function(unitIndex){ 
                if(unitIndex.toString() === div.attr('id').toString()) {
                    var elementIndex = game.winCombos.indexOf(element);
                    var unitIndex = element.indexOf(unitIndex);
                    game.winCombos[elementIndex][unitIndex] = game.currentPlayerTurn;       
                }

                var counter = 0

                for (var i = 0; i < element.length; i++) {
                    if (element[i] === game.currentPlayerTurn) {
                    counter ++;
                } 

                if(counter === 3) {
                    game.gameOver(true);

                }


                }

            })
        })
    },

    gameOver: function(bool) {
        if (bool === undefined) {
            bool = false;
        }
        $('.unit').remove();
        $('.selected').remove();
        game.newGame;
    },

    winCombos: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7]]

Answer 1

newGame函数应该只是对gameboard.initialize的引用。存储额外的参考文献没有意义。

删除此行：

newGame: gameboard.initialize(),

并替换：

game.newGame;

与

gameboard.initialize();

Answer 2

首先，newGame属性应该是一个函数：

newGame: function() {
  gameboard.initialize();
},

其次，请致电game.newGame();而不是game.newGame;

在原始游戏对象newGame中，只通过返回gameboard.initialize()方法的值来声明属性。

Answer 3

更改此行

newGame: gameboard.initialize(),

是以下之一：

newGame: gameboard.initialize,

或

newGame: function () { gameboard.initialize(); },

为其分配函数（而不是函数调用）或为其分配函数定义

如何在html中重置页面？

3 个答案: