Я пытался сделать игру Ti c Ta c Toe, используя HTML, CSS и vanilla 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,
}
})();