添加一个函数来移动拼图的碎片

Question

我想创建一个不同格式的滑动拼图，例如：3x3、3x4、4x3 和 4x4。当您运行代码时，您可以在右侧看到一个选择框，您可以在其中选择 4 种格式。现在我想创建一个函数，我实际上可以 slide/move 拼图的每一块，但现在我不知道如何让它工作。这是拼图应该如何工作的示例：http://www.yash.info/jspuzzle.htm

由于我没有足够的声誉，我将 post 一个 link 到这里的图像：http://imgur.com/a/2nMlt。这些图片现在只是占位符。

//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>

Answer 1

这似乎是家庭作业，所以我不想让您失去创建解决方案的乐趣。

一个简单的策略- 将 puzzlepieces 保留为全局范围，以便在填充片段后可以引用它。当点击一块时，检查相对于空白瓷砖的点击瓷砖的四个主要方向。如果空白块在其中一个方向上，则将单击的块与空白块交换，如果未找到空白块，则该块必须是不可移动的。另外，检查四个方向时要注意板的边缘。

Answer 2

首先，将onclick="shiftPuzzlepieces();"改为onclick="shiftPuzzlepieces(this);"

这将在单击时删除该项目，并将其添加到末尾：

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

}

演示:

//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>

添加一个函数来移动拼图的碎片

Adding a function to shift pieces of a puzzle

javascript

html

css

puzzle