Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2006
    Location
    Joussard, Alberta
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    generic homework help...

    Sorry about the useless title guys, couldn't figure out what to call this.

    I am to (last assignment, Yay!) create one of those sliding tile games. The actual instructions from the course are not quite enough to get my head working in the right direction. I've gone looking for examples on the net, but they all seem to be more code than I can wrap my head around today.

    Can someone point me in the direction of a simple (say 3x3) version with some reasonably well commented code or even an "in english" explanation of the processes and functions involved so that I can figure out how to do this?

    Thanks so much...

  • #2
    New Coder
    Join Date
    Apr 2006
    Location
    Joussard, Alberta
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh. Somehow I thought that was asking a bit much.

    Someone pointed me to this script on the WebDevelopers forum, and it is short enough that I should be able to figure out what is going on. But there are still a number of questions I have:

    Code:
    <script type="text/javascript">
    
    /*  GAME SETUP SCRIPT  */
      var pics = new Array
        pics[0] = "1.jpg"
        pics[1] = "2.jpg"
        pics[2] = "3.jpg"
        pics[3] = "4.jpg"
        pics[4] = "5.jpg"
        pics[5] = "6.jpg"
        pics[6] = "7.jpg"
        pics[7] = "8.jpg"
        pics[8] = "9.jpg"
        pics[9] = "10.jpg"
        pics[10] = "11.jpg"
        pics[11] = "12.jpg"
        pics[12] = "13.jpg"
        pics[13] = "14.jpg"
        pics[14] = "15.jpg"
        pics[15] = "blank.jpg"   // source of blank image
    
    /*  GENERATE IMAGE BOARD  */
      for(var i=0;i<pics.length;i++) {
        document.write('<img name="pic'+ (i - -1) +'" id="pic'+ (i - -1) +'" src="blank.jpg" height="50" width="50" onclick="moveImg('+ i +')">')
        if((i - -1) % 4 == 0) {
          document.write("<BR>")
        }
      }
    
      document.write('<BR><BR><span id="moves">Moves: 0</span>')
    
      var newPic = ""
      var tempPics = new Array
      var numMoves = 0
    
      for(var i=0;i<pics.length;i++) {
        newPic = pics[Math.floor(Math.random()*pics.length)]
        tempPics[i] = newPic
        for(var j=0;j<tempPics.length - 1;j++) {
          if(newPic == tempPics[j]) {
            newPic = pics[Math.floor(Math.random()*pics.length)]
            tempPics[i] = newPic
            j = -1
          }
        }
        document.getElementById('pic'+ (i- -1)).src = newPic
      }
    
    /*  IMAGE MOVEMENT  */
      function moveImg(image) {
        var ok = new Array
          ok[0] = "1,4"
          ok[1] = "0,5,2"
          ok[2] = "1,6,3"
          ok[3] = "2,7"
          ok[4] = "0,8,5"
          ok[5] = "4,1,9,6"
          ok[6] = "5,7,2,10"
          ok[7] = "3,11,6"
          ok[8] = "4,12,9"
          ok[9] = "8,10,13,5"
          ok[10] = "9,11,14,6"
          ok[11] = "10,7,15"
          ok[12] = "8,13"
          ok[13] = "12,14,9"
          ok[14] = "13,15,10"
          ok[15] = "14,11"
    
        for(var i=0;i<ok.length;i++) {
          ok[i] = ok[i].split(',')
        }
    
        var theSrc = ""
        var toMove = -1
    
        if(window.event.ctrlKey) {
          toMove = parseInt(prompt('With what space do you want to switch? (1-16)','') - 1)
          ok[image][toMove] = toMove
        }
        else {    
          for(var i=0;i<ok[image].length;i++) {
            toMove = -1
            theSrc = document.getElementById('pic'+ (ok[image][i] - -1)).src
            theSrc = theSrc.substr(theSrc.length - 6,theSrc.length)
            if(theSrc == pics[15].substr(pics[15].length - 6,pics[15].length)) {
              toMove = i
              break;
            }
          }
        }
    
        if(toMove >= 0) {
          var backUp = document.getElementById('pic'+ (ok[image][toMove] - -1)).src
          document.getElementById('pic'+ (ok[image][toMove] - -1)).src = document.getElementById('pic'+ (image - -1)).src
          document.getElementById('pic'+ (image - -1)).src = backUp
          numMoves += 1
          moves.innerHTML = "Moves: "+ numMoves
        }
        var conDit = ""
        var ok = "1"
    
        for(var i=0;i<pics.length;i++) {
          temp = document.getElementById('pic'+ (i - -1)).src
          temp = temp.substr(temp.length - 6,temp.length)
          equ = i - -1
          if(equ < 10) {
            equ = "/"+ (i - -1)
          }
          conDit = "temp == equ + pics[i].substr(pics[i].length - 4,pics[i].length)"
    
          if(!(eval(conDit)) && temp == pics[i].substr(pics[i].length - 6,pics[i].length)) {
            conDit = "temp == pics[i].substr(pics[i].length - 6,pics[i].length)"
          }
          if(!eval(conDit)) {
            ok = "0"
            break;
          }
        }
    
        if(ok == 1) {
          youWin()
        }
      }
    
    /*  YOU WON!  */
      function youWin() {
        alert("You win!")
      }
    
    </script>
    first, what does this notation mean:
    Code:
     ok[image][toMove] =
    second, can anyone see where he came up with the numbers in the ok[i] array?

    Third, why does he use
    Code:
    (i - -1)
    ?
    is that an autodecrememtnt of i by one or... the same as i+1? or something else?

    I understand how it generates the game board, how it randomizes the tiles, and checks to make sure it does not repeat any of the tiles... but the movIng function is a bit over my head...

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    the ok array is dimensioned by using the split method so
    ok[image][toMove] = toMove is choiseing a field from that array


    in some onstances the 1 - - 1 could be +1
    but in others it is adding a sting number with 1
    and the - auto 'types' the string number to be a digit number.

    could have used '42'*1+1;

    or other methods

    if it had used a true dimensioned array using digits for array ok there woulld be no need to auto type
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there nathan_lamothe,
    Can someone point me in the direction of a simple (say 3x3) version
    Well, this is pretty basic...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>simple 3X3 sliding tile game</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    table {
        border:3px double #000;
        background-color:#999;
        color:#000;
        margin:30px auto; 
     }
    td {
        width:40px;
        height:40px;
        border:1px solid #530;
        background-color:#ffe;
        font-family:arial,sans-serif;
        font-size:18px;
        color:#530;
        text-weight:bold;
        text-align:center;
     }
    .blank {
        border:0 solid #000;
        background-color:#999;
        color:#000;
     }
    .notBlank{
        border:1px solid #530;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    
    onload=function() {
       cell=document.getElementsByTagName('td');
    for(i=0;i<cell.length;i++) {
       cell[i].onclick=function() {
       moveCell(this);
       }
      }
     }
    
    function moveCell(el) {
    
       num=new Array();
       num[0]=parseFloat(el.id.split('-')[1])-1;
       num[1]=parseFloat(el.id.split('-')[1])+1;
       num[2]=parseFloat(el.id.split('-')[1])-3;
       num[3]=parseFloat(el.id.split('-')[1])+3;
    
    if(num[0]<0) {
       num[0]=0;
     }
    if(num[1]>8) {
       num[1]=8;
     }
    if(num[2]<0) {
       num[2]=num[2]+3;
     }
    if(num[3]>8) {
       num[3]=num[3]-3;
     }
    for(i=0;i<num.length;i++) {
      obj=document.getElementById(el.id.split('-')[0]+'-'+num[i]);
    if(obj.className=='blank') {
       obj.innerHTML=el.innerHTML;
       obj.className='notBlank';
       el.innerHTML=''
       el.className='blank';
       }
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <table><tr>
      <td id="c-0">3</td>
      <td id="c-1">1</td>
      <td id="c-2">5</td>
    </tr><tr>
      <td id="c-3">7</td>
      <td id="c-4">2</td>
      <td id="c-5">8</td>
    </tr><tr>
      <td id="c-6">4</td>
      <td id="c-7">6</td>
      <td id="c-8" class="blank"></td>
    </tr></table>
    
    </body>
    </html>
    
    coothead

  • #5
    New Coder
    Join Date
    Apr 2006
    Location
    Joussard, Alberta
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you guys. This is awesome.

    coothead, I went through your script three times before I truly understood it...but that is exactly what I needed.

    just to make sure, i've never used .innerHTML ... that refers to the number in the cell right?

    and once I figured out that -1, +1, -3, +3 were the cells left, right, up, and down from the clicked cell... I was able to go back to the script I posted and figure out where the numbers in ok[] came from. (the cells l, r, up, down, from cell ok[i].

    And with that and Vic's explanation of dimensioned arrays coupled with a quick google of devarticles.com, I am an awful lot closer to fully understanding the first script as well.

    I am so going to get this done today.

    Thank you both so much.

  • #6
    Owl
    Owl is offline
    New Coder
    Join Date
    Jun 2002
    Posts
    62
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi Guys,

    Slide tiles until c-2 is blank and press c-3
    or vise versa, when c-3 is blank press c-2,
    same with c-5 and c-6.
    Not easily done in real life

    On a minor note, coothead, the nums
    configuration in your sample is not solvable.

    Owl, Mentor at WebXpertz

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Owl,

    thanks for testing my code more vigorously than I.

    Oh well, back to the drawing board.

    coothead

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    &#160;
    &#160;
    I have found a cure for the error in the script, if somewhat inelegant.
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>simple 3X3 sliding tile game</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    table {
        border:3px double #000;
        background-color:#999;
        color:#000;
        margin:30px auto; 
     }
    td {
        width:40px;
        height:40px;
        border:1px solid #530;
        background-color:#ffe;
        font-family:arial,sans-serif;
        font-size:18px;
        color:#530;
        text-weight:bold;
        text-align:center;
     }
    .blank {
        border:0 solid #000;
        background-color:#999;
        color:#000;
     }
    .notBlank{
        border:1px solid #530;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    onload=function() {
       cell=document.getElementsByTagName('td');
    
    for(i=0;i<cell.length;i++) {
       cell[i].id='c-'+i; 
    if(i==cell.length-1){
       cell[i].className='blank';
     }
       cell[i].onclick=function() {
       moveCell(this);
       }
      }
     }
    
    function moveCell(el) {
    
    if((el.id=='c-3')&&(document.getElementById('c-2').className=='blank')||
       (el.id=='c-2')&&(document.getElementById('c-3').className=='blank')||
       (el.id=='c-6')&&(document.getElementById('c-5').className=='blank')||
       (el.id=='c-5')&&(document.getElementById('c-6').className=='blank')) {
       return;
     }
       num=new Array();
       num[0]=parseFloat(el.id.split('-')[1])-1;
       num[1]=parseFloat(el.id.split('-')[1])+1;
       num[2]=parseFloat(el.id.split('-')[1])-3;
       num[3]=parseFloat(el.id.split('-')[1])+3;
    
    if(num[0]<0) {
       num[0]=0;
     }
    if(num[1]>8) {
       num[1]=8;
     }
    if(num[2]<0) {
       num[2]=num[2]+3;
     }
    if(num[3]>8) {
       num[3]=num[3]-3;
     }
    for(i=0;i<num.length;i++) {
       obj=document.getElementById(el.id.split('-')[0]+'-'+num[i]);
    if(obj.className=='blank') {
       obj.innerHTML=el.innerHTML;
       obj.className='notBlank';
       el.innerHTML=''
       el.className='blank';
       }
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <table><tr>
      <td>3</td>
      <td>1</td>
      <td>5</td>
    </tr><tr>
      <td>7</td>
      <td>2</td>
      <td>8</td>
    </tr><tr>
      <td>4</td>
      <td>6</td>
      <td></td>
    </tr></table>
    
    </body>
    </html>
    
    Looking on the bright side though, I have tidied up the table.

    coothead

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    I also been playing

    it can be completed

    http://www.vicsjavascripts.org.uk/Fun/06043B.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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