javascript 的滑动拼图

Question

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

我可以将每个拼图块移动到空白处 space 但问题是不能沿对角线移动拼图块，也不能只移动直接与空白接壤的拼图块 space 不是从更远的地方。任何人都知道如何解决这个问题？这是一个很好的例子，这个谜题应该如何运作：http://www.yash.info/jspuzzle.htm

在javascript代码中你可以看到第一个函数load()是将每一块替换为空白，后面的函数是select一种格式并将格式更改为它。 Shiftpuzzlepieces 函数使您可以将每个拼图移动到空白 space 中。如果您有任何问题或理解问题，请随时在评论中提问。非常感谢。

由于我没有足够的声誉，我将 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(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); 

}

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

在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 的滑动拼图

Sliding puzzle for javascript

html

javascript

css

puzzle