2
Я относительно новичок в JS и работал над игрой Tic Tac Toe в качестве упражнения. Я думаю, что у меня 90% пути, но у меня есть неприятная ошибка, возникающая после первой игры (т. Е. При рендеринге новой игры). В этой игре каждому квадрату присваивается класс ('x' или 'o'), когда соответствующий игрок нажимает на него. Логика игры проверяет, имеет ли этот игрок какую-либо из выигрышных комбинаций, и если они сбрасывают игру (удаление классов «x» и «o»). Кажется, что это работает, но после последующего нажатия в следующем раунде некоторые плитки даются классами «x» и «o», что в основном нарушает игру. Например, игру можно выиграть с помощью строки «x», «x» и «o».Проблемы с «Tic Tac Toe» Классы
EDIT 1: Хорошо, поэтому я думаю, что проблема в том, что newGame() работает дважды. Все еще пытаюсь найти решение.
Я искал каждого ответа на этот вопрос, но безрезультатно! Я включил свой код ниже. Благодаря!!
$(document).ready(function() {
\t var xTurn = true;
\t var xScore = 0;
\t var oScore = 0;
\t var count = 0;
\t newGame();
\t function newGame() {
\t \t $("td").removeClass();
\t \t $("td").empty();
\t \t count = 0;
\t \t xTurn = true;
\t \t render();
\t \t game();
\t }
\t function render() {
\t \t $("#xScore").text("x Score: " + xScore);
\t \t $("#oScore").text("o Score: " + oScore);
\t }
\t function game() {
\t \t $("td").on("click", function() {
\t \t \t var self = $(this);
\t \t \t if (xTurn) {
\t \t \t \t self.text("X");
\t \t \t \t self.addClass("x");
\t \t \t }
\t \t \t else {
\t \t \t \t $(this).text("O");
\t \t \t \t self.addClass("o");
\t \t \t }
\t \t \t xTurn = !xTurn;
\t \t \t $(this).off("click");
\t \t \t count ++;
\t \t \t scoreEval();
\t \t });
\t \t function scoreEval() {
\t \t \t if (
\t \t \t \t $("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') ||
\t \t \t \t $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') ||
\t \t \t \t $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') ||
\t \t \t \t $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') ||
\t \t \t \t $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') ||
\t \t \t \t $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') ||
\t \t \t \t $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') ||
\t \t \t \t $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')
\t \t \t \t) {
\t \t \t \t \t xScore ++;
\t \t \t \t \t alert("Player X has won the game!");
\t \t \t \t \t newGame();
\t \t \t }
\t \t \t else if (
\t \t \t \t $("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') ||
\t \t \t \t $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') ||
\t \t \t \t $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') ||
\t \t \t \t $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') ||
\t \t \t \t $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') ||
\t \t \t \t $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') ||
\t \t \t \t $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') ||
\t \t \t \t $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')
\t \t \t \t) {
\t \t \t \t \t oScore ++;
\t \t \t \t \t alert("Player O has won the game!");
\t \t \t \t \t newGame();
\t \t \t }
\t \t \t else if (count === 9) {
\t \t \t \t alert("Draw!");
\t \t \t \t newGame();
\t \t \t }
\t \t }
\t }
});table, td {
border: 1px solid black;
font-size: 50px;
text-align: center;
}
td {
\t height: 100px;
\t width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
\t <title>Tic Tac Toe</title>
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
\t <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
\t <div id="score">
\t \t <p>Score</p>
\t \t <p id="xScore"></p>
\t \t <p id="oScore"></p>
\t </div>
\t <table>
\t \t <tr>
\t \t \t <td id="one"></td>
\t \t \t <td id="two"></td>
\t \t \t <td id="three"></td>
\t \t </tr>
\t \t <tr>
\t \t \t <td id="four"></td>
\t \t \t <td id="five"></td>
\t \t \t <td id="six"></td>
\t \t </tr>
\t \t <tr>
\t \t \t <td id="seven"></td>
\t \t \t <td id="eight"></td>
\t \t \t <td id="nine"></td>
\t \t </tr>
\t </table>
\t <script src="script.js"></script>
</body>
</html>
Вы должны добавить javascript к своим тегам вопроса, чтобы получить лучший ответ – searchengine27