javascript - Adding a function to shift pieces of a puzzle -
i want create sliding puzzle different formats like: 3x3, 3x4, 4x3 , 4x4. when run code can see on right side selection box can choose 4 formats. want create function can slide/move each piece of puzzle right have no idea how make work. here example of how puzzle should work: http://www.yash.info/jspuzzle.htm
since don't have enough reputation post link images here: http://imgur.com/a/2nmlt . these images placeholders right now.
//jscript: function load() { var puzzle = '<div id="slidingpuzzlecontainer4x4">'; (var = 0; <= 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; (var = 0; <= 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 + '">'; (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>
first, change onclick="shiftpuzzlepieces();" onclick="shiftpuzzlepieces(this);"
this delete item when clicked, , adds end:
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); } demo:
//jscript: function load() { var puzzle = '<div id="slidingpuzzlecontainer4x4">'; (var = 0; <= 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; (var = 0; <= 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 + '">'; (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>
Comments
Post a Comment