Javascript代码有效，但不是立即答案

【问题标题】：Javascript code works, but not immediatelyJavascript代码有效，但不是立即
【发布时间】：2021-05-13 22:34:59
【问题描述】：

我尝试编写一个简单的井字游戏。当我编码时，我会遇到一个奇怪的“错误”，我会说？一个名为“isWinner”的函数检查是否有人获胜。它将一个名为“winningCombinations”的数组与它获得的组合进行比较。问题是代码应该在找到获胜组合后立即显示“获胜者鸡肉晚餐”。嗯，它没有。它会在 3 个额外的动作后显示出来。我不知道出了什么问题，所以我将不胜感激。提前致谢。哦，这是代码：

代码笔： https://codepen.io/vivmaha/pen/abJNBzX

const turndiv = document.getElementById('turn');
const board = document.getElementById('board');
const boxes = document.querySelectorAll('.boxes');

const winningCombinations = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7]
];

let claimedcells = new Array();
let xturn = true;

/* Those variables will have X and O combinations separetly */

let xcombination = new Array();
let ocombination = new Array();
let turn = xcombination;

/* Add event listeners to every cell */

boxes.forEach(cell => {
    cell.addEventListener('click', handleCellClick);
});

/* Handles cell, at this stage is confirmed, that this cell has ben clicked for first time */

function handleCellPlayed(cell, value) {
    if(xturn) {
        cell.textContent = 'x';
        xturn = false;
        xcombination.push(value);
    }
    else {
        cell.textContent = 'o';
        xturn = true;
        ocombination.push(value);
    }
}

/* Handles click on any cell */

function handleCellClick() {

    if(xturn) {
        if(isWinner(xcombination)) {
            alert('winner chicken dinner');
        }
    }
    else if(isWinner(ocombination)) {
            alert('winner chicken dinner');
    }

    let clickedcell = this.getAttribute('value');

    let freeCell = isCellFree(clickedcell);

    if(freeCell) {

        handleCellPlayed(this, this.getAttribute('value'));
        
        claimedcells.push(clickedcell);
    }
    
}

/* Checks is Cell free */

function isCellFree(cell) {

    let freeCell = true;

    for(i=0; i<claimedcells.length; i++) {

        let claimedcell = claimedcells[i];

        if(cell == claimedcell) {
            freeCell = false;
        }

    }

    return freeCell;
}

/* Check if game has winner */

function isWinner(usercombination) {

    let winner = false;

    winningCombinations.forEach(combination => {

        let a = combination[0] + "";
        let b = combination[1] + "";
        let c = combination[2] + "";

        if(usercombination.includes(a) && usercombination.includes(b) && usercombination.includes(c)) {
            winner = true;
        }

    });

    return winner;
}

body {
    background-color:azure;
}

.container {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gameholder {
    width: 30vw;
    background-color: beige;
    padding: 10px;
    text-align: center;
}

#board {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-basis: 33.333333%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 100px;
}

.boxes {
    width: 31%;
    height: 8vw;
    border: 0.5px black solid;
}

.boxes:first-child, .boxes:nth-child(2), .boxes:nth-child(3) {
    border-top: none;
}

.boxes:first-child, .boxes:nth-child(4), .boxes:nth-child(7) {
    border-left: none;
}

.boxes:nth-child(7), .boxes:nth-child(8), .boxes:nth-child(9) {
    border-bottom: none;
}

.boxes:nth-child(3),
.boxes:nth-child(6),
.boxes:nth-child(9) {
    border-right: none;
}

<body>
    <div class="container">
        <div id="gameholder">
            <!-------Current turn-------------->
            <div id="turn">
                <h1>X turn!</h1>
            </div>

            <!--- Game board --->
            <div id="board">
                <div class="boxes" value='1'></div>
                <div class="boxes" value='2'></div>
                <div class="boxes" value='3'></div>
                <div class="boxes" value='4'></div>
                <div class="boxes" value='5'></div>
                <div class="boxes" value='6'></div>
                <div class="boxes" value='7'></div>
                <div class="boxes" value='8'></div>
                <div class="boxes" value='9'></div>
            </div>

            <div id="time"></div>
        </div>
    </div>

    <script src="game.js" async></script>
</body>

【问题讨论】：

标签： javascript html css tic-tac-toe

【解决方案1】：

您的 handleCellClick 函数会在执行其他任何操作之前测试获胜者。

所以我对“X”进行了获胜点击，代码进入并检查获胜者（目前还没有）。然后它更新所有内容，然后轮到 o，它进来并检查 O 的获胜者，什么都没有。然后它更新所有内容，然后 X 再次转动它检查获胜者，现在它响应为真。

您需要在处理完剩余的点击后将您的中奖支票移至。

【讨论】：

【解决方案2】：

这里有 2 个问题，

您在放置标记之前进行了 isWinner 检查
您在进行检查之前更改了 xturn。

下面我已经修改以修复两者。

我做了一个简单的xturn = !xturn; 来计算用户是否赢了。

const turndiv = document.getElementById('turn');
const board = document.getElementById('board');
const boxes = document.querySelectorAll('.boxes');

const winningCombinations = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7]
];

let claimedcells = new Array();
let xturn = true;

/* Those variables will have X and O combinations separetly */

let xcombination = new Array();
let ocombination = new Array();
let turn = xcombination;

/* Add event listeners to every cell */

boxes.forEach(cell => {
    cell.addEventListener('click', handleCellClick);
});

/* Handles cell, at this stage is confirmed, that this cell has ben clicked for first time */

function handleCellPlayed(cell, value) {
    if(xturn) {
        cell.textContent = 'x';
        //xturn = false;
        xcombination.push(value);
    }
    else {
        cell.textContent = 'o';
        //xturn = true;
        ocombination.push(value);
    }
}

/* Handles click on any cell */

function handleCellClick() {

 

    let clickedcell = this.getAttribute('value');

    let freeCell = isCellFree(clickedcell);

    if(freeCell) {

        handleCellPlayed(this, this.getAttribute('value'));
        if(xturn) {
          if(isWinner(xcombination)) {
             alert('winner chicken dinner');
          }
        }
        else if(isWinner(ocombination)) {
          alert('winner chicken dinner');
        }
        xturn = !xturn;
        claimedcells.push(clickedcell);
    }
    
}

/* Checks is Cell free */

function isCellFree(cell) {

    let freeCell = true;

    for(i=0; i<claimedcells.length; i++) {

        let claimedcell = claimedcells[i];

        if(cell == claimedcell) {
            freeCell = false;
        }

    }

    return freeCell;
}

/* Check if game has winner */

function isWinner(usercombination) {

    let winner = false;

    winningCombinations.forEach(combination => {

        let a = combination[0] + "";
        let b = combination[1] + "";
        let c = combination[2] + "";

        if(usercombination.includes(a) && usercombination.includes(b) && usercombination.includes(c)) {
            winner = true;
        }

    });

    return winner;
}

body {
    background-color:azure;
}

.container {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gameholder {
    width: 30vw;
    background-color: beige;
    padding: 10px;
    text-align: center;
}

#board {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-basis: 33.333333%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 100px;
}

.boxes {
    width: 31%;
    height: 8vw;
    border: 0.5px black solid;
}

.boxes:first-child, .boxes:nth-child(2), .boxes:nth-child(3) {
    border-top: none;
}

.boxes:first-child, .boxes:nth-child(4), .boxes:nth-child(7) {
    border-left: none;
}

.boxes:nth-child(7), .boxes:nth-child(8), .boxes:nth-child(9) {
    border-bottom: none;
}

.boxes:nth-child(3),
.boxes:nth-child(6),
.boxes:nth-child(9) {
    border-right: none;
}

<body>
    <div class="container">
        <div id="gameholder">
            <!-------Current turn-------------->
            <div id="turn">
                <h1>X turn!</h1>
            </div>

            <!--- Game board --->
            <div id="board">
                <div class="boxes" value='1'></div>
                <div class="boxes" value='2'></div>
                <div class="boxes" value='3'></div>
                <div class="boxes" value='4'></div>
                <div class="boxes" value='5'></div>
                <div class="boxes" value='6'></div>
                <div class="boxes" value='7'></div>
                <div class="boxes" value='8'></div>
                <div class="boxes" value='9'></div>
            </div>

            <div id="time"></div>
        </div>
    </div>

    <script src="game.js" async></script>
</body>

【讨论】：