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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with a small javascript

    Can anyone tell me what is wrong with this code that I wrote to manage the concentration game?

    <html>
    <head>
    <!--

    Filename: tiles.htm
    Supporting files: ldown.gif, lup.gif, pback.jpg, pr.gif, premier.css,
    rdown.gif, rup.gif, slide00.jpg - slide11.jpg

    -->

    <title>The Concentration Game</title>
    <link href="games.css" rel="stylesheet" type="text/css" />
    <script src="tiles.js" type="text/javascript"></script>
    <script>

    var FlipCount, Tile1, Tile2;
    FlipCount=0

    //function ShowAll() {
    //for(i=0; i<=15; i++) {
    //document.write

    //}
    //}

    function FlipBack() {
    document.images[Tile1].src = "tile.jpg";
    document.images.[Tile2].src = "tile.jpg";
    FlipCount=0;
    }

    function CheckTiles() {
    if (document.images[Tile1].src == document.images[Tile2].src) {
    FlipCount=0;
    }
    else {
    setTimeout("FlipBack()", 8);
    }
    }

    function Flip(i) {
    document.images.[i].src = Tiles[i].src;
    if (FlipCount==0) {
    Tile1=i;
    FlipCount=1;
    }
    else {
    Tile2=i;
    CheckTiles();
    }
    }


    </script>
    </head>

    <body>
    <form action="">
    <!-- Concentration Tiles -->

    <div id="board">
    <a href="http://www.yahoo.com"><img src="tile.jpg" alt="" onClick="document.Flip(0)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(1)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(2)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(3)" width="75" height="75" /></a>
    <br />
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(4)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(5)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(6)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(7)" width="75" height="75" /></a>
    <br />
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(8)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(9)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(10)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(11)" width="75" height="75" /></a>
    <br />
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(12)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(13)" width="75" height="75"/></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(14)" width="75" height="75" /></a>
    <a href="#"><img src="tile.jpg" alt="" onmousedown="Flip(15)" width="75" height="75" /></a>
    </div>

    <div id="main">
    <p id="title">
    <img src="logo.jpg" alt="Game Etc." width="240" height="55" />
    </p>
    <p>Play the Concentration game! Click the tiles on the left and
    match pairs of identical images. Click the <b>Reload Tiles</b> button
    below to randomize the position of the tiles and play again. Click the
    <b>Show Tiles</b> button to view the solution.</p>
    <p id="formp">
    <input type="button" value="Reload Tiles" />&nbsp;&nbsp;
    <input type="button" value="Show Tiles" />
    </p>
    </div>

    </form>
    </body>
    </html>

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    stick to one convention when accessing attributes
    Code:
    document.images.Tile1.src 
    // or
    document.images['Tile1'].src
    and everything else will fall in place

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IMO, you either need to be more clear about what you think "is wrong" and post all relevent code (what is in tiles.js?) or even better is post a link to your page on the net somewhere so it can be tested and debugged.

    david_kw

  • #4
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tiles.js

    tiles.js has:

    /*
    New Perspectives on JavaScript
    Tutorial 5
    Case Problem 2

    Filename: tiles.js

    Variables List:
    x
    Contains a array of numbers from 0 to 15. The order of the
    numbers is set randomly using a for loop
    Tiles
    Contains an array of 16 image objects.

    */


    var x = new Array();
    x[0]=0;
    x[1]=1;
    x[2]=2;
    x[3]=3;
    x[4]=4;
    x[5]=5;
    x[6]=6;
    x[7]=7;
    x[8]=8;
    x[9]=9;
    x[10]=10;
    x[11]=11;
    x[12]=12;
    x[13]=13;
    x[14]=14;
    x[15]=15;

    for (i=0;i<=15;i++) {
    ri=Math.floor(Math.random()*(16-i))+i;
    temp=x[ri];
    x[ri]=x[i];
    x[i]=temp;
    }

    var Tiles = new Array();
    Tiles[0]=new Image();
    Tiles[1]=new Image();
    Tiles[2]=new Image();
    Tiles[3]=new Image();
    Tiles[4]=new Image();
    Tiles[5]=new Image();
    Tiles[6]=new Image();
    Tiles[7]=new Image();
    Tiles[8]=new Image();
    Tiles[9]=new Image();
    Tiles[10]=new Image();
    Tiles[11]=new Image();
    Tiles[12]=new Image();
    Tiles[13]=new Image();
    Tiles[14]=new Image();
    Tiles[15]=new Image();

    Tiles[x[0]].src="image1.jpg";
    Tiles[x[1]].src="image2.jpg";
    Tiles[x[2]].src="image3.jpg";
    Tiles[x[3]].src="image4.jpg";
    Tiles[x[4]].src="image5.jpg";
    Tiles[x[5]].src="image6.jpg";
    Tiles[x[6]].src="image7.jpg";
    Tiles[x[7]].src="image8.jpg";
    Tiles[x[8]].src="image1.jpg";
    Tiles[x[9]].src="image2.jpg";
    Tiles[x[10]].src="image3.jpg";
    Tiles[x[11]].src="image4.jpg";
    Tiles[x[12]].src="image5.jpg";
    Tiles[x[13]].src="image6.jpg";
    Tiles[x[14]].src="image7.jpg";
    Tiles[x[15]].src="image8.jpg";

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Follow Shyam's advice. You have various syntax problems including some extra periods in your statements

    document.images.[Tile2].src = "tile.jpg";

    document.images.[i].src = Tiles[i].src;

    Another thing you have is

    setTimeout("FlipBack()", 8);

    The value of '8' is 8 thousandths of a second. You probably meant 8000 (which is 8 seconds).

    david_kw

  • #6
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    still with errors

    I did thesechanges guys but still got error on page when I click on any tile!! Any ideas?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Post a link to your page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by matecno View Post
    I did thesechanges guys but still got error on page when I click on any tile!! Any ideas?
    That's progress. You must have gotten the error before you clicked before. I agree with Aero though, post a link.

    david_kw


  •  

    Posting Permissions

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