有趣if/elseif条件链问题

Question

我很难弄清楚为什么这段代码会这样工作。下面，我有生成我的井字游戏的所有代码。游戏按预期运行，直到我们达到一个完整的棋盘，应该导致 'O' 或 'X' 获胜。我当前的逻辑有时会按预期工作并选择正确的获胜者，但大多数时候，它会产生 'DRAW'，即使最后一个方块的最后一步应该导致胜利。鉴于 if/else if 链，我不明白它是如何工作的？适用的if/else if语句是第二组。

这是我的代码：

$(document).ready(function() {
    let addX = "<h1>X</h1>"
    let addO = "<h1>O</h1>"
    let turn = []
    let board = [$("#one"), $("#two"), $("#three"), $("#four"), $("#five"),$("#six"), $("#seven"), $("#eight"), $("#nine")]
    let combos = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [6,4,2]]
    for (let i = 0; i < board.length; i++){
        board[i].click(function(){
            if (turn.length === 0){
                turn.push(board.indexOf(board[i].html(addX)) + "X")
            } else if (turn.length % 2 !== 0 && board[i].html() === ''){
                turn.push(board.indexOf(board[i].html(addO)) + "O")
            } else if (turn.length % 2 === 0 && board[i].html() === ''){
                turn.push(board.indexOf(board[i].html(addX)) + "X")
            }
            for(let i = 0; i < combos.length; i++){
                if (turn.includes(combos[i][0] + 'O') && turn.includes(combos[i][1] + 'O') && turn.includes(combos[i][2] + 'O') ){
                    alert('O IS WINNER!')
                    setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                    turn.length = 0
                } else if(turn.includes(combos[i][0] + 'X') && turn.includes(combos[i][1] + 'X') && turn.includes(combos[i][2] + 'X') ){
                    alert('X IS WINNER!')
                    setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                    turn.length = 0
                    break
                } else if (turn.length === 9){
                    alert('DRAW!')
                    setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                    turn.length = 0
                }
            }
        })
    }
});

这是一个代码笔来测试游戏本身：

https://codepen.io/tylerp33/pen/NeOxyY

基本上，游戏不应该看到有一个获胜的组合：

else if(turn.join("").includes(combos[i][0] + 'X') && turn.join("").includes(combos[i][1] + 'X') && turn.join("").includes(combos[i][2] + 'X')

在最后一个

之前

else if (turn.length === 9) 产生一个 'DRAW'?

感谢您的帮助！

Answer 1

无需更改或进行大量重构，将其添加到最后一个条件即可奏效。基本上，在决定平局之前通过所有组合进行 if/else 运行就可以了。感谢大家的帮助！

 else if (turn.length === 9 && combos[i] === combos[combos.length - 1]) {
                    alert('DRAW!')
                    setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                    turn.length = 0
                }

有趣if/elseif条件链问题

Interesting if/else if conditional chain problem

javascript

conditional

if-statement