Javascript Jquery：提供无法解决的谜题的滑动谜题生成器

根据我的理解，创建一个可解的滑动拼图必须遵循以下规则：

A.如果网格宽度为奇数，则可解情况下的反演数为偶数

如果网格宽度是均匀的，且空白是从底部计数的偶数行（第二->最后，最后第四个等），那么可解情形中的倒数是奇数。 如果网格宽度是均匀的，并且空白是从底部（最后，第三最后，第五最后等）计数的奇数行，那么可解情形中的倒数是偶数。 我的生成器计算反转次数并检测空空间的位置，如果解决方案不符合这些规则，则应重新滚动该谜题

Jquery/javascript发布在下面

$(document).ready(function () {
    var tds = $("td");
    var tileCount = 15;
    var gameStart = false;

    function countInversions(board) {
        var inversions = 0;
        $.each(board, function (index, value) {
            if ($(value).children("div").attr("id") === "empty") {
                return true;
            } else {
                var tileNum = $(value).children("div").attr("id").replace(/[^0-9.]/g, '') * 1;
                $.each(board, function (index2, value2) {
                    if ($(value2).children("div").attr("id") === "empty" || index2 <= index) {
                        return true;
                    } else {
                        var tileNum2 = $(value2).children("div").attr("id").replace(/[^0-9.]/g, '') * 1;
                        if (tileNum > tileNum2) {
                            inversions++;
                        }
                    }
                });
            }
        });
        console.log(inversions);
        return inversions;
    }

    var scramble = function () {
        do {
            for (var i = 0; i <= 20; i++) {
                var ranNum = Math.floor(Math.random() * tds.length);
                var ranNum2 = Math.floor(Math.random() * tds.length);

                if (ranNum === ranNum2) {
                    continue;
                }

                var td1 = tds[ranNum];
                var td2 = tds[ranNum2];
                var tile1 = $(td1).children("div");
                var tile2 = $(td2).children("div");
                $("#" + $(td1).attr("id")).html(tile2);
                $("#" + $(td2).attr("id")).html(tile1);
            }
        } while ((countInversions($(tds)) % 2 !== 0 && $("#empty").parents("tr").attr("id").replace(/[^0-9.]/g, '') * 1 === (1 || 3)) || (countInversions($(tds)) % 2 === 0 && $("#empty").parents("tr").attr("id").replace(/[^0-9.]/g, '') * 1 === (2 || 4)));
        gameStart = true;
    };

    function slide(tile) {
        if (gameStart === true) {
            var tileNum = $(tile).attr("id").replace(/[^0-9.]/g, '') * 1;
            var $tile = $("#tile" + tileNum).clone();
            var pos = $(tile).parents("td");
            var posNum = $(tile).parents("td").attr("id").replace(/[^0-9.]/g, '') * 1;
            var y = posNum - 4;
            var x = posNum + 4;
            var $empty = $("#empty").clone();

            if ($(pos).next().children("div").attr("id") === "empty") {
                $(pos).next().children().replaceWith($tile.hide());
                $(pos).children().effect("slide", {
                    direction: "right",
                    mode: "hide"
                }, "fast", function () {
                    $(pos).children().replaceWith($empty);
                });
                $(pos).next().children().effect("slide", {
                    direction: "left",
                    mode: "show"
                }, "fast", function () {
                    victoryCheck();
                });
                addSlide(); //slide right
            } else if ($(pos).prev().children("div").attr("id") === "empty") {
                $(pos).prev().children().replaceWith($tile.hide());
                $(pos).children().effect("slide", {
                    direction: "left",
                    mode: "hide"
                }, "fast", function () {
                    $(pos).children().replaceWith($empty);
                });
                $(pos).prev().children().effect("slide", {
                    direction: "right",
                    mode: "show"
                }, "fast", function () {
                    victoryCheck();
                });
                addSlide(); //slide left
            } else if ($("#td" + x).children("div").attr("id") === "empty") {
                $("#td" + x).children().replaceWith($tile.hide());
                $(pos).children().effect("slide", {
                    direction: "down",
                    mode: "hide"
                }, "fast", function () {
                    $(pos).children().replaceWith($empty);
                });
                $("#td" + x).children().effect("slide", {
                    direction: "up",
                    mode: "show"
                }, "fast", function () {
                    victoryCheck();
                });

                addSlide(); //slide up
            } else if ($("#td" + y).children("div").attr("id") === "empty") {
                $("#td" + y).children().replaceWith($tile.hide());
                $(pos).children().effect("slide", {
                    direction: "up",
                    mode: "hide"
                }, "fast", function () {
                    $(pos).children().replaceWith($empty);
                });
                $("#td" + y).children().effect("slide", {
                    direction: "down",
                    mode: "show"
                }, "fast", function () {
                    victoryCheck();
                });

                addSlide(); //slide down
            }
        }
    }

    function victoryCheck() {
        if (countInversions($("td")) === 0 && $("#empty").parents("td").attr("id") === "td16") {
            gameStart = false;
            alert("You won. Winner.");
            return true;
        } else {
            return false;
        }

    }

});

$（文档）.ready（函数（）{
var tds=$（“td”）；
var tileCount=15；
var gameStart=false；
函数计数反转（板）{
var反演=0；
$。每个（板、功能（索引、值）{
if（$（value）.children（“div”）.attr（“id”）=“empty”）{
返回true；
}否则{
var tileNum=$（value）.children（“div”）.attr（“id”）.replace（/[^0-9.]/g.））*1；
$。每个（板，功能（index2，值2）{
if（$（value2）.children（“div”）.attr（“id”）==“empty”| | index2 tileNum2）{
倒置++；
}
}
});
}
});
控制台日志（反转）；
收益倒置；
}
变量加扰=函数（）{
做{
对于（var i=0；i我认为您检查一个谜题是否无法解决的逻辑是不正确的，这是因为当您检查带有空磁贴的行是奇数还是偶数时，您忽略了显示“从底部计数”的部分。解决此问题的一种方法是更改“id”
元素的值，以便从底部开始计数

改为：

<table id="slidingPuzzle">
    <tr id="tr4">
        ...
    </tr>
    <tr id="tr3">
        ...
    </tr>
    <tr id="tr2">
        ...
    </tr>
    <tr id="tr1">
        ...
    </tr>
</table>


...
...
...
...
这里有问题吗？很好，让我更改一下，看看它是否解决了问题。不幸的是，检查以确保它解决了问题需要验证它是否可以解决，所以我必须让人们先做一些。谢谢您的评论！