有条件的情况下停止运行功能

问题描述 投票：1回答：1

我一直在尝试使用HTML，CSS和香草Javascript制作井字游戏。我的目标是使用模块模式。我目前无法停止我的MainGameModule.addPlayerOneSymbol（）和MainGameModule.addPlayerTwoSymbol（）。

Play.checkWinner（）将MainGameModule.continueGame更改为True，但是第一段中提到的函数内部的条件无法按预期工作。

if (continueGame) {
    return;
};

如果有人可以帮助，将不胜感激！

这是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Tic Tac Toe</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>Tic Tac Toe</h1>
        </header>
        <main>
            <div id="players">
                <div id="player-one" class="players-div">Click to Change</div>
                <div id="player-two" class="players-div">Click to Change</div>
            </div>
            <button id="resetBtn">Start/Reset</button>
            <div id="game-board">
                <div id="0" class="game-div"></div>
                <div id="1" class="game-div"></div>
                <div id="2" class="game-div"></div>
                <div id="3" class="game-div"></div>
                <div id="4" class="game-div"></div>
                <div id="5" class="game-div"></div>
                <div id="6" class="game-div"></div>
                <div id="7" class="game-div"></div>
                <div id="8" class="game-div"></div>
            </div>
        </main>

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

@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
body {
    background: #AA5042;
    font-family: 'Comic Neue', cursive;
}
h1 {
    text-align: center;
    font-family: 'Cabin Sketch', cursive;
    font-size: 80px;
    margin: 5px 0;
}
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#players {
    display: flex;
    margin: auto;
}
.players-div {
    margin: 5px 170px;
    border-radius: 5px;
    width: 150px;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #f5efd5;
}
button {
    width: 150px;
    height: 30px;
    margin: auto;
    border: none;
    outline: none;
    background-color: burlywood;
    border-radius: 5px;
    font-family: 'Comic Neue', cursive;
}
button:active {
    transform: translateY(4px);;
}
#game-board {
    height: 606px;
    width: 606px;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
}
.game-div {
    height: 200px;
    width: 200px;
    border: solid 1px black;
    background-color: burlywood;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 100px;
}
.game-div:hover {
    background-color: #E4D9C3;
}
.active-player {
    color: #AA5042;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.winningBox {
    background-color: gold;
}

const Player = (name, symbol) => { //Player factory
    return {name, symbol};
};

const Play = (() => {
    const playerOne = Player("Player One", "x");
    const playerTwo = Player("Player Two", "o");
    let continueGame ;
    const checkWinner = () => {
        //Checks rows
        for(let i = 0; i < 7; i += 3) {
            let a = MainGameModule.gameBoard[i];
            let b = MainGameModule.gameBoard[i + 1];
            let c = MainGameModule.gameBoard[i + 2];
            if(a === b && a === c && a === playerOne.symbol) {
                console.log("1");
                MainGameModule.continueGame = true; 
            } else if(a === b && a === c && a === playerTwo.symbol) {
                console.log("2");
                MainGameModule.continueGame = true;

            } 
        };
        //Checks columns
        /*for(let i = 0; i < 3; i ++) {
            let a = document.getElementById(`${i}`);
            let b = document.getElementById(`${i + 3}`);
            let c = document.getElementById(`${i + 6}`);
            if(a.innerText == b.innerText && b.innerText == c.innerText && (a.innerText === playerOne.symbol || a.innerText === playerTwo.symbol)) {
                a.classList.add("winningBox");
                b.classList.add("winningBox");
                c.classList.add("winningBox");
            }
        };*/
        /*let a = document.getElementById("0");
        let b = document.getElementById("4");
        let c = document.getElementById("8");
        if(a.innerText == b.innerText && b.innerText == c.innerText && (c.innerText === playerOne.symbol || c.innerText === playerTwo.symbol)) {
            a.classList.add("winningBox");
            b.classList.add("winningBox");
            c.classList.add("winningBox");
        }
        let d = document.getElementById("0");
        let e = document.getElementById("4");
        let f = document.getElementById("8");
        if(d.innerText == e.innerText && e.innerText == f.innerText && (f.innerText === playerOne.symbol || f.innerText === playerTwo.symbol)) {
            d.classList.add("winningBox");
            e.classList.add("winningBox");
            f.classList.add("winningBox");
        }; */
    };
    return {
        playerOne,
        playerTwo,
        checkWinner,
    }
})();

const MainGameModule = (() => {
    let gameBoard = [];
    let continueGame = false;
    const restart = () => {
        gameBoard.splice(0, gameBoard.length);
        for (const gameD of gameDiv) {
            gameD.innerText = "";
            gameD.classList.remove("winningBox");
        };
        addPlayerOneSymbol()
    };
    const push = (index, symbol) => {
        gameBoard[index] = symbol;
    };
    const changeName1 = () => {
        let newName = prompt("Player One Name:");
        playerOneName.innerText = newName;
    };
    const changeName2 = () => {
        let newName = prompt("Player Two Name:");
        playerTwoName.innerText = newName;
    };
    const addPlayerOneSymbol = () => {
        if (continueGame) {
            return;
        };
        playerTwoName.classList.remove("active-player");
        playerOneName.classList.add("active-player");
        for (const event of gameDiv) {
            event.addEventListener('click', (e) => {
                push(e.srcElement.id, Play.playerOne.symbol);
                DisplayController.render(e.srcElement.id);
                Play.checkWinner()
                addPlayerTwoSymbol(); 
            });
        };
    };
    const addPlayerTwoSymbol = () => {
        if (continueGame) {
            return;
        };
        playerOneName.classList.remove("active-player");
        playerTwoName.classList.add("active-player");
        for (const event of gameDiv) {
            event.addEventListener('click', (e) => {
                push(e.srcElement.id, Play.playerTwo.symbol);
                DisplayController.render(e.srcElement.id);
                Play.checkWinner();
                addPlayerOneSymbol(); 
            });
        };
    };
    const resetBtn = document.querySelector("#resetBtn");
    resetBtn.addEventListener('click', restart);
    const gameDiv = document.querySelectorAll(".game-div");
    const playerOneName = document.querySelector("#player-one");
    playerOneName.addEventListener('click', changeName1);
    const playerTwoName = document.querySelector("#player-two");
    playerTwoName.addEventListener('click', changeName2);
    return {
        gameBoard,
        continueGame,
        restart,
        push,
        changeName1,
        changeName2,
    }   
})();

const DisplayController = (() => {
    const render = (i) => {
        const gameDiv = document.getElementById(`${i}`);
        gameDiv.innerHTML = MainGameModule.gameBoard[i];
    };
    return {
        render,
    }
})();
javascript html css module-pattern
1个回答
1
投票
if(MainGameModule.continueGame) { return; }

代替

if(continueGame) {
  return;
 }

或者您可以更改 continueGame = true 代替 MainGameModule.continueGame = true

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.