title: jQuery Image Puzzle: Image Randomizing Issues
body: <p>I am attempting to have the image pieces randomize yet not overlap when the "Randomize" button is clicked. Instead, they start to overlap. Any ideas on how to randomize the images, or shuffle them?</p>
  
  <p>Full code here:
  <a href="https://jsfiddle.net/Klammertime/guus9df7/" rel="nofollow">https://jsfiddle.net/Klammertime/guus9df7/</a></p>
  
  <p>JavaScript code attempting to randomize images:</p>
  
  <pre><code>$('button').click(function() {
      for (var i = 0; i &lt; 100; i++) {
          var randomN = Math.floor(Math.random() * 15) + 1;
          console.log(randomN);
          var imageBox = $('#board').children("div:nth-child(" + randomN + ")");
          console.log(imageBox);
          Move(imageBox, 175);
      }
  });
  </code></pre>
  
  <p>Full JavaScript code here:</p>
  
  <pre><code> $(document).ready(function() {
       var zi = 1;
       var EmptySquare = 16;
  
       $.fn.extend({
           fifteen:
  
               function(square_size) {
               var gameObjectElement = '#' + $(this).attr('id');
  
               var sqSize = square_size + 'px';
               var boardSize = (square_size * 4) + 'px';
  
               $(gameObjectElement).html('&lt;div id="board"&gt;&lt;/div&gt;');
  
               $('#board').css({
                   position: 'absolute',
                   width: boardSize,
                   height: boardSize,
                   border: '1px solid gray'
               });
  
               for (var i = 0; i &lt; 16; i++) {
                   $('#board').append("&lt;div class='" + i + "' style='left:" + ((i % 4) * square_size) + "px; top: " + Math.floor(i / 4) * square_size + "px; width: " + square_size + "px; height: " + square_size + "px; background-position: " + (-(i % 4) * square_size) + "px " + -Math.floor(i / 4) * square_size + "px; '&gt;&lt;/div&gt;");
  
                   // Select the children of #board ID that are divs, and the 16th one, then make backgroundImage nothing, and background color of white. 
                   // This emptys the 16th square.
                   $('#board').children("div:nth-child(" + EmptySquare + ")").css({
                       backgroundImage: "",
                       background: "#ffffff"
                   });
  
                   // Attach a click event to each of the squares, or divs.
                   $('#board').children('div').click(function() {
                       Move(this, square_size);
                   });
  
                   $('button').click(function() {
                       for (var i = 0; i &lt; 100; i++) {
                           var randomN = Math.floor(Math.random() * 15) + 1;
                           console.log(randomN);
                           var imageBox = $('#board').children("div:nth-child(" + randomN + ")");
                           console.log(imageBox);
                           Move(imageBox, 175);
                       }
  
                   });
               }
           }
       });
  
       function Move(clicked_square, square_size) {
           var movable = false;
  
           // oldx is really just empty square x and empty square y
           // swap the old with the new, just make it so new has x and y for top and bottom of the empty spot
  
           var empty_x = $('#board').children("div:nth-child(" + EmptySquare + ")").css('left');
           var empty_y = $('#board').children("div:nth-child(" + EmptySquare + ")").css('top');
  
           var image_x = $(clicked_square).css('left');
           var image_y = $(clicked_square).css('top');
  
           // parseInt is used because the oldy has 'px' in it, you just want the number
           // check to see if clicked square or image_x and image_y is north of empty square
           if (empty_x == image_x &amp;&amp; image_y == (parseInt(empty_y) - square_size) + 'px') movable = true;
  
           // check to see if clicked square is south of empty square, so its y would be more, so +
           if (empty_x == image_x &amp;&amp; image_y == (parseInt(empty_y) + square_size) + 'px') movable = true;
  
           // check to see if clicked square is left of empty square, which makes left less, or x less
           if ((parseInt(empty_x) - square_size) + 'px' == image_x &amp;&amp; image_y == empty_y) movable = true;
  
           // check to see if clicked square is right of empty square, so left is more
           if ((parseInt(empty_x) + square_size) + 'px' == image_x &amp;&amp; image_y == empty_y) movable = true;
  
           if (movable) {
               // increment z-index up from 1 so that new tile is on top of others
               $(clicked_square).css('z-index', zi++);
  
               // move image square into the empty square position using animate
               // Durations are given in milliseconds; higher values indicate slower animations, not faster ones. 200 is ms
               $(clicked_square).animate({
                   left: empty_x,
                   top: empty_y
               }, 100, function() {
                   // move empty square where image square you just moved was
                   $('#board').children("div:nth-child(" + EmptySquare + ")").css('left', image_x);
                   $('#board').children("div:nth-child(" + EmptySquare + ")").css('top', image_y);
               });
           }
       }
  
       // initialize game with 175 by 175 squares inside the #game_object div
       $('#game_object').fifteen(175);
   });
  </code></pre>