Javascript 15拼图仅使空框附近的数字/方框可移动_Javascript_Jquery_Puzzle_Sliding Tile Puzzle

Javascript 15拼图仅使空框附近的数字/方框可移动

javascript jquery

Javascript 15拼图仅使空框附近的数字/方框可移动,javascript,jquery,puzzle,sliding-tile-puzzle,Javascript,Jquery,Puzzle,Sliding Tile Puzzle,我正在尝试创建一个像这样的15个益智游戏：使用jquery和javascript。我在代码方面已经走了相当远，但现在我遇到了一个小问题。我的问题是，当我只希望左/右/下/上方的框/编号可以移动时，所有框/编号都可以移动 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script&g

我正在尝试创建一个像这样的15个益智游戏：使用jquery和javascript。我在代码方面已经走了相当远，但现在我遇到了一个小问题。我的问题是，当我只希望左/右/下/上方的框/编号可以移动时，所有框/编号都可以移动

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>

    $(document).ready(function(){ // Wait for the page to finish loading

      var currentBoard = new Array(' ','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');

      //
      // Randomize the array values 
      for(i=0 ; i++<100 ; x = Math.floor(Math.random()*16), y = Math.floor(Math.random()*16), currentBoard[x] = currentBoard.splice(y, 1, currentBoard[x])[0]);


      repaint(); // Redraw puzzle board     

      //
      // Function repaint()
      // Redraw puzzle board
      function repaint(){
        currentString = "";
        for(i=1;i<17;i++){
          currentString += "<input type='button'  id='" + i + "' value='" + currentBoard[i-1] + "' />";
          if ( (i%4) == 0 ) currentString += "<br />";
        }
        $("#board").html(currentString);
      }

      //
      // Function used to swap elements in array currentBoard ; input is the element indexes
      function swapArrElems(index_a, index_b) {
          var temp = currentBoard[index_a];
          currentBoard[index_a] = currentBoard[index_b];
          currentBoard[index_b] = temp;
      }

      //
      // Wait for the upcoming click events from the puzzle board.
      $('#board').click(function(event){
        current = $(event.target).attr("id")-1;

        for(i=0;i<16;i++) if( currentBoard[i]==0 ) zeroIndex = i; // Get the index of the empty square

        swapArrElems(current, zeroIndex);
        repaint();

      });


     });

  </script>

  <style>
    input[type="button"] { width: 80px; height: 80px; font-size: 30px; }
  </style>
</head>


<body>

<div id="board">
</div>

请注意，您的解剖方法可能会造成无法解决的难题。谷歌15瓷砖拼图。我回答了一个类似的问题拼图是一个3x3，但你可以使用逻辑来移动零件。