我想创建一个不同格式的滑动拼图,如: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>
答案 0 :(得分:1)
首先,将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>
答案 1 :(得分:0)
这似乎是功课,所以我不想带走远离你的解决方案。
一个简单的策略 -
将puzzlepieces
保留为全局范围,以便在填充部分后引用它。单击一个部分时,检查相对于空白图块的单击图块的四个基本方向。如果空白区块位于其中一个方向上,则将单击的区块与空白区块交换,如果未找到空白区块,则该区块必须是不可移动的。另外,在检查四个方向时,请注意电路板的边缘。