井字游戏Javascript不会改变玩家

Tic Tac Toe Javascript won't change players

本文关键字：改变玩家 Javascript 游戏更新时间：2023-09-26

<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。我错过了什么?我想也许我的筑巢是错误的，但我似乎找不到任何东西。任何帮助都会很感激。谢谢你！

if条件(switchPlayers)是错误的。您正在检查当前播放的内容是否为x，然后将当前播放的内容再次设置为x。

只需改变这些行:

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

:

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

让Tommy建议的编辑为我修复了这个问题!

如果希望使代码更简洁，还可以使用三元操作符在一行中完成此操作，如下所示:

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

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

基本上，你可以替换:

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

With: c = a === 'b' ? 'foo' : 'bar' .

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