javascript - 我的井字游戏 (jquery) 无法正常工作。丢失的部分无法正常工作
问题描述
'Win' 和 'Draw' 部分会按时显示,但 'Lost' 部分不会显示消息“你输了”,直到我再次单击一个空单元格。请检查我的代码并帮助我找出任何错误。
下面是我的代码:
Marked 是一个改变被点击单元格不透明度的类。1,2,3 ...是表格(html)中各个单元格的ID。
我也尝试了 delay() 而不是 setTimeout(),但效果不佳。
$(document).ready(function() {
var timer;
var x = 0;
$("td").click(function() {
if($(this).text()=='') {
$(this).text("0").addClass("marked");
x = 1;
}
}).click(function() {
if(x==1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random()*choose.length)];
$(random).text("X").addClass("marked");
},1000);
x=0;
showResult();
}
});
function showResult() {
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if(one==two && two==three)
result(one)
else if (four==five && five==six)
result(four)
else if(seven==eight && eight==nine)
result(seven)
else if (one==four && four==seven)
result(one)
else if (two==five && five==eight)
result(two)
else if (three==six && six==nine)
result(three)
else if (one==five && five==nine)
result(one)
else if(three==five && five==seven)
result(three);
else {
var z = $("td").not(".marked");
if(z.length == 0) {
$("p").text("Draw!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/54c63f726505bfdb455eb4c29e626ad8/tenor.gif">');
clearTimeout(timer);
}
}
}
function result(y) {
var result = y;
if(result=="X"){
clearTimeout(timer);
$("p").text("You Lost!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/08902a85a6107684f8614846f4a54218/tenor.gif">');
}
if(result=="0") {
$("td").text("");
$("p").text("You Won!");
$("#demo1").append('<img src="https://i.gifer.com/4OuC.gif">');
$("td").removeClass("marked");
clearTimeout(timer);
}
}
});
解决方案
当用户单击时,您立即调用 showResult ,因此它无法识别一秒钟后放入表中的 X 。
做就是了:
$("td").click(function() {
[...]
}).click(function() {
if (x == 1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random() * choose.length)];
$(random).text("X").addClass("marked");
/******** ADD ANOTHER CHECK HERE ********/
showResult();
}, 1000);
x = 0;
showResult();
}
});
向 showResult 添加一个返回值可能也是一个好主意,它在获得结果时返回 false。这样你就可以做类似的事情
x = 0;
if (showResult()) {
timer = setTimeout(function() {
[...]
}
}
并且用户不能在获胜消息后立即收到松散的消息。
另外:为什么需要 2 click listeners?您可以只使用顶部的 if 语句,然后您就不需要(x == 1)
推荐阅读
- swift - 使用 XMPPFramework CoreData 存储文件
- gwt - GWT Material DatePicker 在选项卡更改时自动打开
- android - 使用 SQLiteDataBase 获取常量值
- ionic-framework - Ionic 2 如何动态搜索 Estimote Beacon
- python - itertools.combinations 的保证是什么?
- python - 如何在python中获取内存中复杂对象的二进制表示(打开“rb”)?
- android - Android如何设置ImageButton可访问性焦点
- r - 无法在 Rshiny 中显示绘图
- javascript - Laravel:从控制器获取错误响应,但在控制台上键入错误并且响应消息未显示在视图页面上
- javascript - 使用 Electron 时,设计 HTML/CSS 布局的最佳方式是什么?