Question

所以，一切正常，变量移动每次播放器和机器人播放时都会增加，但是当我点击那里只有一个洞时，页面就会冻结。如果我将游戏更改为pvp（没有机器人）游戏运行正常，画面也很好。

可能导致什么？以及如何解决？

守则：

var moves = 0;
    var randomOneTwo = doGetRandom(1,2)
    var randomPlayBot = 0;
    var turn = randomOneTwo == 1 ? "X": "O"
    var score1 = 0;
    var score2 = 0;
    var win = 0;
    var canPlay = false;
    var dummy = score2;
    var dummy2 = score1;
    var whoWon = 5;

    window.addEventListener("load", _loaded);
    function _loaded() {
        document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
        var ids = ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9'];
        var vale = [0, 0, 0, 0, 0, 0, 0, 0, 0 ,0];

        for (var i = 0; i < ids.length; i++) {
            document.getElementById(ids[i]).addEventListener("click", doSet);

        }

        addEventListener("click", bot);
        addEventListener("click", doWin);


        function doSet(){
            if (this.innerHTML !== "") {
                return;
            }
            this.innerHTML = turn;
            moves++
            canPlay = true;

            turn == "X" ? turn = "O": turn = "X"
            document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
            turn == "X" ? vale[nc] = 100: vale[nc] = -100;
        }

        function bot(){
            if ((canPlay == true) && (document.getElementById("bplays").checked == true)) {
                do{
                    randomPlayBot = doGetRandom(0, 8)
                }
                while(document.getElementById(ids[randomPlayBot]).innerHTML !== "")


                document.getElementById(ids[randomPlayBot]).innerHTML = turn;
                moves++

                turn == "X" ? turn = "O": turn = "X"
                document.getElementById("plpl").textContent = "The Player  " + turn + " is playing."
                turn == "X" ? vale[randomPlayBot] = 100: vale[randomPlayBot] = -100;

                canPlay = false;
            }
        }

        function doWin(){
            console.log(vale)
            let sum1 = vale[0] + vale[1] + vale[2];
            let sum2 = vale[3] + vale[4] + vale[5];
            let sum3 = vale[6] + vale[7] + vale[8];
            let sum4 = vale[0] + vale[3] + vale[6];
            let sum5 = vale[1] + vale[4] + vale[7];
            let sum6 = vale[2] + vale[5] + vale[8];
            let sum7 = vale[0] + vale[4] + vale[8];
            let sum8 = vale[2] + vale[4] + vale[6];
            for (i = 0; i <= 8; i++) {
                if ((sum1 == 300 || sum2 == 300 || sum3 == 300 || sum4 == 300 || sum5 == 300 || sum6 == 300 || sum7 == 300 || sum8 == 300)) {
                    whoWon = 1;
                    score2 == dummy ? score2++:
                    document.getElementById("sc1").innerHTML = "O: " + score2;
                    for (j = 0; j < ids.length; j++) {
                        document.getElementById(ids[j]).textContent = ""
                    }
                    canPlay = false;
                    moves = 0;
                }
                else if ((sum1 == -300 || sum2 == -300 || sum3 == -300 || sum4 == -300 || sum5 == -300 || sum6 == -300 || sum7 == -300 || sum8 == -300)) {
                    whoWon = -1;
                    score1 == dummy2 ? score1++:
                    document.getElementById("sc2").innerHTML = "X: " + score1;
                    for (j = 0; j < ids.length; j++) {
                        document.getElementById(ids[j]).textContent = ""
                    }
                    canPlay = false;
                    moves = 0;
                }
                else if(moves == 9){
                    alert("hello xD")
                    whoWon = 0;
                    for (j = 0; j < ids.length; j++) {
                        document.getElementById(ids[j]).textContent = ""
                    }
                    canPlay = false;
                    moves = 0;

                }
                else{
                    return;
                }
            }
            if (whoWon == 1) {
                alert("The Player O won and so he gets 1 point!")
            }
            else if(whoWon == -1){
                alert("The Player X won and so he gets 1 point!")
            }
            else if(whoWon == 0){
                alert("It's a draw and so nobody won any points!");
            }
            whoWon = 5;
            dummy = score2;
            dummy2 = score1;
            sum1 = 0;
            sum2 = 0;
            sum3 = 0;
            sum4 = 0;
            sum5 = 0;
            sum6 = 0;
            sum7 = 0;
            sum8 = 0;
            for(k = 0; k < 8; k++){
                vale[k] = 0;
            }
        }

    }




    function doGetRandom(min, max) {
        let h = Math.random() * (max - min) + min;
        return Math.round(h);
    }

    function doGetNum(n){
        nc = n;
    }

可能导致此问题的功能是bot()。

Answer 1

冻结的原因是因为如果这段代码：

do{
  randomPlayBot = doGetRandom(0, 8)
} while(document.getElementById(ids[randomPlayBot]).innerHTML !== "")

如果没有未使用的图块，则会出现无限循环。

我建议您首先获取所有免费图块的列表，而不是获取随机图块然后检查它是否空闲。如果没有免费的瓷砖，游戏就结束了。但如果有免费图块，您可以随机选择其中一个。

您的代码还有其他问题。例如，如何比较布尔值：canPlay == true。这不是必需的。

js页面在比赛结束后冻结

1 个答案: