www.webdeveloper.com
Results 1 to 11 of 11

Thread: 4x4 puzzle adding shuffle images and reset images buttons

  1. #1
    Join Date
    Dec 2008
    Posts
    7

    4x4 puzzle adding shuffle images and reset images buttons

    I have been toying with the idea of building a 15 puzzle just for fun and have been looking at some source code from David Harrison but i wish to add a shuffle images and a reset button into the content. I have been trying to use onClick events within a form button but cant get the blasted thing to work! any help would be much appreciated!!!!

    here is the source code:
    Attached Files Attached Files

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Lightbulb Try this ...

    Here's a modification that might work for you.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>Game</title>
    
    <style type="text/css">
     #game img {
    	   width:50px;
    	   height:50px;
    	   border:1px solid red;
    	   font-size:3em;
    	   }
    </style>
    
    <script type="text/javascript">
    
    var piece, x, y;
    
    function ReorderPuzzle() {
      piece=new Array();
    
      piece[piece.length]=new Array("pic00.jpg","pic01.jpg","pic02.jpg","pic03.jpg");
      piece[piece.length]=new Array("pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg");
      piece[piece.length]=new Array("pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg");
      piece[piece.length]=new Array("pic30.jpg","pic31.jpg","pic32.jpg","blank.jpg");
      swop();
    }
    
    function check(imgnum) {
      x=parseInt(imgnum.substring(4,5));				// Retrieves the x co-ordinate of the image from it's ID.
      y=parseInt(imgnum.substring(3,4));				// Retrieves the y co-ordinate of the image from it's ID.
    // alert(y+':'+x);  // for testing purposes
      var ylow=(y-1<0)?0:y-1;							// This makes sure that the lower bound of y does not drop below 0.
      var yhigh=(y+1>3)?0:y+1;							// This makes sure that the upper bound of y does not drop go above 3.
      var xlow=(x-1<0)?0:x-1;							// This makes sure that the lower bound of x does not drop below 0.
      var xhigh=(x+1>3)?0:x+1;							// This makes sure that the upper bound of x does not drop go above 3.
    
      if(document.getElementById(imgnum).src!="blank.jpg") {
    
        if(piece[ylow][x]=="blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="blank.jpg";}		// Checks above y for a blank image and if it finds one a swop is made.
        else if(piece[yhigh][x]=="blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="blank.jpg";}	// Checks below y for a blank image and if it finds one a swop is made.
        else if(piece[y][xlow]=="blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="blank.jpg";}	// Checks above x for a blank image and if it finds one a swop is made.
        else if(piece[y][xhigh]=="blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="blank.jpg";}	// Checks below x for a blank image and if it finds one a swop is made.
        else{alert("Invalid move!!!");}					// If there is no blank image around the clicked image then the user is notified.
      } else{alert("Invalid move!!!");}					// If the user clicks on the blank image then they are notified.
      swop();
    }
    
    function swop() {
      for(var m=0;m<4;m++) {
        for(var n=0;n<4;n++) {
          document.getElementById("pic"+m+n).src=piece[m][n];		// Swops all the image sources for the ones in the array.
          document.getElementById("pic"+m+n).alt=piece[m][n];
        }
      }
    }
    
    function randOrd() { return (Math.round(Math.random())-0.5); }
    
    function RandomizePuzzle() {
      var RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
      RndArr.sort(randOrd);
      RndArr.sort(randOrd);  // do it again just for kicks if desired
    // alert(RndArr.join(' '));	// for testing purposes
      var i = 0;
      for(var m=0;m<4;m++) {
        for(var n=0;n<4;n++) {
    	  var pix = 'pic'+RndArr[i];  // alert(pix);
    	  	  if (pix == 'pic33') { piece[m][n] = 'blank.jpg'; }
    	                     else { piece[m][n] = pix+'.jpg'; }
          document.getElementById(pix).src=piece[m][n];
          document.getElementById(pix).alt=piece[m][n];
          i++;
        }
      }
      swop();
    }
    </script>
    </head>
    
    <body onload="ReorderPuzzle()">
    <div id="game">
      <img src="" id="pic00" onclick="check(this.id);" alt="">
      <img src="" id="pic01" onclick="check(this.id);" alt="">
      <img src="" id="pic02" onclick="check(this.id);" alt="">
      <img src="" id="pic03" onclick="check(this.id);" alt=""><br>
      <img src="" id="pic10" onclick="check(this.id);" alt="">
      <img src="" id="pic11" onclick="check(this.id);" alt="">
      <img src="" id="pic12" onclick="check(this.id);" alt="">
      <img src="" id="pic13" onclick="check(this.id);" alt=""><br>
      <img src="" id="pic20" onclick="check(this.id);" alt="">
      <img src="" id="pic21" onclick="check(this.id);" alt="">
      <img src="" id="pic22" onclick="check(this.id);" alt="">
      <img src="" id="pic23" onclick="check(this.id);" alt=""><br>
      <img src="" id="pic30" onclick="check(this.id);" alt="">
      <img src="" id="pic31" onclick="check(this.id);" alt="">
      <img src="" id="pic32" onclick="check(this.id);" alt="">
      <img src="" id="pic33" onclick="check(this.id);" alt="">
    </div>
    <button onclick="RandomizePuzzle()">Shuffle</button>
    <button onclick="ReorderPuzzle()">Reorder</button>
    </body>
    </html>
    I didn't have the images so I modified the CSS section.
    Change it back if you want to.

    Good Luck!

  3. #3
    Join Date
    Dec 2008
    Posts
    7

    Talking Thanks!

    looks good man i'll try it now an let you know i get on thankyou so much!!!!!

  4. #4
    Join Date
    Dec 2008
    Posts
    7

    Unhappy Nooo!

    ok tried using it....when you do it without images it works fine - bloody brilliant infact but once i had placed my images into the puzzle and hit the shuffle button it duplicates the blank.jpg image and when you move the origional image around it fils in each image you go over in with blank.jpg any ideas?! im dying here lol javascript gives me a huge headache now - i'll give you the code im using but it's pretty much identical to the 1 your did any further help would be massively appreciated!!! thankyou!!!!!
    Attached Files Attached Files
    Last edited by Antifaith; 12-13-2008 at 03:09 PM. Reason: forgot attachment

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412
    Since the problem seems to be with the images, do you ave a link to where they are for testing purposes?

  6. #6
    Join Date
    Dec 2008
    Posts
    7
    their on my pc atm - ill just put them on flickr or somethin now thanks for the quick reply be ten mins

  7. #7
    Join Date
    Dec 2008
    Posts
    7
    here's the link to the photo's it's my girlfriends dog lol thanks for your help again
    Last edited by Antifaith; 12-13-2008 at 04:29 PM.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Talking Here you go ...

    I got this version working on my local computer.
    Make sure you put all the images in a sub-directory of the game referenced as "_images/"
    and make sure they don't have the filenames in the 'flicker' site.

    Good Luck!

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>Game</title>
    
    <style type="text/css">
     #game img {
    	   width:50px;
    	   height:50px;
    	   padding: 0px 0px 0px 0px;
    	   margin: 0px 0px 0px 0px;
    /*	   border:1px solid red; */
    	   font-size:3em;
    	   }
    </style>
    
    <script type="text/javascript">
    
    var piece, x, y;
    
    function ReorderPuzzle() {
      piece=new Array();
    
      piece[piece.length]=new Array("pic00.jpg","pic01.jpg","pic02.jpg","pic03.jpg");
      piece[piece.length]=new Array("pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg");
      piece[piece.length]=new Array("pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg");
      piece[piece.length]=new Array("pic30.jpg","pic31.jpg","pic32.jpg","blank.jpg");
      swop();
    }
    
    function check(imgnum) {
      x=parseInt(imgnum.substring(4,5));				// Retrieves the x co-ordinate of the image from it's ID.
      y=parseInt(imgnum.substring(3,4));				// Retrieves the y co-ordinate of the image from it's ID.
    // alert(y+':'+x);  // for testing purposes
      var ylow=(y-1<0)?0:y-1;							// This makes sure that the lower bound of y does not drop below 0.
      var yhigh=(y+1>3)?0:y+1;							// This makes sure that the upper bound of y does not drop go above 3.
      var xlow=(x-1<0)?0:x-1;							// This makes sure that the lower bound of x does not drop below 0.
      var xhigh=(x+1>3)?0:x+1;							// This makes sure that the upper bound of x does not drop go above 3.
    
      if(document.getElementById(imgnum).src!="blank.jpg") {
    
        if(piece[ylow][x]=="blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="blank.jpg";}		// Checks above y for a blank image and if it finds one a swop is made.
        else if(piece[yhigh][x]=="blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="blank.jpg";}	// Checks below y for a blank image and if it finds one a swop is made.
        else if(piece[y][xlow]=="blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="blank.jpg";}	// Checks above x for a blank image and if it finds one a swop is made.
        else if(piece[y][xhigh]=="blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="blank.jpg";}	// Checks below x for a blank image and if it finds one a swop is made.
        else{alert("Invalid move!!!");}					// If there is no blank image around the clicked image then the user is notified.
      } else{alert("Invalid move!!!");}					// If the user clicks on the blank image then they are notified.
      swop();
    }
    
    function swop() {
      for(var m=0;m<4;m++) {
        for(var n=0;n<4;n++) {
          document.getElementById("pic"+m+n).src="_images/"+piece[m][n];		// Swops all the image sources for the ones in the array.
          document.getElementById("pic"+m+n).alt=piece[m][n];
        }
      }
    }
    
    function randOrd() { return (Math.round(Math.random())-0.5); }
    
    function RandomizePuzzle() {
      var RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
      RndArr.sort(randOrd);
      RndArr.sort(randOrd);  // do it again just for kicks if desired
    // alert(RndArr.join(' '));	// for testing purposes
      var i = 0;
      for(var m=0;m<4;m++) {
        for(var n=0;n<4;n++) {
    	  var pix = 'pic'+RndArr[i];  // alert(pix);
    	  	  if (pix == 'pic33') { piece[m][n] = 'blank.jpg'; }
    	                     else { piece[m][n] = pix+'.jpg'; }
          document.getElementById(pix).src="_images/"+piece[m][n];
          document.getElementById(pix).alt=piece[m][n];
          i++;
        }
      }
      swop();
    }
    </script>
    </head>
    
    <body onload="ReorderPuzzle()">
    <div id="game">
      <img src="" id="pic00" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic01" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic02" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic03" onclick="check(this.id);" alt="" border"0"><br>
      <img src="" id="pic10" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic11" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic12" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic13" onclick="check(this.id);" alt="" border"0"><br>
      <img src="" id="pic20" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic21" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic22" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic23" onclick="check(this.id);" alt="" border"0"><br>
      <img src="" id="pic30" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic31" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic32" onclick="check(this.id);" alt="" border"0">
      <img src="" id="pic33" onclick="check(this.id);" alt="" border"0">
    </div>
    <button onclick="RandomizePuzzle()">Shuffle</button>
    <button onclick="ReorderPuzzle()">Reorder</button>
    </body>
    </html>

  9. #9
    Join Date
    Dec 2008
    Posts
    7

    Talking Whoop!

    fan f*ckin tastic man thanks very much for your help you've been a great help

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Thumbs up Here you go ...

    Here's the move counter you requested in the PM.
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    meta http-equiv="content-script-type" content="text/javascript">
    <
    meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <
    title>Game</title>

    <
    style type="text/css">
     
    #game span {
           
    padding0px 0px 0px 0px;
           
    margin0px 0px 0px 0px;
           }

     
    #game img {
    /*
           width:50px;
           height:50px;
    */
           
    font-size:3em;
           }

    </
    style>

    <
    script type="text/javascript">

    var 
    piecexy;

    function 
    ReorderPuzzle() {
      
    piece=new Array();

      
    piece[piece.length]=new Array("pic00.jpg","pic01.jpg","pic02.jpg","pic03.jpg");
      
    piece[piece.length]=new Array("pic10.jpg","pic11.jpg","pic12.jpg","pic13.jpg");
      
    piece[piece.length]=new Array("pic20.jpg","pic21.jpg","pic22.jpg","pic23.jpg");
      
    piece[piece.length]=new Array("pic30.jpg","pic31.jpg","pic32.jpg","blank.jpg");
      
    document.getElementById('MoveCnt').value = -1;
      
    swop();
    }

    function 
    check(imgnum) {
      
    x=parseInt(imgnum.substring(4,5));                // Retrieves the x co-ordinate of the image from it's ID.
      
    y=parseInt(imgnum.substring(3,4));                // Retrieves the y co-ordinate of the image from it's ID.
    // alert(y+':'+x);  // for testing purposes
      
    var ylow=(y-1<0)?0:y-1;                            // This makes sure that the lower bound of y does not drop below 0.
      
    var yhigh=(y+1>3)?0:y+1;                            // This makes sure that the upper bound of y does not drop go above 3.
      
    var xlow=(x-1<0)?0:x-1;                            // This makes sure that the lower bound of x does not drop below 0.
      
    var xhigh=(x+1>3)?0:x+1;                            // This makes sure that the upper bound of x does not drop go above 3.

      
    if(document.getElementById(imgnum).src!="blank.jpg") {

        if(
    piece[ylow][x]=="blank.jpg"){piece[ylow][x]=piece[y][x];piece[y][x]="blank.jpg";}        // Checks above y for a blank image and if it finds one a swop is made.
        
    else if(piece[yhigh][x]=="blank.jpg"){piece[yhigh][x]=piece[y][x];piece[y][x]="blank.jpg";}    // Checks below y for a blank image and if it finds one a swop is made.
        
    else if(piece[y][xlow]=="blank.jpg"){piece[y][xlow]=piece[y][x];piece[y][x]="blank.jpg";}    // Checks above x for a blank image and if it finds one a swop is made.
        
    else if(piece[y][xhigh]=="blank.jpg"){piece[y][xhigh]=piece[y][x];piece[y][x]="blank.jpg";}    // Checks below x for a blank image and if it finds one a swop is made.
        
    else{alert("Invalid move!!!");}                    // If there is no blank image around the clicked image then the user is notified.
      
    } else{alert("Invalid move!!!");}                    // If the user clicks on the blank image then they are notified.
      
    swop();
    }

    function 
    swop() {
      
    document.getElementById('MoveCnt').value parseInt(document.getElementById('MoveCnt').value) + 1;
      for(var 
    m=0;m<4;m++) {
        for(var 
    n=0;n<4;n++) {
          
    document.getElementById("pic"+m+n).src="_images/"+piece[m][n];        // Swops all the image sources for the ones in the array.
          
    document.getElementById("pic"+m+n).alt=piece[m][n];
        }
      }
    }

    function 
    randOrd() { return (Math.round(Math.random())-0.5); }

    function 
    RandomizePuzzle() {
      var 
    RndArr = ['00','01','02','03','10','11','12','13','20','21','22','23','30','31','32','33'];
      
    RndArr.sort(randOrd);
      
    RndArr.sort(randOrd);  // do it again just for kicks if desired
    // alert(RndArr.join(' '));    // for testing purposes
      
    var 0;
      for(var 
    m=0;m<4;m++) {
        for(var 
    n=0;n<4;n++) {
          var 
    pix 'pic'+RndArr[i];  // alert(pix);
                
    if (pix == 'pic33') { piece[m][n] = 'blank.jpg'; }
                             else { 
    piece[m][n] = pix+'.jpg'; }
          
    document.getElementById(pix).src="_images/"+piece[m][n];
          
    document.getElementById(pix).alt=piece[m][n];
          
    i++;
        }
      }
      
    document.getElementById('MoveCnt').value = -1;
      
    swop();
    }
    </script>
    </head>

    <body onload="ReorderPuzzle()">
    <div id="game">
      <span><img src="" id="pic00" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic01" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic02" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic03" onclick="check(this.id);" alt="" border"0"></span><br>
      <span><img src="" id="pic10" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic11" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic12" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic13" onclick="check(this.id);" alt="" border"0"></span><br>
      <span><img src="" id="pic20" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic21" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic22" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic23" onclick="check(this.id);" alt="" border"0"></span><br>
      <span><img src="" id="pic30" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic31" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic32" onclick="check(this.id);" alt="" border"0"></span>
      <span><img src="" id="pic33" onclick="check(this.id);" alt="" border"0"></span>
    </div>
    <button onclick="RandomizePuzzle()">Shuffle</button>
    <button onclick="ReorderPuzzle()">Reorder</button>
    <input type="text" value="0" id="MoveCnt" size="3" readonly> Moves
    </body>
    </html> 
    A picture puzzle is a lot harder for me than moving the numbers around.
    Thank goodness for the "Reorder" button!

  11. #11
    Join Date
    Mar 2013
    Posts
    1
    bro where is the img source where i supposed to add?

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