Jquery: Раздвижная головоломка Генератора Давать неразрешимые головоломки

Question

Из моего понимания, создавая решаемую скользящую головоломку должен следовать этим правилам:

A. Если ширина сетки нечетное, то число инверсий в разрешимой ситуации даже.

B. Если ширина сетки ровная, а пробел - четным, считая снизу (второй - последний, четвертый - последний и т. Д.), То число инверсий в разрешимой ситуации нечетное.

C. Если ширина сетки ровная, а пробел находится на нечетной строке, отсчитывающейся от нижней (последняя, ​​третья-последняя, ​​пятая-последняя и т. Д.), Тогда число инверсий в разрешимой ситуации равно.

Мой генератор подсчитывает количество инверсий и определяет, где находится пустое пространство, и должен перезапустить головоломку, если решение не соответствует этим правилам.

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; 
     } 

    } 

}); 

http://www.cs.bham.ac.uk/~mdr/teaching/modules04/java2/TilesSolvability.html см для более подробного объяснения solviblity плитки игр.

Public Fiddle пример: http://jsfiddle.net/themonstersarecoding/rzmKA/

Answer 1

Я думаю, что ваша логика для проверки, если загадка неразрешима неверна, и это происходит потому, что, когда вы проверяете, если строка с пустой плитке нечетным или четным, вы проглядели где говорится «подсчет со дна». Один из способов исправить это - изменить значения «id» для элементов <tr>, чтобы они отсчитывали снизу.

Изменить на:

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