Я делаю проект класса для ti c -ta c -toe (я абсолютный новичок, занимаюсь кодированием только около 2 месяцев и только недавно попал в javascript и jquery, поэтому, пожалуйста не судите мои очень ржавые навыки лол). В конце игры у меня возникла проблема: после объявления победителя вы можете продолжать щелкать по пустым квадратам на доске. Есть ли способ предотвратить это? Код ниже, спасибо! (Я также знаю, что мои условия выигрыша нужно немного исправить)
let currentPlayer = "X";
$(".cell").on('click', function() {
if (currentPlayer == "X" && $(this).hasClass("takenByX" || "takenByO")) { //checks to see if square has been played
(""); //does nothing
} else if (currentPlayer == "X") {
$(this).text("X").addClass("takenByX"); //change clicked square to x & adds class taken
playerChange();} //runs player change function
if(currentPlayer == "O" && $(this).hasClass("takenByX" || "takenByO")) { //checks to see if square has been played
(""); //does nothing
} else if (currentPlayer == "O") {
$(this).text("0").addClass("takenByO"); //change clicked square to o & adds class taken
playerChange(); //runs player change function
}});
function playerChange() {
if (currentPlayer === "X"){ //if current player is x, then switch to o
currentPlayer = "O";
} else {
currentPlayer = "X"; //if current player is not x then switch to x
}
winner();
}
$("button").on('click', function() { //click function for restart game button
$('.cell').text(""); //removes all added text from the cells
$('.cell').removeClass("takenByX"); //removes the taken class from the cells
$('.cell').removeClass("takenByO");
$('h1').text("C R O S S E S & & N O U G H T S").append;
if (currentPlayer == "O"){
playerChange(); //changes back to player x so o doesnt play first
}
});
function winner(){
if (
$(".cell1" && ".cell2" && ".cell3").hasClass("takenByX") || // -
$(".cell1" && ".cell5" && ".cell9").hasClass("takenByX") || // \
$(".cell1" && ".cell4" && ".cell7").hasClass("takenByX") || // |
$(".cell2" && ".cell5" && ".cell8").hasClass("takenByX") || // |
$(".cell3" && ".cell6" && ".cell9").hasClass("takenByX") || // |
$(".cell4" && ".cell5" && ".cell6").hasClass("takenByX") || // -
$(".cell7" && ".cell8" && ".cell9").hasClass("takenByX") // -
){
$('h1').text("Congratulations Winner!").append;
} else {
(""); //do nothing
}}
if (
$(".cell1" && ".cell2" && ".cell3").hasClass("takenByO") || // -
$(".cell1" && ".cell5" && ".cell9").hasClass("takenByO") || // \
$(".cell1" && ".cell4" && ".cell7").hasClass("takenByO") || // |
$(".cell2" && ".cell5" && ".cell8").hasClass("takenByO") || // |
$(".cell3" && ".cell6" && ".cell9").hasClass("takenByO") || // |
$(".cell4" && ".cell5" && ".cell6").hasClass("takenByO") || // -
$(".cell7" && ".cell8" && ".cell9").hasClass("takenByO") // -
){
$('h1').text("Congratulations Winner!").append;
} else {
(""); //do nothing
}
//if a winner is declared stop allowing clicks?
body {
background-image: url("https://wallpaperboat.com/wp-content/uploads/2019/06/minimalist-desktop-11.jpg");
font-family: 'Amatic SC', cursive;
}
h1 {
font-size: 75px;
align-items: center;
text-align: center;
text-shadow: 2px 2px #196775;
}
section {
text-align: center;
}
.container {
display: grid;
grid-template-columns: repeat(3, auto);
width: 600px;
margin: 50px auto;
}
.cell {
font-family: 'Major Mono Display', monospace;
width: 200px;
height: 200px;
box-shadow: 0 0 0 1px #196775;
border: 1px solid #196775;
font-size: 150px;
color: rgb(0, 35, 46);
justify-content: center;
text-align: center;
padding-top: 20px;
}
.restart {
transition-duration: 0.4s;
background-color: lightsteelblue;
font-family: 'Amatic SC', cursive;
color: black;
text-align: center;
padding: 5px 5px;
border: none;
text-decoration: none;
font-size: 30px;
text-shadow: 1px 1px 1px #196775;
box-shadow: 0 10px 15px 0 #196775;
outline: none;
}
.restart:hover {
box-shadow: 0 10px 15px 0 rgb(43, 43, 43);
background-color: rgb(19, 114, 109);
color: black;
}
footer {
font-size: 20px;
bottom: 0;
width: 100%;
justify-content: center;
text-align: center;
font-family: 'Amatic SC', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Major+Mono+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<title>crosses & noughts</title>
</head>
<body>
<h1>C R O S S E S && N O U G H T S</h1><br>
<section>
<div class="container">
<div class="cell , cell1"></div>
<div class="cell , cell2"></div>
<div class="cell , cell3"></div>
<div class="cell , cell4"></div>
<div class="cell , cell5"></div>
<div class="cell , cell6"></div>
<div class="cell , cell7"></div>
<div class="cell , cell8"></div>
<div class="cell , cell9"></div>
</div>
<button class="restart">Restart Game</button>
<footer>Made by Falon B. Landers</footer>
</section>
</body>
</html>