我想创建一个具有不同格式的滑动拼图，例如：3x3、3x4、4x3和4x4。运行代码时，您会在右侧看到一个选择框，您可以在其中选择4种格式。现在，我想创建一个函数，在其中我可以实际滑动/移动拼图的每个部分，但是现在我还不知道如何实现这一功能。这是难题应如何工作的示例：http://www.yash.info/jspuzzle.htm
由于信誉不佳，我将在此处发布指向图像的链接：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>最佳答案
首先，将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>