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 2012
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Need help with an animation project

    I am having some difficulty with this project. It is supposed to be an animation of falling leaves. I am very new to arrays and JavaScript, so right off the bat I know that the arrays I have are not right, or are missing something else in order for it to function. Basically all I have for this project is a still picture of the leaves and that is it. If there is someone out there with some JavaScript expertise, could you tell me what I am doing wrong?
    Here is the code so far, I think it is too long.


    Code:
    <script type="text/javascript">
    /* <![CDATA[ */
    grphcs=new Array(6)
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.gif";
    Image2=new Image();
    Image2.src=grphcs[2]="images/leaf3.gif";
    Image3=new Image();
    Image3.src=grphcs[3]="images/leaf4.gif";
    Image4=new Image();
    Image4.src=grphcs[4]="images/leaf5.gif";
    Image5=new Image();
    Image5.src=grphcs[5]="images/leaf6.gif";
    
    
    var minSpeed = 5;
    var maxSpeed = 30;
    var randomSpeed = 5;
    var randomSpeed2 = 10;
    var randomSpeed3 = 15;
    var randomSpeed4 = 20;
    var randomSpeed5 = 25;
    var randomSpeed6 = 30;
    var minHorizontal = 200;
    var maxHorizontal = screen.availWidth - 300;
    var leftPosition = Math.floor(Math.random() * (maxHorizontal - 
    
    (minHorizontal + 1)) + minHorizontal);
    var leftPosition2 = Math.floor(Math.random() * (maxHorizontal - 
    
    (minHorizontal + 1)) + minHorizontal);
    var leftPosition3 = Math.floor(Math.random() * (maxHorizontal - 
    
    minHorizontal +1)) + minHorizontal);
    var leftPosition4 = Math.floor(Math.random() * (maxHorizontal - 
    
    minHorizontal + 1)) + minHorizontal);
    var leftPosition5 = Math.floor(Math.random() * (maxHorizontal - 
    
    minHorizontal + 1)) + minHorizontal);
    var leftPosition6 = Math.floor(Math.random() * (maxHorizontal - 
    
    minHorizontal + 1)) + minHorizontal);
    var minVertical = 50;
    var maxVertical = screen.availHeight - 300;
    var topPosition = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
    var topPosition2 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
    var topPosition3 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
    var topPosition4 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
    var topPosition5 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
    var topPosition6 = Math.floor(Math.rnadom() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
    
    function matchLeaf() {
          if (navigator.appName == "Microsoft Internet Explorer") {
              widthMax = document.documentElement.clientWidth;
              heightMax = document.documentElement.clientHeight;
          }
          else {
               widthMax = window.innerwidth - 14;
               heightMax = window.innerHeight;
          }
          autumnFall();
    }
    
    function autumnFall();
          var fallingLeaf1 = document.getElementById("leaf1");
          fallingLeaf1.style.left = leftPosition + "px";
          fallingLeaf1.style.top = topPosition + "px";
          fallingLeaf1.style.visibility = "visible";
          topPosition += parseInt(randomspeed);
          leftPosition += 0;
          if (topPosition >= screen.availHeight - 300) {
          topPosition = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
          leftPosition = Math.floor(Math.random() * (maxHorizontal - 
    
    (minHorizontal + 1)) + minHorizontal);
          leaf1.src = "images/leaf" + Math.floor(Math.random() * 6 + 
    
    ".gif";
          randomSpeed = Math.floor(Math.random() * maxSpeed - 
    
    (minSpeed + 1)) + minSpeed);
          }
    
           var fallingLeaf2 = document.getElementById("leaf2");
           fallingLeaf2.style.left = leftPosition2 + "px";
           fallingLeaf2.style.top = topPosition2 + "px";
           fallingLeaf2.style.visibility = "visible";
           topPosition2 += parseInt(randomSpeed3);
           leftPosition2 += 0;
           if (topPosition2 >= screenavailHeight - 300) {
           topPosition2 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
           leftPosition2 = Math.floor(Math.random() * (maxHorizontal 
    
    - (minHorizontal + 1)) + minHorizontal);
           leaf2.src = "images/leaf" + Math.floor(Math.random() * 6) 
    
    + "gif";
           randomSpeed2 = Math.floor(Math.random() * (maxSpeed - 
    
    (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf3 = document.getElementById("leaf3");
           fallingLeaf3.style.left = leftPosition3 + "px";
           fallingLeaf3.style.top = topPosition3 + "px";
           fallingLeaf3.stye.visibility = "visible";
           topPosition3 += parseInt(randomSpeed3);
           leftPosition3 += 0;
           if (topPosition3 >= screen.availHeight - 300) {
           topPosition3 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
           leftPosition3 = Math.floor(Math.random() * (maxHorizontal 
    
    - (minHorizontal + 1)) + minHorizontal);
           leaf3.src = "images/leaf" + Math.floor(Math.random() * 6 
    
    + "gif";
           randomSpeed3 = Math.floor(Math.random() * (maxSpeed - 
    
    (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf4 = document.getElementById("leaf4");
           fallingLeaf4.style.left = leftPosition4 + "px";
           fallingLeaf4.style.top = topPosition4 + "px";
           fallingLeaf4.style.visibility = "visible";
           topPosition4 += parseInt(randomSpeed4);
           leftPosition4 += 0;
           if (topPosition4 >= screen.availHeight - 300) {
           topPosition4 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
           leftPosition4 = Math.floor(Math.random() * (maxHorizontal 
    
    - (minHorizontal + 1)) + minHorizontal);
           leaf4.src = "images/leaf" + Math.floor(Math.random() * 6 
    
    + "gif";
           randomSpeed4 = Math.floor(Math.random() * (maxSpeed - 
    
    (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf5 = document.getElementById("leaf5");
           fallingLeaf5.style.left = leftPosition5 + "px";
           fallingLeaf5.style.top = topPosition5 + "px";
           fallingLeaf5.style.visibility = "visible";
           topPosition5= parseInt(randomSpeed5);
           leftPosition5 += 0;
           if (topPosition5 >= screen.availHeight - 300) {
           topPosition5 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
           leftPosition5 = Math.floor(Math.random() * (maxHorizontal 
    
    - (minHorizontal + 1)) + minHorizontal);
           leaf5.src = "images/leaf + Math.floor(Math.random() * 6 + 
    
    "gif";
           randomSpeed5 = Math.floor(Math.random() * (maxSpeed - 
    
    (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf6 = document.getElementById("leaf6");
           fallingLeaf6.style.left = leftPosition6 + "px";
           fallingLeaf6.style.top = topPosition6 + "px";
           fallingLeaf6.style.visibility = "visible";
           topPosition6 = parseInt(randomSpeed6);
           leftPosition6 += 0;
           if (topPosition6 >= screen.availHeight - 300) {
           topPosition6 = Math.floor(Math.random() * (maxVertical - 
    
    (minVertical + 1)) + minVertical);
           leftPosition6 = Math.floor(Math.random() * (maxHorizontal 
    
    - (minHorizontal + 1)) + minHorizontal);
           leaf6.src = "images/leaf + Math.floor(Math.random() * 6 + 
    
    "gif";
           randomSpeed6 = Math.floor(math.random() * (maxSpeed - 
    
    (minSpeed + 1)) + minSpeed);
           }
    }
    /* ]]> */
    </script>
    </head>
    
    <body onload="setInterval('matchLeaf()', 100);">
    
         <img id="leaf1" src="images/leaf1.gif" alt="leafone" 
    
    style="position:absolute; left:100px; top:100px;" />
         <img id="leaf2" src="images/leaf2.gif" alt="leaftwo" 
    
    style="position:absolute; left:100px; top:100px;" />
         <img id ="leaf3" src="images/leaf3.gif" alt="leafthree" 
    
    style="position:absolute; left:100px; top:100px;" />
         <img id="leaf4" src="images/leaf4.gif" alt="leaffour" 
    
    style="position:absolute; left:100px; top:100px;" />
         <img id="leaf5" src="images/leaf5.gif" alt="leaffive" 
    
    style="position:absolute; left:100px; top:100px;" />
         <img id="leaf6" src="images/leaf6.gif" alt="leafsix" 
    
    style="position:absolute; left:100px; top:100px;" />
    Last edited by Neewb; 05-21-2012 at 06:49 AM. Reason: punctuation

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    884
    Thanks
    173
    Thanked 101 Times in 101 Posts
    Hi

    You've got to learn to use a debugger.
    I'm sure this is not perfect, but I got it running --- maybe you can take it from there.

    LT


    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Falling Leaves</title>
    
    <style type="text/css">
    
    </style>
    
    
    
    <script type="text/javascript">
    /* <![CDATA[ */
    grphcs=new Array()
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.gif";
    Image2=new Image();
    Image2.src=grphcs[2]="images/leaf3.gif";
    Image3=new Image();
    Image3.src=grphcs[3]="images/leaf4.gif";
    Image4=new Image();
    Image4.src=grphcs[4]="images/leaf5.gif";
    Image5=new Image();
    Image5.src=grphcs[5]="images/leaf6.gif";
    
    
    var minSpeed = 5;
    var maxSpeed = 30;
    var randomSpeed = 5;
    var randomSpeed2 = 10;
    var randomSpeed3 = 15;
    var randomSpeed4 = 20;
    var randomSpeed5 = 25;
    var randomSpeed6 = 30;
    var minHorizontal = 200;
    var maxHorizontal = screen.availWidth - 300;
    var leftPosition =  Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var minVertical = 50;
    var maxVertical = screen.availHeight - 300;
    var topPosition =  Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    
    function matchLeaf() {
      if (navigator.appName == "Microsoft Internet Explorer") {
        widthMax = document.documentElement.clientWidth;
        heightMax = document.documentElement.clientHeight;
      }
      else {
        widthMax = window.innerwidth - 14;
        heightMax = window.innerHeight;
      }
      autumnFall();
    }
    
    function autumnFall(){
      var fallingLeaf1 = document.getElementById("leaf1");
      fallingLeaf1.style.left = leftPosition + "px";
      fallingLeaf1.style.top = topPosition + "px";
      fallingLeaf1.style.visibility = "visible";
      topPosition += parseInt(randomSpeed);
      leftPosition += 0;
      if (topPosition >= screen.availHeight - 300) {
        topPosition = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf1.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif" ;
        randomSpeed = Math.floor(Math.random() * maxSpeed - (minSpeed + 1)) + minSpeed;
      }
    
      var fallingLeaf2 = document.getElementById("leaf2");
      fallingLeaf2.style.left = leftPosition2 + "px";
      fallingLeaf2.style.top = topPosition2 + "px";
      fallingLeaf2.style.visibility = "visible";
      topPosition2 += parseInt(randomSpeed3);
      leftPosition2 += 0;
      if (topPosition2 >= screen.availHeight - 300) {
        topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf2.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed2 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf3 = document.getElementById("leaf3");
      fallingLeaf3.style.left = leftPosition3 + "px";
      fallingLeaf3.style.top = topPosition3 + "px";
      fallingLeaf3.style.visibility = "visible";
      topPosition3 += parseInt(randomSpeed3);
      leftPosition3 += 0;
      if (topPosition3 >= screen.availHeight - 300) {
        topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf3.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed3 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf4 = document.getElementById("leaf4");
      fallingLeaf4.style.left = leftPosition4 + "px";
      fallingLeaf4.style.top = topPosition4 + "px";
      fallingLeaf4.style.visibility = "visible";
      topPosition4 += parseInt(randomSpeed4);
      leftPosition4 += 0;
      if (topPosition4 >= screen.availHeight - 300) {
        topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf4.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed4 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf5 = document.getElementById("leaf5");
      fallingLeaf5.style.left = leftPosition5 + "px";
      fallingLeaf5.style.top = topPosition5 + "px";
      fallingLeaf5.style.visibility = "visible";
      topPosition5 += parseInt(randomSpeed5);
      leftPosition5 += 0;
      if (topPosition5 >= screen.availHeight - 300) {
        topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf5.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed5 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf6 = document.getElementById("leaf6");
      fallingLeaf6.style.left = leftPosition6 + "px";
      fallingLeaf6.style.top = topPosition6 + "px";
      fallingLeaf6.style.visibility = "visible";
      topPosition6 += parseInt(randomSpeed6);
      leftPosition6 += 0;
      if (topPosition6 >= screen.availHeight - 300) {
        topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf6.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed6 = Math.floor(math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    }
    /* ]]> */
    </script>
    </head>
    
    <body onload="setInterval('matchLeaf()', 200);">
    <!-- errors found
    missing parentheses
    missing double quotes
    mistype ; for { at start of function autumnFall
    misspelling of variable
    misspelling of function
    wrong assignment operator = should be +=
    -->
    
         <img id="leaf1" src="images/leaf1.gif" alt="leafone"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf2" src="images/leaf2.gif" alt="leaftwo"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf3" src="images/leaf3.gif" alt="leafthree" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf4" src="images/leaf4.gif" alt="leaffour"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf5" src="images/leaf5.gif" alt="leaffive"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf6" src="images/leaf6.gif" alt="leafsix"   style="position:absolute; left:100px; top:100px;" />
    </body>
    </html>
    Last edited by low tech; 05-21-2012 at 08:57 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by low tech View Post
    Hi

    You've got to learn to use a debugger.
    I'm sure this is not perfect, but I got it running --- maybe you can take it from there.

    LT


    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Falling Leaves</title>
    
    <style type="text/css">
    
    </style>
    
    
    
    <script type="text/javascript">
    /* <![CDATA[ */
    grphcs=new Array()
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.gif";
    Image2=new Image();
    Image2.src=grphcs[2]="images/leaf3.gif";
    Image3=new Image();
    Image3.src=grphcs[3]="images/leaf4.gif";
    Image4=new Image();
    Image4.src=grphcs[4]="images/leaf5.gif";
    Image5=new Image();
    Image5.src=grphcs[5]="images/leaf6.gif";
    
    
    var minSpeed = 5;
    var maxSpeed = 30;
    var randomSpeed = 5;
    var randomSpeed2 = 10;
    var randomSpeed3 = 15;
    var randomSpeed4 = 20;
    var randomSpeed5 = 25;
    var randomSpeed6 = 30;
    var minHorizontal = 200;
    var maxHorizontal = screen.availWidth - 300;
    var leftPosition =  Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var minVertical = 50;
    var maxVertical = screen.availHeight - 300;
    var topPosition =  Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    
    function matchLeaf() {
      if (navigator.appName == "Microsoft Internet Explorer") {
        widthMax = document.documentElement.clientWidth;
        heightMax = document.documentElement.clientHeight;
      }
      else {
        widthMax = window.innerwidth - 14;
        heightMax = window.innerHeight;
      }
      autumnFall();
    }
    
    function autumnFall(){
      var fallingLeaf1 = document.getElementById("leaf1");
      fallingLeaf1.style.left = leftPosition + "px";
      fallingLeaf1.style.top = topPosition + "px";
      fallingLeaf1.style.visibility = "visible";
      topPosition += parseInt(randomSpeed);
      leftPosition += 0;
      if (topPosition >= screen.availHeight - 300) {
        topPosition = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf1.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif" ;
        randomSpeed = Math.floor(Math.random() * maxSpeed - (minSpeed + 1)) + minSpeed;
      }
    
      var fallingLeaf2 = document.getElementById("leaf2");
      fallingLeaf2.style.left = leftPosition2 + "px";
      fallingLeaf2.style.top = topPosition2 + "px";
      fallingLeaf2.style.visibility = "visible";
      topPosition2 += parseInt(randomSpeed3);
      leftPosition2 += 0;
      if (topPosition2 >= screen.availHeight - 300) {
        topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf2.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed2 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf3 = document.getElementById("leaf3");
      fallingLeaf3.style.left = leftPosition3 + "px";
      fallingLeaf3.style.top = topPosition3 + "px";
      fallingLeaf3.style.visibility = "visible";
      topPosition3 += parseInt(randomSpeed3);
      leftPosition3 += 0;
      if (topPosition3 >= screen.availHeight - 300) {
        topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf3.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed3 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf4 = document.getElementById("leaf4");
      fallingLeaf4.style.left = leftPosition4 + "px";
      fallingLeaf4.style.top = topPosition4 + "px";
      fallingLeaf4.style.visibility = "visible";
      topPosition4 += parseInt(randomSpeed4);
      leftPosition4 += 0;
      if (topPosition4 >= screen.availHeight - 300) {
        topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf4.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed4 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf5 = document.getElementById("leaf5");
      fallingLeaf5.style.left = leftPosition5 + "px";
      fallingLeaf5.style.top = topPosition5 + "px";
      fallingLeaf5.style.visibility = "visible";
      topPosition5 += parseInt(randomSpeed5);
      leftPosition5 += 0;
      if (topPosition5 >= screen.availHeight - 300) {
        topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf5.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed5 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf6 = document.getElementById("leaf6");
      fallingLeaf6.style.left = leftPosition6 + "px";
      fallingLeaf6.style.top = topPosition6 + "px";
      fallingLeaf6.style.visibility = "visible";
      topPosition6 += parseInt(randomSpeed6);
      leftPosition6 += 0;
      if (topPosition6 >= screen.availHeight - 300) {
        topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf6.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
        randomSpeed6 = Math.floor(math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    }
    /* ]]> */
    </script>
    </head>
    
    <body onload="setInterval('matchLeaf()', 200);">
    <!-- errors found
    missing parentheses
    missing double quotes
    mistype ; for { at start of function autumnFall
    misspelling of variable
    misspelling of function
    wrong assignment operator = should be +=
    -->
    
         <img id="leaf1" src="images/leaf1.gif" alt="leafone"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf2" src="images/leaf2.gif" alt="leaftwo"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf3" src="images/leaf3.gif" alt="leafthree" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf4" src="images/leaf4.gif" alt="leaffour"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf5" src="images/leaf5.gif" alt="leaffive"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf6" src="images/leaf6.gif" alt="leafsix"   style="position:absolute; left:100px; top:100px;" />
    </body>
    </html>
    Yeah you are right, I had a ton of syntax errors, should have used a debugger, I got too antsy in sending the script first I guess. Anyway as you prob already know this script works, but there are still errors in it. My error console on Mozilla is telling me that all of the leaves 1-6 are not defined. I'm going to keep looking into this, the script runs, but yeah there are still errors that need to be fixed. The error console points out all of the lines that identify leaf"".src, such as this: leaf6.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";. The lines in question are: 78, 117, 91, 130, 143, and 104. Thank you for replying.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Falling Leaves</title>
    
    <style type="text/css">
    
    </style>
    
    
    
    <script type="text/javascript">
    /* <![CDATA[ */
    grphcs=new Array()
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.gif";
    Image2=new Image();
    Image2.src=grphcs[2]="images/leaf3.gif";
    Image3=new Image();
    Image3.src=grphcs[3]="images/leaf4.gif";
    Image4=new Image();
    Image4.src=grphcs[4]="images/leaf5.gif";
    Image5=new Image();
    Image5.src=grphcs[5]="images/leaf6.gif";
    
    
    var minSpeed = 5;
    var maxSpeed = 30;
    var randomSpeed = 5;
    var randomSpeed2 = 10;
    var randomSpeed3 = 15;
    var randomSpeed4 = 20;
    var randomSpeed5 = 25;
    var randomSpeed6 = 30;
    var minHorizontal = 200;
    var maxHorizontal = screen.availWidth - 300;
    var leftPosition =  Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var minVertical = 50;
    var maxVertical = screen.availHeight - 300;
    var topPosition =  Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    
    function matchLeaf() {
          if (navigator.appName == "Microsoft Internet Explorer") {
              widthMax = document.documentElement.clientWidth;
              heightMax = document.documentElement.clientHeight;
          }
          else {
               widthMax = window.innerwidth - 14;
               heightMax = window.innerHeight;
          }
          autumnFall();
    }
    
    function autumnFall(){
          var fallingLeaf1 = document.getElementById("leaf1");
          fallingLeaf1.style.left = leftPosition + "px";
          fallingLeaf1.style.top = topPosition + "px";
          fallingLeaf1.style.visibility = "visible";
          topPosition += parseInt(randomSpeed);
          leftPosition += 0;
          if (topPosition >= screen.availHeight - 300) {
          topPosition = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
          leftPosition = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
          leaf1.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif" ;
          randomSpeed = Math.floor(Math.random() * maxSpeed - (minSpeed + 1)) + minSpeed;
          }
    
           var fallingLeaf2 = document.getElementById("leaf2");
           fallingLeaf2.style.left = leftPosition2 + "px";
           fallingLeaf2.style.top = topPosition2 + "px";
           fallingLeaf2.style.visibility = "visible";
           topPosition2 += parseInt(randomSpeed3);
           leftPosition2 += 0;
           if (topPosition2 >= screen.availHeight - 300) {
           topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
           leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
           leaf2.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
           randomSpeed2 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf3 = document.getElementById("leaf3");
           fallingLeaf3.style.left = leftPosition3 + "px";
           fallingLeaf3.style.top = topPosition3 + "px";
           fallingLeaf3.style.visibility = "visible";
           topPosition3 += parseInt(randomSpeed3);
           leftPosition3 += 0;
           if (topPosition3 >= screen.availHeight - 300) {
           topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
           leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
           leaf3.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
           randomSpeed3 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf4 = document.getElementById("leaf4");
           fallingLeaf4.style.left = leftPosition4 + "px";
           fallingLeaf4.style.top = topPosition4 + "px";
           fallingLeaf4.style.visibility = "visible";
           topPosition4 += parseInt(randomSpeed4);
           leftPosition4 += 0;
           if (topPosition4 >= screen.availHeight - 300) {
           topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
           leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
           leaf4.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
           randomSpeed4 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf5 = document.getElementById("leaf5");
           fallingLeaf5.style.left = leftPosition5 + "px";
           fallingLeaf5.style.top = topPosition5 + "px";
           fallingLeaf5.style.visibility = "visible";
           topPosition5 += parseInt(randomSpeed5);
           leftPosition5 += 0;
           if (topPosition5 >= screen.availHeight - 300) {
           topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
           leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
           leaf5.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
           randomSpeed5 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
           }
    
           var fallingLeaf6 = document.getElementById("leaf6");
           fallingLeaf6.style.left = leftPosition6 + "px";
           fallingLeaf6.style.top = topPosition6 + "px";
           fallingLeaf6.style.visibility = "visible";
           topPosition6 += parseInt(randomSpeed6);
           leftPosition6 += 0;
           if (topPosition6 >= screen.availHeight - 300) {
           topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
           leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
           leaf6.src = "images/leaf" + Math.floor(Math.random() * 6) + "gif";
           randomSpeed6 = Math.floor(math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
           }
    }
    /* ]]> */
    </script>
    </head>
    
    <body onload="setInterval('matchLeaf()', 200);">
    
         <img id="leaf1" src="images/leaf1.gif" alt="leafone" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf2" src="images/leaf2.gif" alt="leaftwo" style="position:absolute; left:100px; top:100px;" />
         <img id ="leaf3" src="images/leaf3.gif" alt="leafthree" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf4" src="images/leaf4.gif" alt="leaffour" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf5" src="images/leaf5.gif" alt="leaffive" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf6" src="images/leaf6.gif" alt="leafsix" style="position:absolute; left:100px; top:100px;" />
    </body>
    </html>

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    884
    Thanks
    173
    Thanked 101 Times in 101 Posts
    Hi

    A few more.

    typo on Math -- math

    randomSpeed6 = Math.floor(math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);

    and some "gif"; missing a period before gif I think

    ".gif";


    also to make it easier to see what's going on I changed setInterval to 1000

    onload="setInterval('matchLeaf()', 1000);"



    //******THIS HAS NOT BEEN DEALT WITH IN CODE BELOW
    Also I just noticed I 'think' your Math.random sometimes returns 0 ---- so you end up with images/leaf0.gif

    and you don't have a leaf0.gif image --- so you'll get an error.
    //******

    LT


    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Falling Leaves</title>
    
    <style type="text/css">
    
    </style>
    
    
    
    <script type="text/javascript">
    /* <![CDATA[ */
    grphcs=new Array()
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.gif";
    Image2=new Image();
    Image2.src=grphcs[2]="images/leaf3.gif";
    Image3=new Image();
    Image3.src=grphcs[3]="images/leaf4.gif";
    Image4=new Image();
    Image4.src=grphcs[4]="images/leaf5.gif";
    Image5=new Image();
    Image5.src=grphcs[5]="images/leaf6.gif";
    
    
    var minSpeed = 5;
    var maxSpeed = 30;
    var randomSpeed = 5;
    var randomSpeed2 = 10;
    var randomSpeed3 = 15;
    var randomSpeed4 = 20;
    var randomSpeed5 = 25;
    var randomSpeed6 = 30;
    var minHorizontal = 200;
    var maxHorizontal = screen.availWidth - 300;
    var leftPosition =  Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var minVertical = 50;
    var maxVertical = screen.availHeight - 300;
    var topPosition =  Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    
    function matchLeaf() {
      if (navigator.appName == "Microsoft Internet Explorer") {
        widthMax = document.documentElement.clientWidth;
        heightMax = document.documentElement.clientHeight;
      }
      else {
        widthMax = window.innerwidth - 14;
        heightMax = window.innerHeight;
      }
      autumnFall();
    }
    
    function autumnFall(){
      var fallingLeaf1 = document.getElementById("leaf1");
      fallingLeaf1.style.left = leftPosition + "px";
      fallingLeaf1.style.top = topPosition + "px";
      fallingLeaf1.style.visibility = "visible";
      topPosition += parseInt(randomSpeed);
      leftPosition += 0;
      if (topPosition >= screen.availHeight - 300) {
        topPosition = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf1.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif" ;
        randomSpeed = Math.floor(Math.random() * maxSpeed - (minSpeed + 1)) + minSpeed;
      }
    
      var fallingLeaf2 = document.getElementById("leaf2");
      fallingLeaf2.style.left = leftPosition2 + "px";
      fallingLeaf2.style.top = topPosition2 + "px";
      fallingLeaf2.style.visibility = "visible";
      topPosition2 += parseInt(randomSpeed3);
      leftPosition2 += 0;
      if (topPosition2 >= screen.availHeight - 300) {
        topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf2.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed2 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf3 = document.getElementById("leaf3");
      fallingLeaf3.style.left = leftPosition3 + "px";
      fallingLeaf3.style.top = topPosition3 + "px";
      fallingLeaf3.style.visibility = "visible";
      topPosition3 += parseInt(randomSpeed3);
      leftPosition3 += 0;
      if (topPosition3 >= screen.availHeight - 300) {
        topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf3.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed3 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf4 = document.getElementById("leaf4");
      fallingLeaf4.style.left = leftPosition4 + "px";
      fallingLeaf4.style.top = topPosition4 + "px";
      fallingLeaf4.style.visibility = "visible";
      topPosition4 += parseInt(randomSpeed4);
      leftPosition4 += 0;
      if (topPosition4 >= screen.availHeight - 300) {
        topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf4.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed4 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf5 = document.getElementById("leaf5");
      fallingLeaf5.style.left = leftPosition5 + "px";
      fallingLeaf5.style.top = topPosition5 + "px";
      fallingLeaf5.style.visibility = "visible";
      topPosition5 += parseInt(randomSpeed5);
      leftPosition5 += 0;
      if (topPosition5 >= screen.availHeight - 300) {
        topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf5.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed5 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf6 = document.getElementById("leaf6");
      fallingLeaf6.style.left = leftPosition6 + "px";
      fallingLeaf6.style.top = topPosition6 + "px";
      fallingLeaf6.style.visibility = "visible";
      topPosition6 += parseInt(randomSpeed6);
      leftPosition6 += 0;
      if (topPosition6 >= screen.availHeight - 300) {
        topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf6.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed6 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    }
    /* ]]> */
    </script>
    </head>
    
    <body onload="setInterval('matchLeaf()', 1000);">
    <!-- errors found
    missing parentheses
    missing double quotes
    mistype ; for { at start of function autumnFall
    misspelling of variable
    misspelling of function
    wrong assignment operator = should be +=
    -->
    
         <img id="leaf1" src="images/leaf1.gif" alt="leafone"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf2" src="images/leaf2.gif" alt="leaftwo"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf3" src="images/leaf3.gif" alt="leafthree" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf4" src="images/leaf4.gif" alt="leaffour"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf5" src="images/leaf5.gif" alt="leaffive"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf6" src="images/leaf6.gif" alt="leafsix"   style="position:absolute; left:100px; top:100px;" />
    </body>
    </html>
    Last edited by low tech; 05-21-2012 at 10:33 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by low tech View Post
    Hi

    I found another one

    typo on Math -- math

    randomSpeed6 = Math.floor(math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);

    and some "gif"; missing a period before gif I think

    ".gif";




    also to make it easier to see what's going on I changed setInterval to 1000

    onload="setInterval('matchLeaf()', 1000);"


    LT


    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Falling Leaves</title>
    
    <style type="text/css">
    
    </style>
    
    
    
    <script type="text/javascript">
    /* <![CDATA[ */
    grphcs=new Array()
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.gif";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.gif";
    Image2=new Image();
    Image2.src=grphcs[2]="images/leaf3.gif";
    Image3=new Image();
    Image3.src=grphcs[3]="images/leaf4.gif";
    Image4=new Image();
    Image4.src=grphcs[4]="images/leaf5.gif";
    Image5=new Image();
    Image5.src=grphcs[5]="images/leaf6.gif";
    
    
    var minSpeed = 5;
    var maxSpeed = 30;
    var randomSpeed = 5;
    var randomSpeed2 = 10;
    var randomSpeed3 = 15;
    var randomSpeed4 = 20;
    var randomSpeed5 = 25;
    var randomSpeed6 = 30;
    var minHorizontal = 200;
    var maxHorizontal = screen.availWidth - 300;
    var leftPosition =  Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
    var minVertical = 50;
    var maxVertical = screen.availHeight - 300;
    var topPosition =  Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    var topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
    
    function matchLeaf() {
      if (navigator.appName == "Microsoft Internet Explorer") {
        widthMax = document.documentElement.clientWidth;
        heightMax = document.documentElement.clientHeight;
      }
      else {
        widthMax = window.innerwidth - 14;
        heightMax = window.innerHeight;
      }
      autumnFall();
    }
    
    function autumnFall(){
      var fallingLeaf1 = document.getElementById("leaf1");
      fallingLeaf1.style.left = leftPosition + "px";
      fallingLeaf1.style.top = topPosition + "px";
      fallingLeaf1.style.visibility = "visible";
      topPosition += parseInt(randomSpeed);
      leftPosition += 0;
      if (topPosition >= screen.availHeight - 300) {
        topPosition = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf1.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif" ;
        randomSpeed = Math.floor(Math.random() * maxSpeed - (minSpeed + 1)) + minSpeed;
      }
    
      var fallingLeaf2 = document.getElementById("leaf2");
      fallingLeaf2.style.left = leftPosition2 + "px";
      fallingLeaf2.style.top = topPosition2 + "px";
      fallingLeaf2.style.visibility = "visible";
      topPosition2 += parseInt(randomSpeed3);
      leftPosition2 += 0;
      if (topPosition2 >= screen.availHeight - 300) {
        topPosition2 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition2 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf2.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed2 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf3 = document.getElementById("leaf3");
      fallingLeaf3.style.left = leftPosition3 + "px";
      fallingLeaf3.style.top = topPosition3 + "px";
      fallingLeaf3.style.visibility = "visible";
      topPosition3 += parseInt(randomSpeed3);
      leftPosition3 += 0;
      if (topPosition3 >= screen.availHeight - 300) {
        topPosition3 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition3 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf3.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed3 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf4 = document.getElementById("leaf4");
      fallingLeaf4.style.left = leftPosition4 + "px";
      fallingLeaf4.style.top = topPosition4 + "px";
      fallingLeaf4.style.visibility = "visible";
      topPosition4 += parseInt(randomSpeed4);
      leftPosition4 += 0;
      if (topPosition4 >= screen.availHeight - 300) {
        topPosition4 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition4 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf4.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed4 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf5 = document.getElementById("leaf5");
      fallingLeaf5.style.left = leftPosition5 + "px";
      fallingLeaf5.style.top = topPosition5 + "px";
      fallingLeaf5.style.visibility = "visible";
      topPosition5 += parseInt(randomSpeed5);
      leftPosition5 += 0;
      if (topPosition5 >= screen.availHeight - 300) {
        topPosition5 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition5 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf5.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed5 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    
      var fallingLeaf6 = document.getElementById("leaf6");
      fallingLeaf6.style.left = leftPosition6 + "px";
      fallingLeaf6.style.top = topPosition6 + "px";
      fallingLeaf6.style.visibility = "visible";
      topPosition6 += parseInt(randomSpeed6);
      leftPosition6 += 0;
      if (topPosition6 >= screen.availHeight - 300) {
        topPosition6 = Math.floor(Math.random() * (maxVertical - (minVertical + 1)) + minVertical);
        leftPosition6 = Math.floor(Math.random() * (maxHorizontal - (minHorizontal + 1)) + minHorizontal);
        leaf6.src = "images/leaf" + Math.floor(Math.random() * 6) + ".gif";
        randomSpeed6 = Math.floor(Math.random() * (maxSpeed - (minSpeed + 1)) + minSpeed);
      }
    }
    /* ]]> */
    </script>
    </head>
    
    <body onload="setInterval('matchLeaf()', 1000);">
    <!-- errors found
    missing parentheses
    missing double quotes
    mistype ; for { at start of function autumnFall
    misspelling of variable
    misspelling of function
    wrong assignment operator = should be +=
    -->
    
         <img id="leaf1" src="images/leaf1.gif" alt="leafone"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf2" src="images/leaf2.gif" alt="leaftwo"   style="position:absolute; left:100px; top:100px;" />
         <img id="leaf3" src="images/leaf3.gif" alt="leafthree" style="position:absolute; left:100px; top:100px;" />
         <img id="leaf4" src="images/leaf4.gif" alt="leaffour"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf5" src="images/leaf5.gif" alt="leaffive"  style="position:absolute; left:100px; top:100px;" />
         <img id="leaf6" src="images/leaf6.gif" alt="leafsix"   style="position:absolute; left:100px; top:100px;" />
    </body>
    </html>
    Yeah my debugger other debugger did not catch the gif missing the period at the beginning. I fixed all of the errors you found, but I still have the error console chewing me out for some reason. It still says the leaves are not defined,even though the script runs...very strange. Also IE is really giving me fits. It will run ok when it first loads the leaves, but then you will notice one or a few of the leaves missing during the next loop. Either leaf1 or any of them for that matter, and one of the leaves I think it is the one with the slowest speed, gets frozen on the screen as the others fall next to it. Mozilla runs, but with errors, I am going to check it out in Chrome, and confirm what you already told me.

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Neewb View Post
    Yeah my debugger other debugger did not catch the gif missing the period at the beginning. I fixed all of the errors you found, but I still have the error console chewing me out for some reason. It still says the leaves are not defined,even though the script runs...very strange. Also IE is really giving me fits. It will run ok when it first loads the leaves, but then you will notice one or a few of the leaves missing during the next loop. Either leaf1 or any of them for that matter, and one of the leaves I think it is the one with the slowest speed, gets frozen on the screen as the others fall next to it. Mozilla runs, but with errors, I am going to check it out in Chrome, and confirm what you already told me.
    Ok, checked it out in Chrome, I am getting errors. But the one that Chrome is finding is that it is trying to fetch leaf0, through the array, and cannot locate it. Obviously there is no leaf0, as in the array I have the leaves starting at 1. Should I change the first one to 0, then count from there?

  • #7
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    884
    Thanks
    173
    Thanked 101 Times in 101 Posts
    Hi

    Obviously there is no leaf0,
    yeh see post#4

    Also there is one leaf that will eventually start going up!! It's on -393px so far haha


    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by low tech View Post
    Hi



    yeh see post#4

    Also there is one leaf that will eventually start going up!! It's on -393px so far haha


    LT
    That must be the one I saw in Chrome and IE, it does not however, act like that in Mozilla. Is this due to the array acting funky?

  • #9
    New Coder
    Join Date
    Apr 2012
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Neewb View Post
    That must be the one I saw in Chrome and IE, it does not however, act like that in Mozilla. Is this due to the array acting funky?
    Ok, I fixed the arrays, Chrome went through the image caching with no issues, however I have an uncaught reference error on line 78 where the leaf0.gif is. It says it is not defined....This is fun!


  •  

    Posting Permissions

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