这部分代码没有激活，{ document.getElementsByClassName("info")[0].innerText = "Turn for " + turn; } 无法显示玩家转弯

Question

我正在制作 tic-tac-toe 游戏。我在显示玩家 (,) 的转弯时遇到了一点问题。获胜的比赛正在展示，但我找不到我做错的地方，所以我无法让它发挥作用。 未显示玩家回合。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>The tic-tac-toe</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <nav>
            <ul>
                <li>MyTictacToe.com</li>
            </ul>
        </nav>

        <div class="gameContainer">
            <div class="Container">
                <div class="box bt-0 bt-l-0"><span class="Btext"></span></div>
                <div class="box bt-0"><span class="Btext"></span></div>
                <div class="box bt-0 bt-r-0"><span class="Btext"></span></div>
                <div class="box bt-l-0"><span class="Btext"></span></div>
                <div class="box"><span class="Btext"></span></div>
                <div class="box bt-r-0"><span class="Btext"></span></div>
                <div class="box bt-b-0 bt-l-0"><span class="Btext"></span></div>
                <div class="box bt-b-0"><span class="Btext"></span></div>
                <div class="box bt-b-0  bt-r-0"><span class="Btext"></span></div>
            </div>

            <div class="gameInfo">
                <h1>Welcome to tic-tac-toe</h1>
                <div>
                    <span class="info">TURN FOR X</span>
                    <button id="reset">reset</button>
                </div>
                <div class="imgbox">
                    <img src="babe.gif" alt="dancing-babe">
                </div>
            </div>
        </div>
    </body>

    <script src="script.js"></script>
</html>

我的 JavaScript 代码来了。一切正常，但不知何故轮不到玩家，只有游戏获胜状态显示 (,)。我检查了很多次，我想我遗漏的东西很少而且找不到。我该如何解决？

var music = new Audio("music.mp3");
var beep = new Audio("beep.mp3");
var gameover = new Audio("gameover.mp3");
let turn = "X"
let isGameover = false;

// Function to change the turn

var changeTurn = ()=>{

    return  turn === "X"?"0":"X"
}

// Function to check for a win

const checkWin = ()=> {
    let boxtexts = document.getElementsByClassName('Btext');
    let wins = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ]
    wins.forEach(e =>{
        if((boxtexts[e[0]].innerText === boxtexts[e[1]].innerText) && (boxtexts[e[1]].innerText === boxtexts[e[2]].innerText) && (boxtexts[e[0]].innerText !==" ")){
            document.querySelector('.info').innerText = "player" + boxtexts[e[0]].innerText + "         WON";
            isGameover = true;
        }
    })

}

// Game logic
var boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach((element)=> {
    let boxtext = element.querySelector('.Btext');
    element.addEventListener('click', ()=> {
        if(boxtext.innerText === '') {
            boxtext.innerText = turn;
            turn = changeTurn();
            beep.play();
            checkWin();
            if(!isGameover){
                document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
            }
        }
    })
});

Answer 1

在 wins.forEach 最后一个 if 检查应该是
(boxtexts[e[0]].innerText !== "")
而不是
(boxtexts[e[0]].innerText !== " ")

这部分代码没有激活，{ document.getElementsByClassName("info")[0].innerText = "Turn for " + turn; } 无法显示玩家转弯

This part of code is not activating, { document.getElementsByClassName("info")[0].innerText = "Turn for " + turn; } cannot show the player turn

javascript

project

tic-tac-toe