为什么我的比赛没有结束?

时间:2016-09-04 04:28:23

标签: javascript html

我正在使用纯JavaScript编写一个井字游戏。

我的程序正确检查Player1或Player2是否赢了。出于某种原因,它无法检查它是否是一个平局。

我设置了一个名为moveCounter的计数器。每次成功移动后,计数器加1。计数器不可能达到9以上。

以下是测试游戏状态的功能。

它将检查player1或player2是否赢了。它做得很好。

下面你可以看到我试图测试一个平局。但什么都没发生。除了我的placePiece()函数中递增的计数器之外,游戏刚刚被卡住并且没有任何东西被打印到控制台。

我试过玩它并改变if条件,以及没有函数的位置,到目前为止我没有运气。

这是我的gameState()功能:

// The game ends when one player has three of their symbols in a row either horizontally, vertically or diagonally.
function gameState() {

    var result;

    //boxes
    var a1 = document.getElementById('a1');
    var a2 = document.getElementById('a2');
    var a3 = document.getElementById('a3');
    var b1 = document.getElementById('b1');
    var b2 = document.getElementById('b2');
    var b3 = document.getElementById('b3');
    var c1 = document.getElementById('c1');
    var c2 = document.getElementById('c2');
    var c3 = document.getElementById('c3');

    //See if Player 1 has won
    if((a1.classList.contains("box-filled-1") && a2.classList.contains("box-filled-1") && a3.classList.contains("box-filled-1")) || (b1.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && b3.classList.contains("box-filled-1")) || (b1.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && b3.classList.contains("box-filled-1")) || (c1.classList.contains("box-filled-1") && c2.classList.contains("box-filled-1") && c3.classList.contains("box-filled-1")) || (a1.classList.contains("box-filled-1") && b1.classList.contains("box-filled-1") && c1.classList.contains("box-filled-1")) || (a2.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && c2.classList.contains("box-filled-1")) || (a3.classList.contains("box-filled-1") && b3.classList.contains("box-filled-1") && c3.classList.contains("box-filled-1")) || (a1.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && c3.classList.contains("box-filled-1")) || (a3.classList.contains("box-filled-1") && b2.classList.contains("box-filled-1") && c1.classList.contains("box-filled-1"))){
        result = "player1"
        return gameOver(result);
    }

    //See if Player 2 has won
    if((a1.classList.contains("box-filled-2") && a2.classList.contains("box-filled-2") && a3.classList.contains("box-filled-2")) || (b1.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && b3.classList.contains("box-filled-2")) || (b1.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && b3.classList.contains("box-filled-2")) || (c1.classList.contains("box-filled-2") && c2.classList.contains("box-filled-2") && c3.classList.contains("box-filled-2")) || (a1.classList.contains("box-filled-2") && b1.classList.contains("box-filled-2") && c1.classList.contains("box-filled-2")) || (a2.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && c2.classList.contains("box-filled-2")) || (a3.classList.contains("box-filled-2") && b3.classList.contains("box-filled-2") && c3.classList.contains("box-filled-2")) || (a1.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && c3.classList.contains("box-filled-2")) || (a3.classList.contains("box-filled-2") && b2.classList.contains("box-filled-2") && c1.classList.contains("box-filled-2"))){
        result = "player2"
        return gameOver(result);
    }

    //If all of the squares are filled and no players have three in a row the game is a tie.
    if(moveCounter === 9){
        result = "tie";
        console.log("tie");
        return gameOver(result);
    }
}; 

以下是调用它的地方:

// Players can only click on empty squares. When the player clicks on an empty square, attach the class box-filled-1 (for O) or box-filled-2 (for X) to the square. 
    function placePiece() {
        if(!this.classList.contains("box-filled-1") && !this.classList.contains("box-filled-2")) {
            if(currentPlayer === player1){
                this.classList.add("box-filled-1");

                player1.currentPlayer = false;
                player2.currentPlayer = true;
                currentPlayer = player2;

                currentPlayerFlag();
                gameState();
                moveCounter++;
                console.log(moveCounter);
            } else {
                this.classList.add("box-filled-2");

                player2.currentPlayer = false;
                player1.currentPlayer = true;
                currentPlayer = player1;

                currentPlayerFlag();
                gameState();
                moveCounter++;
                console.log(moveCounter);
            }
        }
    };

1 个答案:

答案 0 :(得分:1)

假设你初始化moveCounter = 0,然后在递增moveCounter后移动gameState()

moveCounter++;
gameState();