SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: breaking loops

Hybrid View

  1. #1
    SitePoint Member ianio's Avatar
    Join Date
    Sep 2003
    Location
    preston
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    breaking loops

    I am trying to randomly place 10 pictures in 20 boxes. For a good old game of "Find the Pairs". As the page loads it links each box with a unique random image path and so on. Each image gets loaded twice and then cannot be loaded any more. When this happens my code seems to leave the path blank.

    if (q[j]==2)//check how many times Used
    {
    break;
    }

    Here is where it is going wrong. please advise on other ways of breaking a loop without breaking it.

    here is the page so far:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <HTML>
    <HEAD>
    <TITLE>Pairs</TITLE>
    <LINK rel="stylesheet" href="pairMain.css">

    <script language="JavaScript">
    <!--
    var a = 1; //Random number variable
    var b = "blah";//Path variable
    var c = "a";//character in string
    var q = new Array(9)
    q[0]=0;q[1]=0;q[2]=0;q[3]=0;q[4]=0;q[5]=0;q[6]=0;q[7]=0;q[8]=0;q[9]=0;
    var Box = new Array(19);
    var Pict = new Array(9);
    Pict[0] = "images/pic01.jpg"; Pict[1] = "images/pic02.jpg"; Pict[2] = "images/pic03.jpg"; Pict[3] = "images/pic04.jpg"; Pict[4] = "images/pic05.jpg";
    Pict[5] = "images/pic06.jpg"; Pict[6] = "images/pic07.jpg"; Pict[7] = "images/pic08.jpg"; Pict[8] = "images/pic09.jpg"; Pict[9] = "images/pic10.jpg";


    //Preloaded Images ======================================================================
    var pic01 = new Image();
    pic01.src = "images/pic01.jpg";
    var pic02 = new Image();
    pic02.src = "images/pic02.jpg";
    var pic03 = new Image();
    pic03.src = "images/pic03.jpg";
    var pic04 = new Image();
    pic04.src = "images/pic04.jpg";
    var pic05 = new Image();
    pic05.src = "images/pic05.jpg";
    var pic06 = new Image();
    pic06.src = "images/pic06.jpg";
    var pic07 = new Image();
    pic07.src = "images/pic07.jpg";
    var pic08 = new Image();
    pic08.src = "images/pic08.jpg";
    var pic09 = new Image();
    pic09.src = "images/pic09.jpg";
    var pic10 = new Image();
    pic10.src = "images/pic10.jpg";


    //picture path and intended location =====================================================
    function rollOver(x, y) {
    document.images[x].src = [y] ;
    //var Location = document.images[x].name;

    }

    //Generator ==============================================================================
    function rAndom(){
    a = Math.round(Math.random()*9);
    b = Pict[a];
    c = b.charAt(11);
    }

    //Random distribution of pictures through boxes 1 - 20 ===================================
    function Splat(){
    for (i=0;i<20;i++)//select table cell
    {
    rAndom();
    for (j=0;j<10;j++)//select picture for cell
    {
    if (c==j)
    {
    if (q[j]==2)//check how many times Used
    {
    break;
    }
    q[j] = (q[j])+1//add to Used count
    Box[i] = b;//assign path to table cell
    }
    }
    }
    }

    //List cell image paths for testing only
    function wriTe(){
    for (k=0;k<20;k++)
    {
    document.write("Box[" + k + "] - " + Box[k] + "<br>");
    }
    }
    //-->
    </script>

    </HEAD>

    <BODY onLoad="Splat()">



    <table width="500">
    <tr height="100">
    <td><img name="box01" src="images/quest.jpg" onClick="rollOver('box01', Box[0])"></td>
    <td><img name="box02" src="images/quest.jpg" onClick="rollOver('box02', Box[1])"></td>
    <td><img name="box03" src="images/quest.jpg" onClick="rollOver('box03', Box[2])"></td>
    <td><img name="box04" src="images/quest.jpg" onClick="rollOver('box04', Box[3])"></td>
    <td><img name="box05" src="images/quest.jpg" onClick="rollOver('box05', Box[4])"></td>
    <tr height="100">
    <td><img name="box06" src="images/quest.jpg" onClick="rollOver('box06', Box[5])"></td>
    <td><img name="box07" src="images/quest.jpg" onClick="rollOver('box07', Box[6])"></td>
    <td><img name="box08" src="images/quest.jpg" onClick="rollOver('box08', Box[7])"></td>
    <td><img name="box09" src="images/quest.jpg" onClick="rollOver('box09', Box[8])"></td>
    <td><img name="box10" src="images/quest.jpg" onClick="rollOver('box10', Box[9])"></td>
    <tr height="100">
    <td><img name="box11" src="images/quest.jpg" onClick="rollOver('box11', Box[10])"></td>
    <td><img name="box12" src="images/quest.jpg" onClick="rollOver('box12', Box[11])"></td>
    <td><img name="box13" src="images/quest.jpg" onClick="rollOver('box13', Box[12])"></td>
    <td><img name="box14" src="images/quest.jpg" onClick="rollOver('box14', Box[13])"></td>
    <td><img name="box15" src="images/quest.jpg" onClick="rollOver('box15', Box[14])"></td>
    <tr height="100">
    <td><img name="box16" src="images/quest.jpg" onClick="rollOver('box16', Box[15])"></td>
    <td><img name="box17" src="images/quest.jpg" onClick="rollOver('box17', Box[16])"></td>
    <td><img name="box18" src="images/quest.jpg" onClick="rollOver('box18', Box[17])"></td>
    <td><img name="box19" src="images/quest.jpg" onClick="rollOver('box19', Box[18])"></td>
    <td><img name="box20" src="images/quest.jpg" onClick="rollOver('box20', Box[19])"></td>
    </table>

    <input type="button" onClick="wriTe()" value="testList">
    </BODY>
    </HTML>
    Ian Bullard
    ianio.com
    Music and stuff for the sake of development

  2. #2
    SitePoint Member ianio's Avatar
    Join Date
    Sep 2003
    Location
    preston
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here are the results of the "wriTe()" test function
    the undefined is caused when the break part of the loop is activated.

    Box[0] - images/pic10.jpg
    Box[1] - images/pic04.jpg
    Box[2] - images/pic01.jpg
    Box[3] - images/pic02.jpg
    Box[4] - images/pic08.jpg
    Box[5] - images/pic08.jpg
    Box[6] - images/pic06.jpg
    Box[7] - images/pic09.jpg
    Box[8] - images/pic06.jpg
    Box[9] - undefined
    Box[10] - images/pic09.jpg
    Box[11] - images/pic07.jpg
    Box[12] - images/pic02.jpg
    Box[13] - undefined
    Box[14] - images/pic10.jpg
    Box[15] - images/pic05.jpg
    Box[16] - undefined
    Box[17] - undefined
    Box[18] - undefined
    Box[19] - undefined
    Ian Bullard
    ianio.com
    Music and stuff for the sake of development

  3. #3
    SitePoint Member ianio's Avatar
    Join Date
    Sep 2003
    Location
    preston
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go to http://www.ianio.com
    Go to the Links section
    Select The Pairs Game.
    Ian Bullard
    ianio.com
    Music and stuff for the sake of development

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this is the problem or not, but... on the line with:
    Code:
    if (c==j)
    c is a string, j is an integer, so I suggest:
    Code:
    function rAndom()
    {
      a = Math.round(Math.random()*9);
      b = Pict[a];
      c = parseInt(b.charAt(11));
    }

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's not it, i think i see it... brb

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this. I haven't tested it but the idea is that we keep calling rAndom until (q[c] != 2) then we break out of the while loop. I know the infinite loop looks a little dangerous but give it a try.
    Code:
    function Splat()
    {
      for (i = 0; i < 20; i++) {
        while (1) {
          rAndom();
          if (q[c] != 2) {
            ++q[c];
            Box[i] = b;
            break;
          }
        }
      }
    }
    function rAndom()
    {
      a = Math.round(Math.random()*9);
      b = Pict[a];
      c = parseInt(b.charAt(11));
    }


Bookmarks

Posting Permissions

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