Question

<html>
<head>
    <title>My Tic Tac Toe</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .Row {
            display:table-row;
        }
        .cell {
            display: table-cell;
            border: solid black;
            border-width: medium;
            padding: 0 3px;
            height: 95px;
            width: 95px;
            text-align: center;
            font-size: 40px;
            vertical-align: middle;
        }
    </style>
    <script>
        var xPlayer = prompt("Player x what is your name?");
        var oPlayer = prompt("Player o what is your name?");
        var currentPlayer = "X";
        var xGameTotal = 0;
        var oGameTotal = 0;
        var xWins = 0;
        var oWins = 0;
        var xMessage = 0;
        var oMessage = 0;
        var winsArray = [7, 56, 448, 73, 146, 292, 273, 84];

        function playerMoved(id,value){
            changeMarker(id);
            updatePlayerTotal(value);

            if (checkWinner(xGameTotal)){
                xWins ++;
                if (xWins ===1)
                {
                    xMessage = " time";
                }
                else
                {
                    xMessage = " times";
                }
                resetBoard();
            }
            if (checkWinner(oGameTotal)) {
                oWins ++;
                if (oWins ===1) 
                {
                    oMessage = " time";
                }
                else
                {
                    oMessage = " times";
                }
                resetBoard();
            }

            switchPlayers();
        }
        function changeMarker(box){
            if (currentPlayer === "X")
            {
                box.innerHTML = 'X';
            }
            else
            {
                box.innerHTML = 'O';
            }
        }
        function switchPlayers(){
            if (currentPlayer === "X")
            {
                currentPlayer = 'X';
            }
            else
            {
                currentPlayer = 'O';
            }
        }
        function updatePlayerTotal(score){
            if (currentPlayer === "X")
            {
                xGameTotal = xGameTotal + score;
            }
            else 
            {
                oGameTotal = oGameTotal + score;
            }
        }
        function checkWinner(score){
            for (var index = 0; index < winsArray.length; index += 1)
            {
                if ((winsArray[index] & score) === winsArray[index])
                    return true;
            }
            return false;
        }   
        function resetBoard(){
            var board = document.getElementsByClassName("cell");
            for (var i=0; i < board.length; i++){
                board[i].innerHTML="";
            }
            oGameTotal=0;
            xGameTotal=0;

        }
    </script>
</head>
<body onload="start()">
    <h1>Tic Tac Toe</h1>
    <div class="Row">
        <div class="cell" onClick="playerMoved(this,1)"></div>
        <div class="cell" onClick="playerMoved(this,2)"></div>
        <div class="cell" onClick="playerMoved(this,4)"></div>
    </div>
    <div class="Row">
        <div class="cell" onClick="playerMoved(this,8)"></div>
        <div class="cell" onClick="playerMoved(this,16)"></div>
        <div class="cell" onClick="playerMoved(this,32)"></div>
    </div>
    <div class="Row">
        <div class="cell" onClick="playerMoved(this,64)"></div>
        <div class="cell" onClick="playerMoved(this,128)"></div>
        <div class="cell" onClick="playerMoved(this,256)"></div>
    </div>
</body>

我无法让播放器切换。当你点击方块时，它总是玩家X.我错过了什么？我想也许我的筑巢是错的，但我似乎无法找到任何东西。任何帮助，将不胜感激。谢谢！

Answer 1

你的if条件（switchPlayers）是错误的。您正在检查当前播放是否为x，然后再次将当前播放器设置为x。

只需更改以下行：

function switchPlayers(){
    if (currentPlayer === "X") {
        currentPlayer = 'X';
    } else {
        currentPlayer = 'O';
    }
}

为：

function switchPlayers(){
    if (currentPlayer === "X") {
        currentPlayer = 'O';
    } else {
        currentPlayer = 'X';
    }
}

Answer 2

进行Tommy建议的编辑为我解决了问题！

如果您想使代码更简洁，您也可以使用ternary operators在一行中完成此操作，如下所示：

function switchPlayers() {
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}

如果您愿意，也可以在代码的其他部分使用三元组，以帮助避免重复的if else语句。

基本上，您可以替换：

if(a === 'b') {
    c = 'foo';
}
else {
    c = 'bar';
}

使用：c = a === 'b' ? 'foo' : 'bar'。

三元组一开始看起来有点令人困惑，但是由于更简洁的代码，习惯它们可以帮助防止将来出现这类简单的错误。

Tic Tac Toe Javascript不会改变玩家

2 个答案: