javascript if 条件中的井字游戏逻辑错误

Question

我确实将逻辑写入了 if 条件，但我发现 if/else if 条件计算了 && 运算符计算结果为真的次数，因此逻辑变得错误（如果您首先放入 2 x 和 1 个圆圈行它会将它视为 x 的 2 次胜利，如果有 3 个 Xs，它将评估为 3 次胜利）所以我尝试了很多方法但我被卡住了..提前感谢

这是我的代码

const divs = document.querySelectorAll(".game");

let counter = 0;

const circle = "public/Mat/circle.svg"

const cross = "public/Mat/cross.svg"

const player1 = {
    win : 0,
    lose : 0,
    sign : "public/Mat/circle.svg"
}

const player2 = {
    win : 0,
    lose : 0,
    sign : "public/Mat/cross.svg"
}

const track = [];

for(let i = 0; i< divs.length; i++) {
    divs[i].addEventListener('click', action);
    let x = document.createElement("img");
    divs[i].append(x);
}

function action() {
    if(this.firstChild.src === "") {
        counter++;
        track.push(counter)
        let m = this.firstChild.src;
        track.forEach(element => {
            if(element % 2 == 0){
                this.firstChild.src = circle;
                check()
            } else{ 
                this.firstChild.src = cross;
                check()
            }
            if (track.length == 9) {
                console.log("draw");
            }
        });
    }
        
}


function check() {
            let host = "http://127.0.0.1:5500/";
            let crs = host+cross;
            let crc = host+circle;
        if( // cross wins  player 2
                (divs[0].firstChild.src === crs && divs[1].firstChild.src === crs && divs[2].firstChild.src === crs) || 
                (divs[3].firstChild.src === crs && divs[4].firstChild.src === crs && divs[5].firstChild.src === crs) || 
                (divs[6].firstChild.src === crs && divs[7].firstChild.src === crs && divs[8].firstChild.src === crs) ||
                (divs[0].firstChild.src === crs && divs[3].firstChild.src === crs && divs[6].firstChild.src === crs) || 
                (divs[1].firstChild.src === crs && divs[4].firstChild.src === crs && divs[7].firstChild.src === crs) ||
                (divs[2].firstChild.src === crs && divs[5].firstChild.src === crs && divs[8].firstChild.src === crs) ||
                (divs[0].firstChild.src === crs && divs[4].firstChild.src === crs && divs[8].firstChild.src === crs) ||
                (divs[2].firstChild.src === crs && divs[4].firstChild.src === crs && divs[6].firstChild.src === crs) 
            ){
                player2.win +=1;
                player1.lose +=1;
                console.log(player2.win);
        } else if( // circle win player 1
                (divs[0].firstChild.src === crc && divs[1].firstChild.src === crc && divs[2].firstChild.src === crc) || 
                (divs[3].firstChild.src === crc && divs[4].firstChild.src === crc && divs[5].firstChild.src === crc) || 
                (divs[6].firstChild.src === crc && divs[7].firstChild.src === crc && divs[8].firstChild.src === crc) ||
                (divs[0].firstChild.src === crc && divs[3].firstChild.src === crc && divs[6].firstChild.src === crc) || 
                (divs[1].firstChild.src === crc && divs[4].firstChild.src === crc && divs[7].firstChild.src === crc) ||
                (divs[2].firstChild.src === crc && divs[5].firstChild.src === crc && divs[8].firstChild.src === crc) ||
                (divs[0].firstChild.src === crc && divs[4].firstChild.src === crc && divs[8].firstChild.src === crc) ||
                (divs[2].firstChild.src === crc && divs[4].firstChild.src === crc && divs[6].firstChild.src === crc)
            ){
                player1.win +=1;
                player2.lose +=1   ; 
                console.log(player1.win);
    }
}

* {
    margin: 0;
    padding: 0;
}

#grid {
    display: grid;
    grid-template-areas:
    "title title title title title"
    "playerOne 1st 2nd 3rd playerTwo"
    "playerOne 4th 5th 6th playerTwo"
    "playerOne 7th 8th 9th playerTwo"
    ;
}

.game {
    border: 2px solid red;
    height: 20vh;
    border-collapse: collapse;
}

#title {
    grid-area: title;
    text-align: center;
    font-size: 8vh;
}

#it1 {
    grid-area: 1st;
}

#it2 {
    grid-area: 2nd;
}

#it3 {
    grid-area: 3rd;
}

#it4 {
    grid-area: 4th;
}

#it5 {
    grid-area: 5th;
}

#it6 {
    grid-area: 6th;
}

#it7 {
    grid-area: 7th;
}

#it8 {
    grid-area:8th;
}

#it9 {
    grid-area:9th;
}

#player1 {
    grid-area: playerOne;
    text-align: center;
}

#player2 {
    grid-area: playerTwo;
    text-align: center;
}

img {
   max-width: 70%;
   max-height: 70%;
}

div {
    display: flex;
    justify-content: center;
    align-items: center;
}

<!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">
    <link rel="stylesheet" href="public/css/style.css">
    <title>TicTac</title>
</head>
<body>
    <section id="grid">
        <div id="title"><h1>Tic Tac Game</h1></div>
        <div id="it1" class="game"></div>
        <div id="it2" class="game"></div>
        <div id="it3" class="game"></div>
        <div id="it4" class="game"></div>
        <div id="it5" class="game"></div>
        <div id="it6" class="game"></div>
        <div id="it7" class="game"></div>
        <div id="it8" class="game"></div>
        <div id="it9" class="game"></div>
        <div id="player1">
            <h2>Player 1</h2>
        </div>
        <div id="player2">
            <h2>player 2</h2>
        </div>
    </section>
    <script src="public/js/index.js"></script>
</body>
</html>

Answer 1

我发现问题出在 for each 方法中，所以我修改了它并改用 if 条件，它工作正常:))

function action() {
if(this.firstChild.src === "") {
    counter++;
    track.push(counter)
    if(counter % 2 == 0) {
        this.firstChild.src = circle;
        check()
    } else if(!counter % 2 == 0) {
        this.firstChild.src = cross;
        check()
    }
}

}

javascript if 条件中的井字游戏逻辑错误

javascript tic-tac-toe logic error in if conditions

javascript

if-statement

tic-tac-toe