turn_counter不重置jquery
turn_counter不重置jquery
提问于 2015-05-02 14:45:20
我正试着建立一个jQuery的Tic-Tic toe游戏。我会粘贴整个东西，所以你只需要使用一个文件。我遇到的问题是，每次赢/平后，clearboard()函数需要重置板以及以前游戏中分配的所有类。现在它在技术上是正确的，但只有一轮，第二轮一到，整个程序就开始出现故障，开始增加2，然后开始新的游戏，已经添加了类，计数器已经增加了。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Tic-Tac-Toe</title>
<meta name="description" content="Simple Tic-Tac-Toe game built using HTML5, JavaScript, jQuery, and CSS." />
<meta name="keywords" content="tic-tac-toe, game, html5, javascript, jquery, css" />
<meta name="viewport" content="width = device-width" />
<style type="text/css">
body {
font-size: 1.5em;
font-family: Helvetica, Arial;
text-align: center;
font-weight: italic;
}
@media screen and (max-width: 800px) {
body {
font-size: 1.3em;
}
}
@media screen and (max-width: 700px) {
body {
font-size: 1.1em;
}
}
@media screen and (max-width: 550px) {
body {
font-size: 0.8em;
}
}
table {
margin: 0 auto;
cursor: default;
border-spacing: 0;
width: 23em;
height: 30em;
}
td {
padding: 0;
width: 33.3%;
height: 33.3%;
font-size: 8em;
text-align: center;
}
table, td { /* by giving both a 1px border, everything gets a 2px border on all sides */
border: 1px solid red;
}
body, td:hover {
cursor: pointer;
background-color: gray;
}
body, td.taken:hover {
cursor: default;
background-color: inherit;
}
td.win {
background-color: blue;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
// JQuery starts here.......
$(document).ready(function(){
var turn_counter = 0;
var xWins = 0;
var oWins = 0;
var ties = 0;
clearBoard();
function move(){
$(this).off('click');
if(turn_counter % 2 == 0)
{
$(this).text("x");
$(this).addClass("x");
} else if(turn_counter % 2 != 0)
{
$(this).text("o");
$(this).addClass("o");
};
check_board();
showScores();
turn_counter++;
console.log(turn_counter);
}
function showScores(){
$('#xWins').text(xWins);
$('#oWins').text(oWins);
$('#ties').text(ties);
}
function check_board(){
if(turn_counter === 9){
alert("It's a TIE!!!");
ties++;
turn_counter = 0;
clearBoard();
} else if (
$('#1').hasClass('x') && $('#2').hasClass('x') && $('#3').hasClass('x') ||
$('#4').hasClass('x') && $('#5').hasClass('x') && $('#6').hasClass('x') ||
$('#7').hasClass('x') && $('#8').hasClass('x') && $('#9').hasClass('x') ||
$('#1').hasClass('x') && $('#4').hasClass('x') && $('#7').hasClass('x') ||
$('#2').hasClass('x') && $('#5').hasClass('x') && $('#8').hasClass('x') ||
$('#3').hasClass('x') && $('#6').hasClass('x') && $('#9').hasClass('x') ||
$('#1').hasClass('x') && $('#5').hasClass('x') && $('#9').hasClass('x') ||
$('#3').hasClass('x') && $('#5').hasClass('x') && $('#7').hasClass('x'))
{
alert("Player X has won!!!");
xWins++;
turn_counter = 0;
clearBoard();
} else if (
$('#1').hasClass('o') && $('#2').hasClass('o') && $('#3').hasClass('o') ||
$('#4').hasClass('o') && $('#5').hasClass('o') && $('#6').hasClass('o') ||
$('#7').hasClass('o') && $('#8').hasClass('o') && $('#9').hasClass('o') ||
$('#1').hasClass('o') && $('#4').hasClass('o') && $('#7').hasClass('o') ||
$('#2').hasClass('o') && $('#5').hasClass('o') && $('#8').hasClass('o') ||
$('#3').hasClass('o') && $('#6').hasClass('o') && $('#9').hasClass('o') ||
$('#1').hasClass('o') && $('#5').hasClass('o') && $('#9').hasClass('o') ||
$('#3').hasClass('o') && $('#5').hasClass('o') && $('#7').hasClass('o'))
{
alert("Player O has won!!!");
oWins++;
turn_counter = 0;
clearBoard();
}
}
function clearBoard(){
showScores();
$("td").text('')
$("td").removeAttr('class');
$("td").on('click', move);
turn_counter = 0;
}
});
</script>
</head>
<body>
<h1>Welcome!!!!</h1>
<h2>jQuery Tic-Tac-Toe</h2>
<p>Score: <span id="xWins"></span> - <span id="oWins"></span><br>Tie Count: <span id="ties"></span></p>
<table>
<caption>Match Arena</caption>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-02 15:06:48
问题是move函数中函数调用的顺序。如果一个玩家赢了，你就从check_board打电话给check_board，然后直接通过turn_counter++在move上增加turn_counter，即使没有新的举动发生。
此外，有些字段可能有双击处理程序，因为您只是在单击的字段中删除它们。如果在上一轮中未单击某个字段，则该字段有两个处理程序。您可以通过在off中调用clearBoard：$("td").off('click').on('click', move);来防止这种情况发生。
我做了个小提琴，试图解决这些问题：http://jsfiddle.net/qpfc455w/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30003612
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号