javascript - 我的井字游戏 (jquery) 无法正常运行。丢失的零件无法正常工作

Question

'Win' 和 'Draw' 部分会按时显示，但 'Lost' 部分不会显示消息 'you 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);
        }
    } 
});

Answer 1

您在用户点击时立即调用 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 添加一个 return 也是一个好主意，它在获得结果时返回 false。这样你就可以做类似的事情

x = 0;
if (showResult()) {
    timer = setTimeout(function() {
        [...]
    }
}

并且用户无法在获胜消息后立即收到松散消息。

另外:为什么需要 2 个点击监听器？您可以只使用顶部的 if 语句，然后就不需要 (x == 1)