dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: HELP with a jigsaw puzzle please!!

  1. #1
    Join Date
    Apr 2010
    Posts
    2

    Question HELP with a jigsaw puzzle please!!

    I wish to create a jigsaw puzzle with images in a table. When two of the images are clicked, they swap places. When all pieces are in the correct order, I need an alert to congratulate the user and tell them how many clicks it took to solve the puzzle and then restore the puzzle to the original scrambled order. Any help??

  2. #2
    Join Date
    Oct 2005
    Location
    Cambridgeshire, UK
    Posts
    191
    Javascript is what you want here. When a table cell is clicked you want to swap the images using Javascript.

    Hope that points you in the right direction. Have a go and if you get stuck post here and I'm sure someone will help you out.

    Good luck!

  3. #3
    Join Date
    Apr 2010
    Posts
    2
    Heres what I have...I got it to swap...just not in the right way at all...and I made a button that can be pressed to see if it is solved, but that isn't how I want it to be, I want it to check automatically after each move...and I need it to count how many clicks it took to solve....please help me.


    solved=[1,2,3,4,5,6]
    current=[3,5,1,6,2,4]
    i=0

    P1=1
    function flip(X){
    alert(current)
    document.images[P1].src=X.src
    X.src="P_1.jpg"
    current[P1]=X.id
    current[X.id]=1
    alert(current)
    P1=X.id

    }



    function isitsolved(){

    thepuzzleissolved=true

    if(current[0]==1) donothing(0)
    else thepuzzleissolved=false

    if(current[1]==2) donothing(1)
    else thepuzzleissolved=false

    if(current[2]==3) donothing(2)
    else thepuzzleissolved=false

    if(current[3]==4) donothing(3)
    else thepuzzleissolved=false

    if(current[4]==5) donothing(4)
    else thepuzzleissolved=false

    if(current[5]==6) donothing(5)
    else thepuzzleissolved=false

    if (thepuzzleissolved) celebrate()
    else alert("not solved")

    }
    function donothing(x){}
    function original(){
    for (i=0;i<6;i++){

    document.images[i].src="P_"+solved[i]+".jpg"
    }
    }

    function celebrate(){
    alert("yippee!")
    original()

    }
    </script>

    <body>


    <table border="1">
    <tr>
    <td><img id="0" src="P_3.jpg" onclick="flip(this)"></td>
    <td><img id="1" src="P_5.jpg" onclick="flip(this)"></td>
    <td><img id="2" src="P_1.jpg" onclick="flip(this)"></td>
    <td><img id="3" src="P_6.jpg" onclick="flip(this)"></td>
    <td><img id="4" src="P_2.jpg" onclick="flip(this)"></td>
    <td><img id="5" src="P_4.jpg" onclick="flip(this)"></td>
    </tr>


    </table>
    <br>

    <input type="button" onclick="isitsolved()" value="is it solved?">

    </body>
    </html>

  4. #4
    Join Date
    Oct 2005
    Location
    Cambridgeshire, UK
    Posts
    191
    I've had a play with your code and rejigged it until I got it to work:

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var solved = new Array(1,2,3,4,5,6);
    var current = new Array(3,5,1,6,2,4);
    var i = 0;
    
    function flip(X){
    	
    	if (X.id>0) {
    	
    		var previous_id = parseInt(X.id)-1;
    		var this_id = X.id;
    	
    		// swap the current array values round
    		var previous_value = current[previous_id];
    		var this_value = current[this_id];
    		current[previous_id] = this_value;
    		current[this_id] = previous_value;
    	
    		// swap the images
    		document.images[previous_id].src = 'P_'+current[previous_id]+'.jpg';
    		document.images[this_id].src = 'P_'+current[this_id]+'.jpg';
    		
    		document.getElementById('current_order').innerHTML = current;
    		
    		// check if solved
    		var is_solved = true;
    		for (var i=0; i<solved.length; i++) { // loop through solved array and check against current
    			if (solved[i]!=current[i]) { is_solved = false; } // whoops, still not right. keep trying }
    		}
    		if(is_solved) celebrate(); // yaaayyy!!
    	
    	}
    	
    }
    
    function original(){
    	for (i=0; i<6; i++) {
    		document.images[i].src="P_"+solved[i]+".jpg";
    	}
    }
    
    function celebrate(){
    	alert("yippee!")
    	original();
    }
    
    </script>
    
    <body>
    
    <table border="1">
    	<tr>
    		<td><img id="0" src="P_3.jpg" onclick="flip(this)"></td>
    		<td><img id="1" src="P_5.jpg" onclick="flip(this)"></td>
    		<td><img id="2" src="P_1.jpg" onclick="flip(this)"></td>
    		<td><img id="3" src="P_6.jpg" onclick="flip(this)"></td>
    		<td><img id="4" src="P_2.jpg" onclick="flip(this)"></td>
    		<td><img id="5" src="P_4.jpg" onclick="flip(this)"></td>
    	</tr>
    </table>
    
    <div id="current_order">3,5,1,6,2,4</div>
    
    </body>
    </html>
    I've made too many changes to list them all but the main area it was going wrong was in the swapping of the current array elements. I'm not sure if the way the flip works is correct (ie. swapping with the image to the left) but I hope it points you in the right direction.

    Let me know if you need any explanation on anything I've done.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles