Javascript/Tiles Game tables

Discussion in 'OT Technology' started by Mr Coffee, Jan 1, 2010.

  1. Mr Coffee

    Mr Coffee New Member

    Joined:
    Jun 25, 2006
    Messages:
    11,338
    Likes Received:
    0
    Location:
    London
    Hey guys. Sorry to have to even bother to ask this, but i'm running out of places to ask this...
    I'm sure many of you will know what i speak about when i say i'm the family "computer expert" and now my sister has turned to me nagging about help with a coursework. Hopefully you gentlemen can help me out here.

    This is what she sent me:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Nuras Puzzle Game</title>
    <script type="text/javascript">
    <!--
    function puzzle()
    {
    for(var i = 0; i < 500; i++)
    {
    var moves = new Array(); 
    for(var blankpos = 0; blankpos< 16; blankpos++)
    {
    if(slot(blankpos).innerText == "0")
    {
    if((blankpos % 4) > 0)
    {
    moves[pos++] = blankpos - 1; // Left
    }
    if((blankpos % 4) < 3)
    {
    moves[pos++] = blankpos + 1; // Right
    }
    if(blankpos > 3)
    {
    moves[pos++] = blankpos - 4; // Up
    }
    if(blankpos < 12)
    {
    moves[pos++] = blankpos + 4; // Down
    }
    }
    }
    
    moveSlot(moves[(Math.floor(Math.random() * moves.length))]);
    }
    }
    function moveSlot(pos)
    {
    var move = -1; 
    if((pos % 4) > 0 && slot(pos - 1).innerText == "0")
    {
    move = pos - 1; // Left
    }
    if((pos % 4) < 3 && slot(pos + 1).innerText == "0")
    {
    move = pos + 1; // Right
    }
    if(pos > 3 && slot(pos - 4).innerText == "0")
    {
    move = pos - 4; // Up
    }
    if(pos < 12 && slot(pos + 4).innerText == "0")
    {
    move = pos + 4; // Down
    }
    if(move > -1)
    {
    slot(move).innerText = slot(pos).innerText;
    slot(move).className = slot(pos).className;
    slot(pos).innerText = "0";
    slot(pos).className = "blankpos";
    }
    }
    // -->
    </script>
    <style type="text/css">
    b
    {
    font-size:100;
    display:inline;
    height:60;
    width:60;
    }
    .blankpos
    {
    display:none;
    }
    </style>
    <style type="text/css">
    p.c2
    {
    text-align:center;
    }
    button.c1
    {
    font-size:20;
    width:160;
    }
    .style1 {
    color: #000066;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top">&nbsp;</td>
    <h1>Nuras Puzzel Game</h1>
    <hr />
    
    
    <table border="1" align="center" bgcolor="pink">
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(0)">01 </button></td>
    <td><button id="slot" class="b" onclick="moveSlot(1)">02</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(2)">03</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(3)">04</button></td>
    </tr>
    </center>
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(4)">05</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(5)">06</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(6)">07</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(7)">08</button></td>
    </tr>
    </center>
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(8)">09</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(9)">10</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(10)">11</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(11)">12</button></td>
    </tr>
    </center>
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(12)">13</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(13)">14</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(14)">15</button></td>
    <td><button id="slot" class="blankpos" onclick="moveSlot(15)">0</button></td>
    </tr>
    </center>
    </table>
    <p class="c2"><button onclick="puzzle()" class="c1">New Game</button></p>
    </td>
    </tr>
    </table>
    
    </body>
    </html> 
    Apprently she just wants me to change it to a 3x3 table rather than 4x4. Also, how to do random?

    I would :bowdown: to you for ever and ever if someone could fix it for me, but any pointers in what to fix and stuff would be more than awesome. Hell, i'd pay someone to do it, but i'm getting my money on the same day she's supposed to hand this in :hs:

    Cheers, guys
     
  2. Krakerjak

    Krakerjak Active Member

    Joined:
    Jul 7, 2003
    Messages:
    8,288
    Likes Received:
    0
    Location:
    Edmonton eh
    3x3 now, pretty much just had to change a few numbers
    if you want random working i can look at it later

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Nuras Puzzle Game</title>
    <script type="text/javascript">
    <!--
    function puzzle()
    {
    for(var i = 0; i < 500; i++)
    {
    var moves = new Array(); 
    for(var blankpos = 0; blankpos< 9; blankpos++)
    {
    if(slot(blankpos).innerText == "0")
    {
    if((blankpos % 3) > 0)
    {
    moves[pos++] = blankpos - 1; // Left
    }
    if((blankpos % 3) < 2)
    {
    moves[pos++] = blankpos + 1; // Right
    }
    if(blankpos > 2)
    {
    moves[pos++] = blankpos - 2; // Up
    }
    if(blankpos < 9)
    {
    moves[pos++] = blankpos + 2; // Down
    }
    }
    }
    
    moveSlot(moves[(Math.floor(Math.random() * moves.length))]);
    }
    }
    function moveSlot(pos)
    {
    var move = -1; 
    if((pos % 3) > 0 && slot(pos - 1).innerText == "0")
    {
    move = pos - 1; // Left
    }
    if((pos % 3) < 2 && slot(pos + 1).innerText == "0")
    {
    move = pos + 1; // Right
    }
    if(pos > 2 && slot(pos - 3).innerText == "0")
    {
    move = pos - 3; // Up
    }
    if(pos < 6 && slot(pos + 3).innerText == "0")
    {
    move = pos + 3; // Down
    }
    if(move > -1)
    {
    slot(move).innerText = slot(pos).innerText;
    slot(move).className = slot(pos).className;
    slot(pos).innerText = "0";
    slot(pos).className = "blankpos";
    }
    }
    // -->
    </script>
    <style type="text/css">
    b
    {
    font-size:100;
    display:inline;
    height:60;
    width:60;
    }
    .blankpos
    {
    display:none;
    }
    </style>
    <style type="text/css">
    p.c2
    {
    text-align:center;
    }
    button.c1
    {
    font-size:20;
    width:160;
    }
    .style1 {
    color: #000066;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top">&nbsp;</td>
    <h1>Nuras Puzzel Game</h1>
    <hr />
    
    
    <table border="1" align="center" bgcolor="pink">
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(0)">01 </button></td>
    <td><button id="slot" class="b" onclick="moveSlot(1)">02</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(2)">03</button></td>
    </tr>
    </center>
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(3)">04</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(4)">05</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(5)">06</button></td>
    </tr>
    </center>
    <center>
    <tr>
    <td><button id="slot" class="b" onclick="moveSlot(6)">07</button></td>
    <td><button id="slot" class="b" onclick="moveSlot(7)">08</button></td>
    <td><button id="slot" class="blankpos" onclick="moveSlot(8)">0</button></td>
    </tr>
    </tr>
    </center>
    </table>
    <p class="c2"><button onclick="puzzle()" class="c1">New Game</button></p>
    </td>
    </tr>
    </table>
    
    </body>
    </html>
     
  3. Mr Coffee

    Mr Coffee New Member

    Joined:
    Jun 25, 2006
    Messages:
    11,338
    Likes Received:
    0
    Location:
    London
    :bowdown:

    Thank you so much. Nah, random is okay, i'll send it over to her asap. Let the bitch work it out, she just asked for 3x3 :o
     

Share This Page