Próbuję stworzyć prostą grę na zasadzie puzli.
wygląda to wstępnie tak:
gra
chodzi o ułożenie poprzez przesuwanie obrazu, nie bardzo wiem jednak jak sprawdzić czy obraz jest prawidłowo ułożony.
kod wygląda następująco:
<div id="div1"> <img src="images/1/1_02.jpg" id="2" class="sortableitem" /> <img src="images/1/1_03.jpg" id="3" class="sortableitem" /> <img src="images/1/1_04.jpg" id="4" class="sortableitem" /> <img src="images/1/1_05.jpg" id="5" class="sortableitem" /> <img src="images/1/1_09.jpg" id="9" class="sortableitem" /> <img src="images/1/1_10.jpg" id="10" class="sortableitem" /> <img src="images/1/1_13.jpg" id="13" class="sortableitem" /> <img src="images/1/1_14.jpg" id="14" class="sortableitem" /> <img src="images/1/1_15.jpg" id="15" class="sortableitem" /> <img src="images/1/1_08.jpg" id="8" class="sortableitem" /> <img src="images/1/1_01.jpg" id="1" class="sortableitem" /> <img src="images/1/1_12.jpg" id="12" class="sortableitem" /> <img src="images/1/1_06.jpg" id="6" class="sortableitem" /> <img src="images/1/1_16.jpg" id="16" class="sortableitem" /> <img src="images/1/1_11.jpg" id="11" class="sortableitem" /> <img src="images/1/1_07.jpg" id="7" class="sortableitem" /> </div> <script type="text/javascript"> function executeTimer() { var time = parseInt($("#time").text()); if (time-1 > -1) { $("#time").text(time-1); return false; } window.clearInterval(gameTimer); gameOver = true; if (gameOver) { $("div").addClass("div1").hide("slow"); }; } </script> <script type="text/javascript"> $(document).ready( function () { $('div').Sortable( { accept : 'sortableitem', helperclass : 'sorthelper', activeclass : 'sortableactive', hoverclass : 'sortablehover', opacity: 0.8, revert: true, floats: true, tolerance: 'pointer' } ) gameTimer = window.setInterval("executeTimer()", 1000); } ); </script>
może ktoś ma jakieś propozycję jak rozwiązać ten problem ?