Web Analytics Made Easy -
StatCounter I am stumped with this bingo thing - CodingForum

Announcement

Collapse
No announcement yet.

I am stumped with this bingo thing

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I am stumped with this bingo thing

    Good day one and all, I need help once more
    ( I know the title isn't really descriptive but the name I had in mind was way to long to fit there.)

    I'm working on a web version of Bingo and I just don't know what to do next, I mean I know what I need to do but I just can't seem to find the way to do it, I suspect my brain is fried or something.
    And I'm going to say this immediately that this is my final project for this semester and I don't want/need a functioning code of what to do next, I just need help to figure out how the next step can be achieved (I'm sorry if this sounds weird).

    This is the php document
    Code:
    <?php
    session_start();
    include_once "class.sql.php";
    $sql = new SQL();
    
    $GameID = $_GET['ID'];
    $Numbers = $sql->GetWinningNumbers($GameID);
    $Cards = $sql->GetCards($GameID,$_SESSION['Username']);
    
    $string;
    
    $x = 0;
    while($row = mysql_fetch_array($Numbers))
    { $string .= "$row[0]".'#'; }
    ?>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Bingo Game Extravaganza</title>
    <link rel='stylesheet' type='text/css' href='style.css' />
    
    <script type='text/javascript' src="DrawNumber.js">
    </script>
    
    </head>
    <body onLoad="Start( '<?php echo $string; ?>' )">
    <form >
    
    
    
    
    <div class ="SecondSplit">
    <div id="Numbers" class="Numbers"></div>
    <?php 
    
    while($row = mysql_fetch_array($Cards))
    {
        
        $x++;
        echo '<div class ="MainSplit">';
        for ($counter = 0; $counter <= 24; $counter++) 
        {
            ?>
            <div class="Frame"><img src="Myndir/<?php echo $row [$counter]; ?>.jpg" height="50" OnClick="AddNumber( '<?php echo $x; echo '#'; echo $row[$counter];?>' );"/></div>
            <?php
        }
    
      echo '</div>';
    } ?>
    
    </div>
    
    
    
    
    </form>
    </body>
    </html>
    and this is the javascript document

    Code:
    var counter = 0;
    
    var NumberArray = new Array();
    
    function Start(x)
    {
        //قetta bْtar niًur tِlunar sem verًa dregnar niًur ي array
        NumberArray = x.split("#");
    
        IntervalId =  setTimeout ("Draw()", 2500)
    }
    
    function Draw( )
    {
        if(counter <= 24)
        {
            var stringA =  '<img src= \"Myndir/'; //قessi tveir strengir leyfa mér aً birta myndir talnana
            var stringB = '.jpg" height="50" />';
            document.getElementById("Numbers").innerHTML += stringA + NumberArray[counter]+  stringB;
            counter++;
    
            IntervalId2 = setTimeout  ("Draw( )", 2500);
        }
    }
    
    function AddNumber(numb)
    {
        alert(numb);
    }
    What I one of the numbers a big x or something goes over it and then an array in the javascript takes the number and holds onto it so it can be checked at the end of the game as to whether the player had bingo or not. need to happen is when you click on the picture for
    But the problem with that is the array has to be able to keep track of more than one card the player has and the corresponding numbers that have been pressed.
    See attached picture for example
    Also I was thinking multi-dimensional array to hold onto the card number and the numbers on said card that have been clicked but I'm not really sure how to do it, you might notice that is where I was going with the whole
    OnClick="AddNumber( '<?php echo $x; echo '#'; echo $row[$counter];?>' ); thing, was going to split it up at the # mark and then send it to an array but that is where my brain gave up on me.

    Also any comment on my code how to improve it would be more then excellent.

    If I'm being out of line with this sort of question, since it isn't directly code related then I will either delete this thread, don't know if I can, or mark it resolved and let it be forgotten.

    PS. I know all this sounds incredibly silly and this probably very easy, it just seems my brain is revolting against me.

    PPS. I think I have spelling/grammar errors in here and I apologize for them.
    Attached Files

  • #2
    Ummm...I think you are making it too hard.

    (1) Instead of putting a big X over a number, just change the color of the image. Do that by having two sets of images.
    (2) And then just "read" each card, by iterating through all its images, to see if:
    -- (a) indeed no numbers are changed except "called" numbers
    -- (b) indeed the card has a winning row

    No need to make a "copy" of the card in a JS array. The card *ITSELF* is of course actually a 2D array, isn't it?

    Suppose you had this for your grid:
    Code:
    <table id="CARD_A">
    <tr>
         <td><img id="AB1"></td>
         <td><img id="AI1"></td>
         <td><img id="AN1"></td>
         <td><img id="AG1"></td>
         <td><img id="AO1"></td>
    </tr>
    ... row 2
    ... row 3
    ... row 4
    <tr>
    <tr>
         <td><img id="AB5"></td>
         <td><img id="AI5"></td>
         <td><img id="AN5"></td>
         <td><img id="AG5"></td>
         <td><img id="AO5"></td>
    </tr>
    </table>
    And of course you could have card B (and C and D and...)

    So first you randomly popuplate the board by setting appropriate SRC= values for the images.

    Then when a user clicks on an image, you look at its src attribute and just change from one color to the other.

    Say the unclicked on images are named "num1.jpg","num2.jpg","num3.jpg"..."num75.jpg".

    Then if you have images "Pnum1.jpg","Pnum2.jpg",etc. it is easy to simply do
    Code:
    <img ID="AN2" 
      onclick="if ( this.src = this.src.charAt(0)=='P'?src.substring(1):'P'+src;">
    So click once to mark a number. Make a mistake? Click again to unmark it.

    You can probably come up with a simpler scheme to use for the ID's than I did.

    Or, actually, you don't even really *NEED* to give them IDs. If you coded this:
    Code:
    var currentCard = document.getElementById("CARD_"+whichcard);
    var cardImages = currentCard.getElementsByTagName("img");
    And now you have a nice 25 element array named cardImages and can quickly inquire as to the state of any individual element.

    YOu can see I'm making this up as I go along, sorry. But, still...I think letting the images *BE* the data array makes sense. No need to echo the state of the board in a JS array. Just complicates things.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Thanks for the advice but I don't actually have a multi-dimensional array (or so I think), the numbers for the players cards is stored in a database which I then get, and then I use

      for ($counter = 0; $counter <= 24; $counter++)
      {
      ?>
      <div class="Frame"><img src="Myndir/<?php echo $row [$counter]; ?>.jpg" height="50" OnClick="AddNumber( '<?php echo $x; echo '#'; echo $row[$counter];?>' );"/></div>
      <?php
      }


      to go trough the array of (in this case) 50 numbers. I'm sorry if I sound like I'm rambling I'm a little tired and I didn't just want to leave you hanging. You at least gave me something that I might be able to code which better than what I have now (i.e. none).

      Thanks again for the advice, will look more carefully tomorrow.

      Comment


      • #4
        No, that's fine.

        And you don't have to use a <TABLE>, of course.

        Just that the concept is to put something *around* all your images--say an outer DIV in place of my table--so that you can use getElementsByTagName("img") to get the nice array of 25 images!

        They will, of course be numbered 0 to 24 in the order in which you create them inside the container.

        Why *50* numbers???? You mean for two cards???

        And not to ask a silly question, but why do you store the cards in a DB instead of just generating them randomly as needed? (I understand you need to then store the generated card on the server, so that the user can't cheat, but no reason to keep it on the server longer than the one game. If PHP has session variables, just store it there, instead of in DB.)

        Naturally, after checking for a valid card and for a winner in the JS code, you would then send the state of the card back to the server for verification.

        How do you deliver the number "calls" to the browser? AJAX?
        Be yourself. No one else is as qualified.

        Comment


        • #5
          Sorry I wasn't clear yesterday, when you posted I was more or less crashing.

          The cards are in the database because a user has to buy cards before joining a game, two is minimum. So that raises the question of how can I name the cards without knowing how many there are? That is why I was using OnClick="AddNumber( '<?php echo $x; echo '#'; echo $row[$counter];?>' ) , was planning on splitting it on the # mark into an array, would that acomplish the same thing or complicate things?

          And the outer div you mention I think would be the
          <div class ="SecondSplit">
          Or do you mean one more div around each card itself, which in turn is called "cardA" and so on, because that is pretty good idea but I don't really see the point of it. Explain?

          And I haven't worked out the "Number Call" function yet that is were this whole thread was supposed to lead up to, I'm pretty sure I'm going have to use ajax so the picture of the number pressed can change without refreshing the window but like I said before I'm not entirely certain about this.

          Thanks for the help

          PS. Excuse my horrible sentence work, I just woke up. (Why do I always post here late in the evening or early in the morning, oh well).

          PPS. I also should mention that I'm supposed to later make a function that allows the player to pause the game by pressing a button and while it is paused AJAX is supposed to mark the numbers on the cards for him.
          Last edited by Deadeye; Apr 11, 2009, 08:49 AM. Reason: Forgot something.

          Comment


          • #6
            Ok there has been a slight update, now I can press the pictures to change the from "unmarked state" to "marked state" and vice versa.

            This is how it looks now:

            PHP File
            Code:
            <?php
            session_start();
            include_once "class.sql.php";
            $sql = new SQL();
            
            $GameID = $_GET['ID'];
            $Numbers = $sql->GetWinningNumbers($GameID);
            $Cards = $sql->GetCards($GameID,$_SESSION['Username']);
            
            $string;
            
            $x = 0;
            while($row = mysql_fetch_array($Numbers))
            { $string .= "$row[0]".'#'; }
            ?>
            
            
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html>
            <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <title>Bingo Game Extravaganza</title>
            <link rel='stylesheet' type='text/css' href='style.css' />
            
            <script type='text/javascript' src="DrawNumber.js">
            </script>
            
            </head>
            <body onLoad="Start( '<?php echo $string; ?>' )">
            <form >
            
            
            
            
            <div class ="SecondSplit">
            <div id="Numbers" class="Numbers"></div>
            <?php 
            
            while($row = mysql_fetch_array($Cards))
            {
                
                $x++;
                echo '<div class ="MainSplit" id='.$x.'>';
                for ($counter = 0; $counter <= 24; $counter++) 
                {
                    ?>
                    <div class="Frame"><img src="Myndir/<?php echo $row [$counter]; ?>.jpg" height="50" OnClick="src = 'Myndir/' +  AddNumber( this.src );"/></div>
                    <?php
                }
            
              echo '</div>';
            } ?>
            
            </div>
            
            
            
            
            </form>
            </body>
            </html>
            And the javascript code
            Code:
            var counter = 0;
            
            var NumberArray = new Array();
            
            function Start(x)
            {
                //قetta bْtar niًur tِlunar sem verًa dregnar niًur ي array
                NumberArray = x.split("#");
            
                IntervalId =  setTimeout ("Draw()", 2500)
            }
            
            function Draw( )
            {
            
                
                if(counter <= 24)
                {
                    var stringA =  '<img src= \"Myndir/'; //قessi tveir strengir leyfa mér aً birta myndir talnana
                    var stringB = '.jpg" height="50" />';
                    document.getElementById("Numbers").innerHTML += stringA + NumberArray[counter]+  stringB;
                    counter++;
            
                    IntervalId2 = setTimeout  ("Draw( )", 2500);
                }
            
            }
            
            function AddNumber(numb)
            {
                var Spliter; 
                var bottomslot;
                var NewImageSource;
                
                Spliter = numb.split("/");
                bottomslot = ((Spliter.length)-1); //Leyfir mér aً nل ي nafn myndarinar
                
                
                if(Spliter[bottomslot].substring(0,2) == '-1')
                {
                    NewImageSource = Spliter[bottomslot];
                    return NewImageSource;
                }
                
                if(Spliter[bottomslot].substring(0,1) == 'P')
                {
                    NewImageSource = Spliter[bottomslot].substring(1,7);
                }
                else if (Spliter[bottomslot].substring(0,1) != 'P')
                {
                   NewImageSource = 'P' + Spliter[bottomslot];
                }
                
                
                return NewImageSource;
            }
            Now I need to know something, I know in C# there is a thing called List but I was wondering if there was a javascript equivalent?

            But there is still a problem nagging at me, if I have two or more cards how can I keep the numbers that have been checked on each card separately?
            (example: cardA has the numbers 13,14,8 checked, while cardB has 1,3 checked)

            PS. Sorry about the whole multi-post I got going here

            Comment


            • #7
              Again, if you use those "wrapper DIVs" that I suggested...cardA and cardB...then you will be able to automatically keep them separate.

              Oh, hell...let me demonstrate.

              Back in a bit.
              Be yourself. No one else is as qualified.

              Comment


              • #8
                Ok I got somethings going now just wanted to see what you guys think

                Javacode
                Code:
                var counter = 0;
                
                var NumberArray = new Array();
                
                var myarray;
                function Start(str,x)
                {
                    myarray = new Array(x);
                
                    
                    for (i=0; i < x; i++)
                    myarray[i]=new Array(25)
                    
                    //قetta bْtar niًur tِlunar sem verًa dregnar niًur ي array
                    NumberArray = str.split("#");
                
                    IntervalId =  setTimeout ("Draw()", 2500)
                }
                
                function Draw( )
                {
                    
                
                    
                    if(counter <= 24)
                    {
                        var stringA =  '<img src= \"Myndir/'; //قessi tveir strengir leyfa mér aً birta myndir talnana
                        var stringB = '.jpg" height="50" />';
                        document.getElementById("Numbers").innerHTML += stringA + NumberArray[counter]+  stringB;
                        counter++;
                
                        IntervalId2 = setTimeout  ("Draw( )", 2500);
                    }
                
                }
                
                function CheckNumber(src,CardId,Name)
                {
                    var Spliter; 
                    var bottomslot;
                    var NewImageSource;
                    Spliter = src.split("/");
                    bottomslot = ((Spliter.length)-1); //Leyfir mér aً nل ي nafn myndarinar
                    
                    if(Spliter[bottomslot].substring(0,2) == '-1')
                    {
                        NewImageSource = Spliter[bottomslot];
                        return NewImageSource;
                    }
                    
                    if(Spliter[bottomslot].substring(0,1) == 'P')
                    {
                        NewImageSource = Spliter[bottomslot].substring(1,7);
                        
                        myarray[(CardId-1)][Name] = "";
                
                    }
                    else if (Spliter[bottomslot].substring(0,1) != 'P')
                    {
                       NewImageSource = 'P' + Spliter[bottomslot];
                       
                       
                       //Tek viً nْmer spjaldsins (CardId), svo tek ég tِluna (Name) og set ‏aً ل staًin sem ‏aً ل viً
                       myarray[(CardId-1)][Name] = Name;
                       alert(myarray[(CardId-1)][Name]);
                       
                    }
                    
                    
                    
                    return NewImageSource;
                }
                
                function Writer()
                {
                
                        for (v=0; v < 24; v++)
                        {
                            document.write(myarray[(0)][v]);
                        }
                }

                phpcode
                Code:
                <?php
                session_start();
                include_once "class.sql.php";
                $sql = new SQL();
                
                $GameID = $_GET['ID'];
                $Numbers = $sql->GetWinningNumbers($GameID);
                $Cards = $sql->GetCards($GameID,$_SESSION['Username']);
                
                $string;
                
                $NumberOfCards = mysql_num_rows($Cards);
                
                
                $x = 0;
                while($row = mysql_fetch_array($Numbers))
                { $string .= "$row[0]".'#'; }
                ?>
                
                
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html>
                <head>
                <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                <title>Bingo Game Extravaganza</title>
                <link rel='stylesheet' type='text/css' href='style.css' />
                
                <script type='text/javascript' src="DrawNumber.js">
                
                </script>
                
                </head>
                <body onLoad="Start( '<?php echo $string; ?>','<?php echo $NumberOfCards; ?>' )" >
                <form >
                
                
                
                
                <div class ="SecondSplit">
                <div id="Numbers" class="Numbers"></div>
                <?php 
                
                while($row = mysql_fetch_array($Cards))
                {
                    
                    $x++;
                    echo '<div class ="MainSplit" id='.$x.'>';
                    for ($counter = 0; $counter <= 24; $counter++) 
                    {
                        ?>
                        <div  class="Frame"><img src="Myndir/<?php echo $row [$counter]; ?>.jpg" height="50" id=<?php echo $x; ?> OnClick="src = 'Myndir/' +  CheckNumber( this.src,this.id,this.name );" name="<?php echo $row [$counter]; ?>"/></div>
                        <?php
                    }
                
                  echo '</div>';
                } ?>
                
                </div>
                
                <img src="Myndir/<?php echo '-1' ?>.jpg" height="50" OnClick="Writer();" />
                
                
                </form>
                </body>
                </html>
                But I would like to hear other methods on how to do this since I think this looks kinda bad. Also I think there is something wrong with the writer function (although it is only a test function to see if everything is write), it writes a lot of "undefined" and then maybe some numbers.
                Last edited by Deadeye; Apr 11, 2009, 02:33 PM. Reason: Forgot

                Comment


                • #9
                  Okay...an all-JS demo...

                  I didn't have your images, so I just used numbers and background colors. But hopefully this shows you how easy it is, conceptually, to locate the state of any cell.
                  Code:
                  <html>
                  <head>
                  <style>
                  .TWOCARDS { position: relative; }
                  .CARD     { position: absolute; top: 0px; }
                  #card_A   { left: 20px; }
                  #card_B   { left: 360px; }
                  .CARD td  { background-color: yellow; width: 40px; height: 50px; text-align: center; }
                  </style>
                  <script>
                  function setColumn( cells, colnum )
                  {
                      var picked = new Array();
                      var rangelow = colnum * 15 + 1;
                      for ( var row = 0; row < 5; ++row )
                      {
                          var cellnum = row * 5 + colnum;
                          while ( cellnum != 12 ) 
                          {
                              var num = Math.floor( Math.random() * 15 ) + rangelow;
                              if ( picked["N"+num] == null )
                              {
                                  picked["N"+num] = num;
                                  cells[cellnum].innerHTML = num;
                                  break;
                              }
                          }
                          cells[cellnum].onclick = function(){ pick(this); }
                      }
                  }
                  function setCard( letter )
                  {
                      var card = document.getElementById("card_"+letter);
                      var tds  = card.getElementsByTagName("td");
                      for ( var c = 0; c < 5; ++c )
                      {
                          setColumn( tds, c );
                      }
                      tds[12].click();
                  }
                  function setBoth( )
                  {
                      setCard("A");
                      setCard("B");
                  }                     
                  function pick(cell)
                  {
                      cell.style.backgroundColor = 
                          cell.style.backgroundColor == "lightgreen" ? "yellow" : "lightgreen";
                  }
                  </script>
                  </head>
                  <body onload="setBoth();">
                  <div class="TWOCARDS">
                  <div class="CARD" id="card_A">
                  <table border=1 cellpadding=5>
                  <tr>
                      <th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td>FREE</td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  </table>
                  </div>
                  
                  <div class="CARD" id="card_B">
                  <table border=1 cellpadding=5>
                  <tr>
                      <th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td>FREE</td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  <tr>
                      <td></td><td></td><td></td><td></td><td></td>
                  </tr>
                  </table>
                  </div>
                  </div>
                  </body>
                  </html>
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    Here's a version that checks for wins...

                    Of course, it's not checking against any master set of numbers. It's just checking to see if there are 5 in a row.
                    Code:
                    <html>
                    <head>
                    <style>
                    .TWOCARDS { position: relative; }
                    .CARD     { position: absolute; top: 0px; text-align: center; }
                    #card_A   { left: 20px; }
                    #card_B   { left: 360px; }
                    .CARD td  { background-color: yellow; width: 40px; height: 50px; text-align: center; }
                    </style>
                    <script>
                    function setColumn( cells, colnum )
                    {
                        var picked = new Array();
                        var rangelow = colnum * 15 + 1;
                        for ( var row = 0; row < 5; ++row )
                        {
                            var cellnum = row * 5 + colnum;
                            while ( cellnum != 12 ) 
                            {
                                var num = Math.floor( Math.random() * 15 ) + rangelow;
                                if ( picked["N"+num] == null )
                                {
                                    picked["N"+num] = num;
                                    cells[cellnum].innerHTML = num;
                                    break;
                                }
                            }
                            cells[cellnum].onclick = function(){ pick(this); }
                        }
                    }
                    function setCard( letter )
                    {
                        var card = document.getElementById("card_"+letter);
                        var tds  = card.getElementsByTagName("td");
                        for ( var c = 0; c < 5; ++c )
                        {
                            setColumn( tds, c );
                        }
                        tds[12].click();
                    }
                    function setBoth( )
                    {
                        setCard("A");
                        setCard("B");
                    }                     
                    function pick(cell)
                    {
                        cell.style.backgroundColor = 
                            cell.style.backgroundColor == "lightgreen" ? "yellow" : "lightgreen";
                    }
                    
                    function columnWin( cells, col )
                    {
                        for ( var row = 0; row < 5; ++row )
                        {
                            var cellnum = row * 5 + col;
                            if ( cells[cellnum].style.backgroundColor != "lightgreen" ) return 0;
                        }
                        return 1;
                    }
                    function rowWin( cells, row )
                    {
                        for ( var col = 0; col < 5; ++col )
                        {
                            var cellnum = row * 5 + col;
                            if ( cells[cellnum].style.backgroundColor != "lightgreen" ) return 0;
                        }
                        return 1;
                    }
                    function diagonalAWin( cells )
                    {
                        for ( var rc = 0; rc < 5; ++rc )
                        {
                            var cellnum = rc * 5 + rc;
                            if ( cells[cellnum].style.backgroundColor != "lightgreen" ) return 0;
                        }
                        return 1;
                    }
                    function diagonalBWin( cells )
                    {
                        for ( var rc = 0; rc < 5; ++rc )
                        {
                            var col = rc;
                            var row = 4 - rc;
                            var cellnum = row * 5 + col;
                            if ( cells[cellnum].style.backgroundColor != "lightgreen" ) return 0;
                        }
                        return 1;
                    }
                        
                    function checkForWin(letter)
                    {
                        var card = document.getElementById("card_"+letter);
                        var tds  = card.getElementsByTagName("td");
                        var wins = 0;
                        for ( var n = 0; n < 5; ++n )
                        {
                            wins += columnWin( tds, n );
                            wins += rowWin( tds, n );
                        }
                        wins += diagonalAWin( tds );
                        wins += diagonalBWin( tds );
                        alert( "Total of " + wins + " wins on card " + letter );
                    }
                    </script>
                    </head>
                    <body onload="setBoth();">
                    <div class="TWOCARDS">
                    <div class="CARD" id="card_A">
                    <table border=1 cellpadding=5>
                    <tr>
                        <th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td>FREE</td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    </table>
                    <a href="javascript:checkForWin('A');">Check win</a>
                    </div>
                    
                    <div class="CARD" id="card_B">
                    <table border=1 cellpadding=5>
                    <tr>
                        <th>B</th><th>I</th><th>N</th><th>G</th><th>O</th>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td>FREE</td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td></td><td></td>
                    </tr>
                    </table>
                    <a href="javascript:checkForWin('B');">Check win</a>
                    </div>
                    </div>
                    </body>
                    </html>
                    Be yourself. No one else is as qualified.

                    Comment


                    • #11
                      I really like you solution, it is much better than what I have. Unfortunately I don't think I will use it mostly because the code your using is quite unfamiliar to me (since I'm not all the good with javascript) and I don't think I would feel comfortable turning it in even if I modify it heavily (wouldn't feel like I did much work). Also I just got my own code working (as far as I can tell) and because I feel kinda proud of it since I manage to come up with it on my own (mostly) so I think I will use it.

                      That is not to say that I haven't learned heavily from the code you posted and I will probably use it in the future to help me with other projects.

                      I'm really sorry if I wasted your time, I know I sound/feel like a bit of a douche at this moment.

                      I'm going to keep this thread open so I can post my code and ask for help with it if needed.


                      Here is the new and improved version of my code and I would like any input on it.

                      PHP File:
                      Code:
                      <?php
                      session_start();
                      include_once "class.sql.php";
                      $sql = new SQL();
                      
                      $GameID = $_GET['ID'];
                      $Numbers = $sql->GetWinningNumbers($GameID);
                      $Cards = $sql->GetCards($GameID,$_SESSION['Username']);
                      
                      $string;
                      
                      $NumberOfCards = mysql_num_rows($Cards);
                      
                      
                      $x = 0;
                      while($row = mysql_fetch_array($Numbers))
                      { $string .= "$row[0]".'#'; }
                      ?>
                      
                      
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                      <html>
                      <head>
                      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                      <title>Bingo Game Extravaganza</title>
                      <link rel='stylesheet' type='text/css' href='style.css' />
                      
                      <script type='text/javascript' src="DrawNumber.js">
                      
                      </script>
                      
                      </head>
                      <body onLoad="Start( '<?php echo $string; ?>','<?php echo $NumberOfCards; ?>' )" >
                      <form >
                      
                      
                      
                      
                      <div class ="SecondSplit">
                      <div id="Numbers" class="Numbers"></div>
                      <?php 
                      
                      while($row = mysql_fetch_array($Cards))
                      {
                          
                          $x++;
                          echo '<div class ="MainSplit" id='.$x.'>';
                          for ($counter = 0; $counter <= 24; $counter++) 
                          {
                              ?>
                              <div  class="Frame"><img src="Myndir/<?php echo $row [$counter]; ?>.jpg" height="50" id=<?php echo $x; ?> OnClick="src = 'Myndir/' +  CheckNumber( this.src,this.id,this.name );" name="<?php echo $counter; ?>"/></div>
                              <?php
                          }
                      
                        echo '</div>';
                      } ?>
                      
                      </div>
                      
                      <img src="Myndir/<?php echo '-1' ?>.jpg" height="50" OnClick="Writer();" />
                      
                      
                      </form>
                      </body>
                      </html>
                      Javascript
                      Code:
                      var counter = 0;
                      
                      var NumberArray = new Array();
                      
                      var myarray;
                      function Start(str,x)
                      {
                          myarray = new Array(x);
                      
                          
                          for (i=0; i < x; i++)
                          {
                              myarray[i]=new Array(24)
                          }
                          //قetta bْtar niًur tِlunar sem verًa dregnar niًur ي array
                          NumberArray = str.split("#");
                      
                          IntervalId =  setTimeout ("Draw()", 2500)
                      }
                      
                      function Draw( )
                      {
                          if(counter <= 24)
                          {
                              var stringA =  '<img src= \"Myndir/'; //قessi tveir strengir leyfa mér aً birta myndir talnana
                              var stringB = '.jpg" height="50" />';
                              document.getElementById("Numbers").innerHTML += stringA + NumberArray[counter]+  stringB;
                              counter++;
                      
                              IntervalId2 = setTimeout  ("Draw( )", 2500);
                          }
                      
                      }
                      
                      function CheckNumber(src,CardId,Name)
                      {
                          var Spliter; 
                          var bottomslot;
                          var NewImageSource;
                          Spliter = src.split("/");
                          bottomslot = ((Spliter.length)-1); //Leyfir mér aً nل ي nafn myndarinar
                          
                          if(Spliter[bottomslot].substring(0,2) == '-1')
                          {
                              NewImageSource = Spliter[bottomslot];
                              return NewImageSource;
                          }
                          
                          if(Spliter[bottomslot].substring(0,1) == 'P')
                          {
                              myarray[(CardId-1)][Name] = "";
                              NewImageSource = Spliter[bottomslot].substring(1,7);
                          }
                          else if (Spliter[bottomslot].substring(0,1) != 'P')
                          {
                          
                             if(Spliter[bottomslot].substring(1,2) == '.')
                             {
                                  myarray[(CardId-1)][Name] = Spliter[bottomslot].substring(0,1);
                             }
                             else
                             {
                                  myarray[(CardId-1)][Name] = Spliter[bottomslot].substring(0,2);
                             }
                             
                             NewImageSource = 'P' + Spliter[bottomslot];
                          }
                          
                          
                          
                          return NewImageSource;
                      }
                      
                      function Writer()
                      {
                      
                              for (v=0; v <= 24; v++)
                              {
                                  if(myarray[(0)][v] == null)
                                  {
                                      document.writeln('lol');
                                  }
                                  else
                                  {
                                       document.writeln(myarray[(0)][v]);
                                  }
                                  
                              }
                      }
                      PS.
                      Again I'm really sorry for wasting your time Old Pedant.

                      Comment


                      • #12
                        Well, I really think that the big part of the work needs to be done on the server, your PHP code. After all, you need to generate the bingo cards there, you need to check for the REAL wins there, you need to send the "called" numbers to the page from the server, etc., etc.

                        So I think the JavaScript code is the least part of your work here and my contribution would be a relatively small part of the overall project.

                        But nevertheless, I think you are being very upright by working it out yourself. And I'm a great pragmatist. If your code works, it works. Go with it.

                        As I said, I don't program in PHP. I don't even have access to a PHP server at this time. So I can't really test your code or comment on it. You may want to post in the PHP forum, to get comments on the PHP parts of the code.
                        Be yourself. No one else is as qualified.

                        Comment


                        • #13
                          Actually I made it so all the numbers needed: Winning numbers, card numbers and so on is sent and stored in the javascript.

                          I did this because later according to the description to this I'm supposed to let the player pause the game, and while paused AJAX will check and mark the numbers for him automatically. That is why I'm trying to put as much information into the javascript portion so that later it will be easy for my to access it with AJAX, or so I think.

                          Also can I suggest you look up XAMPP, it is a great tool for people who don't have servers but want to use PHP (It is was I use).

                          Comment


                          • #14
                            Yeah, but I don't really WANT to use PHP. <grin/>

                            I've looked at it, but I much prefer ASP.NET or JSP. ASP.NET is clearly the most powerful of the server side technologies, but because of cost vs. capabilities I think JSP is my overall choice. But I find PHP to be a bit outdated, from what I've seen in forums like this. Not as bad as old-style ASP, but clearly behind JSP (with its choice of several excellent frameworks) and ASP.NET and it's horribly bloated and lots-to-learn but nevertheless very effective framework.

                            But...

                            To each his own.
                            Be yourself. No one else is as qualified.

                            Comment


                            • #15
                              Ok, I got most of the things working now.

                              This is what the javascript looks like:
                              Code:
                              var counter = 0;
                              
                              var NumberArray = new Array();
                              var numberofcards;
                              var ClickedArray; //Tِlur sem notandi hefur ‎tt ل.
                              var CurrentNumbers = new Array();
                              
                              function Start(str,x)
                              {
                                  ClickedArray = new Array(x);
                                  numberofcards = x;
                                  
                                  
                                  for (i=0; i < x; i++)
                                  {
                                      ClickedArray[i]=new Array(24)
                                      ClickedArray[i][12] = -1;
                                  }
                                  
                                  //قetta bْtar niًur tِlunar sem verًa dregnar ي array
                                  NumberArray = str.split("#");
                              
                                  setTimeout ("Draw()", 750)
                              }
                              
                              function Draw( )
                              {
                                  if(counter <= 24)
                                  {
                                      var stringA =  '<img src= \"Myndir/'; //قessi tveir strengir leyfa mér aً birta myndir talnana
                                      var stringB = '.jpg" height="50" />';
                                      CurrentNumbers[counter] = NumberArray[counter]+'';
                                      document.getElementById("Numbers").innerHTML += stringA + NumberArray[counter] +  stringB;
                                      counter++;
                              
                                      setTimeout  ("Draw( )", 750);
                                  }
                                  
                                 
                              }
                              
                              function CheckNumber(src,CardId,Name)
                              {
                                  var Spliter; 
                                  var bottomslot;
                                  var NewImageSource;
                                  Spliter = src.split("/");
                                  bottomslot = ((Spliter.length)-1); //Leyfir mér aً nل ي nafn myndarinar
                                  
                                  if(Spliter[bottomslot].substring(0,2) == '-1')
                                  {
                                      NewImageSource = Spliter[bottomslot];
                                      return NewImageSource;
                                  }
                                  
                                  if(Spliter[bottomslot].substring(0,1) == 'P')
                                  {
                                      ClickedArray[(CardId-1)][Name] = "";
                                      NewImageSource = Spliter[bottomslot].substring(1,7);
                                  }
                                  else if (Spliter[bottomslot].substring(0,1) != 'P')
                                  {
                                  
                                     if(Spliter[bottomslot].substring(1,2) == '.')
                                     {
                                          //Tek viً nْmer spjaldsins (CardId), svo tek ég tِluna (Name) og set ‏aً ل staًin sem ‏aً ل viً
                                          ClickedArray[(CardId-1)][Name] = Spliter[bottomslot].substring(0,1);
                                     }
                                     else
                                     {
                                          ClickedArray[(CardId-1)][Name] = Spliter[bottomslot].substring(0,2);
                                     }
                                     
                                     NewImageSource = 'P' + Spliter[bottomslot];
                                  }
                                  
                                  
                                  
                                  return NewImageSource;
                              }
                              
                              //قetta sér um aً bْa til arrayiً sem er svo skoًaً hvort ‏aً hefur vinning.
                              function CheckForWin()
                              {
                                  var str;
                                  var arr = new Array(numberofcards);
                                  
                                  for (b=0; b < numberofcards; b++)
                                  {
                                      arr[b]=new Array(24)
                                      arr[b][12] = -1;
                                  }
                                  
                                  for (x=0; x < numberofcards; x++)
                                  {
                                      ClickedArray[x][12] = -1;
                                      
                                      for (v=0; v <= 24; v++)
                                      {
                                          for ( var i in CurrentNumbers )
                                          {
                                              if(ClickedArray[x][v] == CurrentNumbers[i])
                                              {
                                                  arr[x][v] = 'X';
                                              }
                                              
                                          }
                                      }
                                  }
                                  
                                  CheckRows(arr);
                              }
                              
                              function CheckRows(MarkedArray)
                              {
                                  var BingoCounter = 0;
                              
                                  for (x=0; x < numberofcards; x++)
                                  {
                                      if(MarkedArray[x][0] != null && MarkedArray[x][5] != null && MarkedArray[x][10] != null && MarkedArray[x][15] != null && MarkedArray[x][20] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][1] != null && MarkedArray[x][6] != null && MarkedArray[x][11] != null && MarkedArray[x][16] != null && MarkedArray[x][21] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][3] != null && MarkedArray[x][8] != null && MarkedArray[x][13] != null && MarkedArray[x][18] != null && MarkedArray[x][23] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][4] != null && MarkedArray[x][9] != null && MarkedArray[x][14] != null && MarkedArray[x][19] != null && MarkedArray[x][24] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][0] != null && MarkedArray[x][1] != null && MarkedArray[x][2] != null && MarkedArray[x][3] != null && MarkedArray[x][4] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][5] != null && MarkedArray[x][6] != null && MarkedArray[x][7] != null && MarkedArray[x][8] != null && MarkedArray[x][9] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][15] != null && MarkedArray[x][16] != null && MarkedArray[x][17] != null && MarkedArray[x][18] != null && MarkedArray[x][19] != null)
                                      {
                                          BingoCounter++;
                                      }
                                      if(MarkedArray[x][20] != null && MarkedArray[x][21] != null && MarkedArray[x][22] != null && MarkedArray[x][23] != null && MarkedArray[x][24] != null)
                                      {
                                          BingoCounter++;
                                      }
                                  }
                              
                                  if(BingoCounter == 0)
                                  {
                                      Hide();
                              
                                  }
                                  else
                                  {
                                      alert('All fékkstu:' + BingoCounter + ' Bingo');
                                  }
                                      
                              }
                              
                              function Hide()
                              {
                                  document.getElementById("Everything").style.display="none";
                                  document.getElementById("Button").style.display="none";
                                  
                                  var t1=setTimeout("Show()",5000);
                              }
                              
                              function Show()
                              {
                                  document.getElementById("Everything").style.display="block"
                                  document.getElementById("Button").style.display="block";
                              }

                              And this is the PHP file.
                              Code:
                              <?php
                              session_start();
                              include_once "class.sql.php";
                              $sql = new SQL();
                              
                              $GameID = $_GET['ID'];
                              $Numbers = $sql->GetWinningNumbers($GameID);
                              $Cards = $sql->GetCards($GameID,$_SESSION['Username']);
                              
                              $string;
                              
                              $NumberOfCards = mysql_num_rows($Cards);
                              
                              
                              $x = 0;
                              while($row = mysql_fetch_array($Numbers))
                              { $string .= "$row[0]".'#'; }
                              ?>
                              
                              
                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                              <html>
                              <head>
                              <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
                              <title>Bingo Game Extravaganza</title>
                              <link rel='stylesheet' type='text/css' href='style.css' />
                              
                              <script type='text/javascript' src="DrawNumber.js">
                              
                              </script>
                              
                              </head>
                              <body onLoad="Start('<?php echo $string; ?>','<?php echo $NumberOfCards; ?>' )" >
                              <form >
                              
                              
                              
                              
                              <div id="Everything" class ="SecondSplit">
                              
                              
                              <div id="Numbers" class="Numbers"></div>
                              <?php 
                              
                              while($row = mysql_fetch_array($Cards))
                              {
                                  $x++;
                                  echo '<div class ="MainSplit" id='.$x.'>';
                                  for ($counter = 0; $counter <= 24; $counter++) 
                                  {
                                      ?>
                                      <div  class="Frame"><img src="Myndir/<?php echo $row[$counter]; ?>.jpg" height="50" id=<?php echo $x; ?> OnClick="src = 'Myndir/' +  CheckNumber( this.src,this.id,this.name );" name="<?php echo $counter; ?>"/></div>
                                      <?php
                                  }
                              
                                echo '</div>';
                              } ?>
                              </div>
                              
                              
                                  <div id="Button" >
                                      <div class="Button"><input type="Button" value="Bingo!" OnClick="CheckForWin();" /></div>
                                  </div>
                              
                              </form>
                              </body>
                              </html>
                              But now comes the fun part, I have to add a button that we shall call "Break". When this button is pressed an ajax (has to be ajax) script is supposed to kick in and mark the numbers on the players cards automatically each time a number is drawn.
                              Then when the button is pressed again or a timer runs out (haven't decided on that just yet, think there will be both) the player gains control of his cards once more and the automatic marking thing stops.

                              I'm not quite sure how to start this, I'm a bit green when it comes to AJAX, so if someone can give me some pointer on where to begin that would be fantastic.

                              Comment

                              Working...
                              X