Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Shuffle button

  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Shuffle button

    anyone know how to set a shuffle button for this puzzle?

    Code:
    <!DOCTYPE html">
    <head>
      <title>Puzzle</title>
      
    <style type="text/css">
    #puzzle {
    	text-align: center;
    }
    #puzzleGrid { 
    	background: url('images/background.png'); 
    	height: 280px; 
    	padding: 26px; 
    	width: 280px; 
    	margin-left: auto;
    	margin-right: auto;
    }
    #puzzleGrid.win { 
    	background: url('images/background-win.png'); 
    }
    #puzzleGrid table { 
    	width: 276px; 
    }
    #puzzleGrid td img { 
    	padding: 0; margin: 0; 
    }
    </style>
      
    <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="puzzle">
    <div id="puzzleGrid">
    <table cellpadding="0" cellspacing="0">
    <tr>
     <td id="cell11">
      <img src="images/01.png" alt="1" height="69" width="69">
     </td>
     <td id="cell12">
      <img src="images/02.png" alt="2" height="69" width="69">
     </td>
     <td id="cell13">
      <img src="images/03.png" alt="3" height="69" width="69">
     </td>
     <td id="cell14">
      <img src="images/04.png" alt="4" height="69" width="69">
     </td>
    </tr>
    <tr>
     <td id="cell21">
      <img src="images/05.png" alt="5" height="69" width="69">
     </td>
     <td id="cell22">
      <img src="images/06.png" alt="6" height="69" width="69">
     </td>
     <td id="cell23">
      <img src="images/07.png" alt="7" height="69" width="69">
     </td>
     <td id="cell24">
      <img src="images/08.png" alt="8" height="69" width="69">
     </td>
    </tr>
    <tr>
     <td id="cell31">
      <img src="images/09.png" alt="9" height="69" width="69">
     </td>
     <td id="cell32">
      <img src="images/10.png" alt="10" height="69" width="69">
     </td>
     <td id="cell33">
      <img src="images/11.png" alt="11" height="69" width="69">
     </td>
     <td id="cell34">
      <img src="images/12.png" alt="12" height="69" width="69">
     </td>
    </tr>
    <tr>
     <td id="cell41">
      <img src="images/13.png" alt="13" height="69" width="69">
     </td>
     <td id="cell42">
      <img src="images/14.png" alt="14" height="69" width="69">
     </td>
     <td id="cell43">
      <img src="images/15.png" alt="15" height="69" width="69">
     </td>
     <td id="cell44">
      <img src="images/empty.png" alt="empty" height="69" width="69">
     </td>
    </tr>
    </table>
    </div>
    </div>
    </body>
    </html>
    Code:
    window.onload = initPage;
    
    function initPage() {
      var table = document.getElementById("puzzleGrid");
      var cells = table.getElementsByTagName("td");
      for (var i=0; i<cells.length; i++) {
        var cell = cells[i];
        cell.onclick = tileClick;
      }
    }
    
    
    
    function tileClick() {
      if (cellIsEmpty(this)) {
        window.alert("Please click on a numbered tile.");
        return; 
      }
    
      var currentRow = this.id.charAt(4);
      var currentCol = this.id.charAt(5); 
    
      // Check above
      if (currentRow > 1) {
        var testRow = Number(currentRow) - 1;
        var testCellId = "cell" + testRow + currentCol;
        var testCell = document.getElementById(testCellId);
        if (cellIsEmpty(testCell)) {
          swapTiles(this, testCell);
          return;
        }
      }
    
      // Check below
      if (currentRow < 4) {
        var testRow = Number(currentRow) + 1;
        var testCellId = "cell" + testRow + currentCol;
        var testCell = document.getElementById(testCellId);
        if (cellIsEmpty(testCell)) {
          swapTiles(this, testCell);
          return;
        }
      }
    
      // Check to the left
      if (currentCol > 1) {
        var testCol = Number(currentCol) - 1;
        var testCellId = "cell" + currentRow + testCol;
        var testCell = document.getElementById(testCellId);
        if (cellIsEmpty(testCell)) {
          swapTiles(this, testCell);
          return;
        }			
      }
    
      // Check to the right
      if (currentCol < 4) {
        var testCol = Number(currentCol) + 1;
        var testCellId = "cell" + currentRow + testCol;
        var testCell = document.getElementById(testCellId);
        if (cellIsEmpty(testCell)) {
          swapTiles(this, testCell);
          return;
        }
      }
    
    
      window.alert("Please click a tile next to an empty cell.");
    }
    
    function cellIsEmpty(cell) {
      var image = cell.firstChild;
      while (image.nodeName == "#text") { image = image.nextSibling; }
      if (image.alt == "empty")
        return true; 
      else 
        return false; 
    }
    
    function swapTiles(selectedCell, destinationCell) {
      selectedImage = selectedCell.firstChild;
      while (selectedImage.nodeName == "#text") {
        selectedImage = selectedImage.nextSibling;
      }
      destinationImage = destinationCell.firstChild;
      while (destinationImage.nodeName == "#text") {
        destinationImage = destinationImage.nextSibling;
      }
    
      selectedCell.appendChild(destinationImage);
      destinationCell.appendChild(selectedImage);
    
      if (puzzleIsComplete()) {
        win();
      }
    }
    
    function puzzleIsComplete() {
      var tiles = document.getElementById("puzzleGrid").getElementsByTagName("img");
      var hash = "";
      for (var x = 0; x < tiles.length; x++) {
        var num = tiles[x].src.substr(-6,2);
        if (num != "ty")
          hash += num;
      }
      if (hash == "010203040506070809101112131415") 
        return true; 
    
      return false;
    }
    
    
    
    function win() {
      document.getElementById('puzzleGrid').className = 'win'; // sets the class as win
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,146
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    The problem with slider puzzles is that if you simply randomly assign the tiles to locations, you have a 50/59 chance of producing an unsolvable puzzle.

    Try it: Initialize your puzzle to
    Code:
     1  2  3  4
     5  6  7  8
     9 10 11 12
    13 15 14  x
    That is, with just the 15 and 14 reversed. There is no possible way to "slide" the tiles and get the correct result (that is with 14 and then 15 at the end).

    So there are algorithms for looking at a shuffled result to find out if it is solvable (I read about them long ago, don't remember them), but probably the easiest way to shuffle for yourself is to simply start with the puzzle in solved position and then make a large random number of random slides to mix it up. That way you know that there is at least one solution (i.e., reverse the order of the random slides made) and almost surely many shorter solutions.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    So there are algorithms for looking at a shuffled result to find out if it is solvable
    The simplest being to ensure that the puzzle has an odd number of rows and columns.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,146
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by Logic Ali View Post
    The simplest being to ensure that the puzzle has an odd number of rows and columns.
    LOL! Well, yeah, but that's a cheat. That's a restriction, not an algorithm. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    A position is solvable if and only if the tiles, if merged to a line, form an even (not odd) permutation. Exactly half permutations of a given length greater that 1 are even, so there is a 1/2 chance that a random position is solvable.
    You should generate a random even permutation of numbers 1 ... 15, then insert the empty cell randomly in one of 16 position (or always at the right, if you wish), then break the resulting array of length 16 into 4 arrays of length 4 and place the tiles in the box accordingly.
    I have written an algorithm for generating a random even permutation.
    Code:
    function randomEvenPermutation(length) {
      var a=[], evenPermutation=true;
      //generate the unit permutation
      for (var i=0; i<length; )
        a[i]=++i;
      /*replace all the numbers except the first 2, beginning from the end,
        with random numbers which have not been placed yet;
        count the parity of the number of swaps along the way
        in the variable evenPermutation*/
      for (i=length-1; i>1; i--) {
        var j=Math.floor(Math.random()*(i+1));
        //if we actually need to swap numbers
        if (i!=j) {
          var temp=a[i];
          a[i]=a[j];
          a[j]=temp;
          evenPermutation=!evenPermutation;
        }
      }
      //decide whether to swap the remaining 2 numbers so that the resulting permutation is even
      if (!evenPermutation) {
        temp=a[0];
        a[0]=a[1];
        a[1]=temp;
      }
      return a;
    }
    Note that with this algorithm all solvable positions are chosen with equal probability.
    Last edited by oneguy; 05-16-2013 at 01:47 PM.

  • Users who have thanked oneguy for this post:

    Old Pedant (05-16-2013)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,146
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Nice answer. Shorter than many I have seen.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •