Question

我想创建一个不同格式的滑动拼图，如：3x3,3x4,4x3和4x4。当您运行我的代码时，您可以在右侧看到一个选择框，您可以在其中选择4种格式。

我可以将每个拼图移动到空白区域，但问题是不应该将对角线移动的部分以及直接与空白区域直接相邻而不是远离的部分进行移动。任何人都知道如何解决这个问题？以下是谜题应如何运作的一个很好的例子：http://www.yash.info/jspuzzle.htm

在javascript代码中，您可以看到第一个函数load（）是用空白代码替换每个部分，之后的函数是选择格式并将格式更改为它。 Shiftpuzzlepieces功能使您可以将每个部件移动到空白区域。如果您有任何疑问或理解问题，请随时在评论中提问。非常感谢提前。

由于我没有足够的声誉，我会在此处发布图片链接：http://imgur.com/a/2nMlt。这些图片现在只是占位符。

＆＃13;

//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) {

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); 

}

＆＃13;

/**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;
}

＆＃13;

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

＆＃13;

Answer 1

在shiftPuzzlePieces（el）函数中，首先应检查el是否与空白部分相邻。如果是这样，那么转移它。这是jsFiddle

function shiftPuzzlepieces(el) {
var elIndex=0;
var child=el;
while((child=child.previousSibling)!=null) elIndex++;    
//position of el is stored in elIndex

var blankIndex=0;
var blank = document.getElementById("positionblank");
child=blank;
while((child=child.previousSibling)!=null) blankIndex++;
//position of blank is stored in blankIndex

//Now the number of columns is needed to compare between positions of el and blank. 
//I have stored this in global variable cols

//Now check if el and blank are adjacent
if((((elIndex==blankIndex-1) || (elIndex==blankIndex+1) )
   && ((Math.floor(elIndex/cols))==(Math.floor(blankIndex/cols)))
   ) || (elIndex==blankIndex+cols) || (elIndex==blankIndex-cols) ){
 var temp = el.parentNode.insertBefore(document.createElement('a'), el);
el.parentNode.insertBefore(el, blank);
el.parentNode.insertBefore(blank, temp);
el.parentNode.removeChild(temp);
}
}

滑动拼图的JavaScript

1 个答案: