2
我对JS比较陌生，一直在做Tic Tac Toe游戏。我认为我是那里的90％，但是我有一个令人讨厌的bug，在第一场比赛结束后（即新的比赛出现时）出现。在这个游戏中，当相应的玩家点击它时，每个方块都会被赋予一个类（'x'或'o'）。游戏逻辑检查该玩家是否有任何游戏获胜组合，以及他们是否重置游戏（移除'x'和'o'瓦片类别）。这似乎工作，但随后在下一轮中点击，一些瓷砖被给予'x'和'o'类，这基本上打破了游戏。例如，可以用'x'，'x'和'o'这一行赢得游戏。'Tic Tac Toe'课的麻烦
编辑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 2014-11-22 17:44:34