Adding a function to shift pieces of a puzzle

Question

Adding a function to shift pieces of a puzzle

1.8k views Asked by kentas At 12 October 2024 at 16:51

I want to create a sliding puzzle with different formats like: 3x3, 3x4, 4x3 and 4x4. When you run the code you can see on the right side a selection box where you can choose the 4 formats. Now I want to create a function where I can actually slide/move each piece of the puzzle but right now I have no idea how to make that work. Here is an example of how the puzzle should work: http://www.yash.info/jspuzzle.htm

Since I don't have enough reputation I will post a link to the images here: https://i.stack.imgur.com/9fIyk.jpg . These images are just placeholders right now.

//jscript:

  function load() {
  var puzzle = '<div id="slidingpuzzleContainer4x4">';

  for (var i = 0; i <= 15; ++i) {
    puzzle += '<img src="images/blank.jpg" alt="blank" width="100" height="100" />';
  }
  puzzle += '</div>';
  showSlidingpuzzle(puzzle);
}


function changeFormat(x, y) {
  var puzzlepieces = [];
  var finalValue = x * y - 2;

  for (var i = 0; i <= finalValue; ++i) {
    puzzlepieces.push(i);
  }

  puzzlepieces.push('blank')
  createSlidingpuzzle(puzzlepieces, x, y);
}


function createSlidingpuzzle(puzzlepieces, x, y) {

  var puzzle = '<div id="slidingpuzzleContainer' + x + 'x' + y + '">';

  for (var puzzleNr = 0; puzzleNr < puzzlepieces.length; ++puzzleNr) {
    puzzle += '<img src="images/' + puzzlepieces[puzzleNr] + '.jpg" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces();" width="100" height="100" />';
  }
  puzzle += '</div>';

  showSlidingpuzzle(puzzle);
}


function showSlidingpuzzle(puzzle) {
  document.getElementById('slidingpuzzleContainer').innerHTML = puzzle;
}


function shiftPuzzlepieces() {

}

/**css:**/

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #000;
}

img {
  padding: 0;;
  margin: 0;
}

#slidingpuzzleContainer3x3,
#slidingpuzzleContainer3x4,
#slidingpuzzleContainer4x3,
#slidingpuzzleContainer4x4 {
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid black;
}

#slidingpuzzleContainer3x3 {
  width: 300px;
  height: 300px;
}

#slidingpuzzleContainer3x4 {
  width: 300px;
  height: 400px;
}

#slidingpuzzleContainer4x3 {
  width: 400px;
  height: 300px;
}

#slidingpuzzleContainer4x4 {
  width: 400px;
  height: 400px;
}

.puzzlepiece {
  float: left;
}

#formatContainer {
  position: absolute;
  top: 50px;
  left: 500px;
}

#format {
  margin-top: 10px;
}

<!--HTML-->
<body onload="load();">

  <div id="slidingpuzzleContainer">
  </div>

  <div id="formatContainer">
    select format:<br />
 <select name="format" id="format" size="1" onChange="this.options[this.selectedIndex].onclick()">
            <option onclick="changeFormat(3,3);">Format 3 x 3</option>
            <option onclick="changeFormat(3,4);">Format 3 x 4</option>
            <option onclick="changeFormat(4,3);">Format 4 x 3</option>
            <option onclick="changeFormat(4,4);">Format 4 x 4</option>
        </select>

  </div>


</body>

Original Q&A

There are 2 answers

t--r--o--n On 10 June 2015 at 16:49

This seems like homework so I don't want to take the fun of creating a solution away from you.

A simple strategy- Keep the puzzlepieces as a global scope so it can be referenced after populated with pieces. When a piece is clicked on check the four cardinal directions relative to the clicked-tile for the blank tile. If the blank tile is in one of the directions, swap the clicked-on tile with the blank one, if the blank tile isn't found then the piece must be immovable. Also, Watch out for the edges of the board when checking the four directions.

**Walter Chapilliquen - wZVanG** · Accepted Answer · 2015-06-10 16:52:28

First, change onclick="shiftPuzzlepieces();" to onclick="shiftPuzzlepieces(this);"

This will delete the item when clicked, and adds it to the end:

function shiftPuzzlepieces(el) { //Swap function

    var blank = document.getElementById("positionblank"); 
    var temp = el.parentNode.insertBefore(document.createElement('a'), el); 
    el.parentNode.insertBefore(el, blank); 
    el.parentNode.insertBefore(blank, temp); 
    el.parentNode.removeChild(temp); 

}

Demo:

//jscript:

  function load() {
  var puzzle = '<div id="slidingpuzzleContainer4x4">';

  for (var i = 0; i <= 15; ++i) {
    puzzle += '<img src="images/blank.jpg" alt="blank" width="100" height="100" />';
  }
  puzzle += '</div>';
  showSlidingpuzzle(puzzle);
}


function changeFormat(x, y) {
  var puzzlepieces = [];
  var finalValue = x * y - 2;

  for (var i = 0; i <= finalValue; ++i) {
    puzzlepieces.push(i);
  }

  puzzlepieces.push('blank')
  createSlidingpuzzle(puzzlepieces, x, y);
}


function createSlidingpuzzle(puzzlepieces, x, y) {

  var puzzle = '<div id="slidingpuzzleContainer' + x + 'x' + y + '">';

  for (var puzzleNr = 0; puzzleNr < puzzlepieces.length; ++puzzleNr) {
    puzzle += '<img src="images/' + puzzlepieces[puzzleNr] + '.jpg" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />';
  }
  puzzle += '</div>';

  showSlidingpuzzle(puzzle);
}


function showSlidingpuzzle(puzzle) {
  document.getElementById('slidingpuzzleContainer').innerHTML = puzzle;
}


function shiftPuzzlepieces(el) { //Swap function
    
    var blank = document.getElementById("positionblank"); 
    var temp = el.parentNode.insertBefore(document.createElement('a'), el); 
    el.parentNode.insertBefore(el, blank); 
    el.parentNode.insertBefore(blank, temp); 
    el.parentNode.removeChild(temp); 
   
}

/**css:**/

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #000;
}

img {
  padding: 0;;
  margin: 0;
}

#slidingpuzzleContainer3x3,
#slidingpuzzleContainer3x4,
#slidingpuzzleContainer4x3,
#slidingpuzzleContainer4x4 {
  position: absolute;
  top: 50px;
  left: 50px;
  border: 1px solid black;
}

#slidingpuzzleContainer3x3 {
  width: 300px;
  height: 300px;
}

#slidingpuzzleContainer3x4 {
  width: 300px;
  height: 400px;
}

#slidingpuzzleContainer4x3 {
  width: 400px;
  height: 300px;
}

#slidingpuzzleContainer4x4 {
  width: 400px;
  height: 400px;
}

.puzzlepiece {
  float: left;
}

#formatContainer {
  position: absolute;
  top: 50px;
  left: 500px;
}

#format {
  margin-top: 10px;
}

<!--HTML-->
<body onload="load();">

  <div id="slidingpuzzleContainer">
  </div>

  <div id="formatContainer">
    select format:<br />
 <select name="format" id="format" size="1" onChange="this.options[this.selectedIndex].onclick()">
            <option onclick="changeFormat(3,3);">Format 3 x 3</option>
            <option onclick="changeFormat(3,4);">Format 3 x 4</option>
            <option onclick="changeFormat(4,3);">Format 4 x 3</option>
            <option onclick="changeFormat(4,4);">Format 4 x 4</option>
        </select>

  </div>


</body>

TechQA.

Adding a function to shift pieces of a puzzle

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in PUZZLE

Popular Questions

Popular Tags

Trending Questions