Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page Need help with an animation project

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-21-2012, 05:42 AM   PM User | #1
Neewb
New Coder

 
Join Date: Apr 2012
Posts: 27
Thanks: 5
Thanked 0 Times in 0 Posts
Neewb is an unknown quantity at this point
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 05:49 AM.. Reason: punctuation
Neewb is offline   Reply With Quote
Old 05-21-2012, 07:08 AM   PM User | #2
low tech
Regular Coder

 
low tech's Avatar
 
Join Date: Dec 2009
Posts: 740
Thanks: 149
Thanked 67 Times in 67 Posts
low tech is on a distinguished road
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>
__________________
Ask not what can I do for myself, but what can I do for others

"The greatest revenge is to accomplish what others say you cannot do."
~ Unknown
Last edited by low tech; 05-21-2012 at 07:57 AM..
low tech is offline   Reply With Quote
Old 05-21-2012, 08:48 AM   PM User | #3
Neewb
New Coder

 
Join Date: Apr 2012
Posts: 27
Thanks: 5
Thanked 0 Times in 0 Posts
Neewb is an unknown quantity at this point
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>
Neewb is offline   Reply With Quote
Old 05-21-2012, 08:53 AM   PM User | #4
low tech
Regular Coder

 
low tech's Avatar
 
Join Date: Dec 2009
Posts: 740
Thanks: 149
Thanked 67 Times in 67 Posts
low tech is on a distinguished road
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>
__________________
Ask not what can I do for myself, but what can I do for others

"The greatest revenge is to accomplish what others say you cannot do."
~ Unknown
Last edited by low tech; 05-21-2012 at 09:33 AM..
low tech is offline   Reply With Quote
Old 05-21-2012, 09:22 AM   PM User | #5
Neewb
New Coder

 
Join Date: Apr 2012
Posts: 27
Thanks: 5
Thanked 0 Times in 0 Posts
Neewb is an unknown quantity at this point
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.
Neewb is offline   Reply With Quote
Old 05-21-2012, 09:28 AM   PM User | #6
Neewb
New Coder

 
Join Date: Apr 2012
Posts: 27
Thanks: 5
Thanked 0 Times in 0 Posts
Neewb is an unknown quantity at this point
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?
Neewb is offline   Reply With Quote
Old 05-21-2012, 09:33 AM   PM User | #7
low tech
Regular Coder

 
low tech's Avatar
 
Join Date: Dec 2009
Posts: 740
Thanks: 149
Thanked 67 Times in 67 Posts
low tech is on a distinguished road
Hi

Quote:
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
__________________
Ask not what can I do for myself, but what can I do for others

"The greatest revenge is to accomplish what others say you cannot do."
~ Unknown
low tech is offline   Reply With Quote
Old 05-21-2012, 09:39 AM   PM User | #8
Neewb
New Coder

 
Join Date: Apr 2012
Posts: 27
Thanks: 5
Thanked 0 Times in 0 Posts
Neewb is an unknown quantity at this point
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?
Neewb is offline   Reply With Quote
Old 05-21-2012, 09:50 AM   PM User | #9
Neewb
New Coder

 
Join Date: Apr 2012
Posts: 27
Thanks: 5
Thanked 0 Times in 0 Posts
Neewb is an unknown quantity at this point
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!
Neewb is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 10:26 PM.
Advertisement
Log in to turn off these ads.