I want to create a sliding puzzle with different formats like: 3x3, 3x4, 4x3 and 4x4. When you run my code you can see on the right side a selection box where you can choose the 4 formats.
I can move each puzzlepiece to blank space but the problem is that it shouldn't be possible to shift pieces diagonal aswell as only pieces which directly border on the blank space not from further away. Anyone knows how to fix that? Here is an good example how the puzzle should work: http://www.yash.info/jspuzzle.htm
In the javascript code you can see the first function load() is to replace every piece with the blank one and the functions after that are to select a format and change the format into it. The function Shiftpuzzlepieces makes it so that you can move each piece into the blank space. If you have any more question or understanding issues just feel free to ask in the comments. Many thanks in advance.
Since I don't have enough reputation I will post a link to the images here: https://i.stack.imgur.com/9fIyk.jpg . These images are just placeholders right now.
//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>
In shiftPuzzlePieces(el) function, you should first check if el is adjacent to blank piece. If so, then shift it. Here is the jsFiddle