Question

我是JS的新手，并且一直在做Tic Tac Toe游戏作为练习。我认为我有90％的方式，但是我在第一次播放后出现了一个烦人的错误（即，当一个新游戏被渲染时）。在这个游戏中，当相应的玩家点击它时，每个方块都有一个类（'x'或'o'）。游戏逻辑检查该玩家是否具有任何游戏获胜组合，以及他们是否重置游戏（移除'x'和'o'瓦片类）。这似乎有效，但是在随后的下一轮点击中，一些牌被赋予“x”和“o”类，这基本上打破了游戏。例如，可以使用“x”，“x”和“o”行赢得游戏。

编辑1：好的，我认为问题是newGame（）运行了两次。仍试图找出解决方案。

我一直都在寻找答案，但无济于事！我在下面提供了我的代码。谢谢！

$(document).ready(function() {
	var xTurn = true;
	var xScore = 0;
	var oScore = 0;
	var count = 0;

	newGame();

	function newGame() {

		$("td").removeClass();
		$("td").empty();
		count = 0;
		xTurn = true;

		render();
		game();
	}

	function render() {
		$("#xScore").text("x Score: " + xScore);
		$("#oScore").text("o Score: " + oScore);
	}

	function game() {
		$("td").on("click", function () {
			var self = $(this);
			if (xTurn) {
				self.text("X");
				self.addClass("x");
			}
			else {
				$(this).text("O");
				self.addClass("o");
			}
			xTurn = !xTurn;
			$(this).off("click");
			count ++;
			scoreEval();
		});

		function scoreEval() {
			if  (
				$("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') ||
				$("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') ||
				$("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') ||
				$("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') ||
				$("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') ||
				$("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') ||
				$("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') ||
				$("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')
				) {
					xScore ++;
					alert("Player X has won the game!");
					newGame();
			}
			else if (
				$("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') ||
				$("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') ||
				$("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') ||
				$("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') ||
				$("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') ||
				$("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') ||
				$("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') ||
				$("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')
				) {
					oScore ++;
					alert("Player O has won the game!");
					newGame();
			}
			else if (count === 9) {
				alert("Draw!");
				newGame();
			}
		}
	}

});

table, td {
   border: 1px solid black;
   font-size: 50px;
   text-align: center;
}

td {
	height: 100px;
	width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
	<title>Tic Tac Toe</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id="score">
		<p>Score</p>
		<p id="xScore"></p>
		<p id="oScore"></p>
	</div>
	<table>
		<tr>
			<td id="one"></td>
			<td id="two"></td>
			<td id="three"></td>
		</tr>
		<tr>
			<td id="four"></td>
			<td id="five"></td>
			<td id="six"></td>
		</tr>
		<tr>
			<td id="seven"></td>
			<td id="eight"></td>
			<td id="nine"></td>
		</tr>
	</table>
	<script src="script.js"></script>
</body>
</html>

Answer 1

在执行任何操作之前，如果已分配X或O，则应检入onClick事件。我通过点击已经包含X / O的框来重现错误。

'Tic Tac Toe'课程的麻烦

1 个答案: