I've been trying to make a Tic Tac Toe game using HTML,CSS and vanilla Javascript. My goal for this is to use the module pattern. I'm currently having trouble stopping my MainGameModule.addPlayerOneSymbol() and MainGameModule.addPlayerTwoSymbol().
Play.checkWinner() will change MainGameModule.continueGame to True, however the conditional inside the mentioned functions in the first paragraph doesn't work as intended.
if (continueGame) {
return;
};
If anyone could help, it would be greatly appreciated!
Here is my code.
<!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,
}
})();
As checked you are setting value true to MainGameModule.continueGame so your condition should be
instead of
or you can change the value of
continueGame = true
instead of
MainGameModule.continueGame = true