使用css3使用javascript的tictactoe_Javascript

使用css3使用javascript的tictactoe

javascript

使用css3使用javascript的tictactoe,javascript,Javascript,我正在使用JavaScript编写简单的Tictatcoe游戏，但是它显示了某人赢了！！！在第一次点击板，我知道我很接近，但我不能在我的代码中找到问题 <!DOCTYPE html> <html> <head> <style> .board{ display: flex; width: 600px; height: 600px; f

我正在使用JavaScript编写简单的Tictatcoe游戏，但是它显示了某人赢了！！！在第一次点击板，我知道我很接近，但我不能在我的代码中找到问题

<!DOCTYPE html>
<html>
<head>
   <style>
        .board{
            display: flex;
            width: 600px;
            height: 600px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
       .square{
           width: 200px;
           height: 200px;
           box-sizing: border-box;
           border: 5px solid black;
           font-size: 5em;
           display: flex;
           justify-content: center;
           align-items: center;
       }
       .square:hover{
           cursor: pointer;
           background-color: #80cd92;
       }
   </style>
</head>
<body>

<div class="board">
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
</div>

<script>
    var PLAYER_ONE_SYMBOL = 'X'
    var PLAYER_TWO_SYMBOL = 'O'
    var currentTurn = PLAYER_ONE_SYMBOL

    var board  = document.querySelector('.board')
    board.addEventListener('click',function(e) {
        e.target.innerHTML = currentTurn
        currentTurn = currentTurn === PLAYER_ONE_SYMBOL ? PLAYER_TWO_SYMBOL : PLAYER_ONE_SYMBOL
        if (checkForWinner())
        {alert(" somebody won !!! ")}
    })

    function checkForWinner(){
        var squares = Array.prototype.slice.call(document.querySelectorAll('.square'), 0)
        var symbols = squares.map(function(square) {
            return square.innerHTML
        } )
        var winningCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]]
          return winningCombos.find(function(combo)
          {
            if(symbols[combo[0]]==symbols[combo[1]]&&symbols[combo[1]]==symbols[combo[2]])
            {return symbols[combo[0]]}
            else {return false}

                 })
    }

</script>
</body>
</html>

方格的初始值都是相同的空间，这就是为什么第一次评估会产生一个获胜的组合。字段0、1和2都具有相同的值

您不仅需要评估所有三个字段是否具有相同的值，还需要评估它们是否等于X或O

或者，您可以根据空字符串的计算结果为falsy的事实，执行如下操作：

非常感谢Robby你解决了这个问题！！！我花了几个小时在这段代码上，试图找出问题所在我很高兴你能帮助我，再次感谢

if(symbols[combo[0]] == symbols[combo[1]]
        && symbols[combo[1]] == symbols[combo[2]]) {

    return symbols[combo[0]].trim(); // will return 'X', 'O' or empty string
}