DHTML bouncing ball effect

**Fuzzyspace** · 01-24-2007, 08:30 PM

1) CODE TITLE: DHTML bouncing ball effect

2) AUTHOR NAME/NOTES: Fuzzyspace

3) DESCRIPTION: Lots of balls bouncing up and down across the screen and back. Number of balls can be configured. Should work in IE and FF.

4) URL TO CODE: http://www.spyatt.plus.com/FlatBounc...latBounce.html

This is my first submission to Dynamic Drive. Currently learning DHTML.

**Twey** · 01-24-2007, 09:42 PM

if (navigator.appName == "Microsoft Internet Explorer")

This is called browser detection, and it's a bad idea. For example, one could say:

Code:

if (navigator.appName == "Microsoft Internet Explorer") {
  document.all.myelement.doSomething()
}

However, that's assuming that all versions of IE will have document.all, that no other browsers will support document.all, and that Internet Explorer will always report its appName as "Microsoft Internet Explorer," none of which are necessarily true. Instead, it's better (and easier) to check for document.all directly:

Code:

if(document.all) {

For example, I see nothing that will stop your script working in Konqueror, but it doesn't, since you've set it up to only run in Internet Explorer and Netscape-based browsers. Likewise, it stops working in Firefox if I change my browser identification, which, again, it needn't.

Code:

  document.write('<img id="ball' + [arraybuild] + '" src="images/smallball.gif" style="position:absolute; visibility: hidden">')

Try to avoid document.write(). It's much better to add elements to the DOM:

Code:

var e = document.createElement("img");
e.src = "images/smallball.gif";
e.style.position = "absolute";
e.style.visibility = "hidden";
e.id = "ball" + arraybuild;

Also, this syntax is a bit fishy:

Code:

[arraybuild]

In Javascript, square brackets ([]) denote an array. So, [arraybuild] means a single-element array consisting of the value of arraybuild. The default string representation of an array is its elements separated by commas, so, since there was only one element, the string representation happens to be that of arraybuild anyway.

Code:

setTimeout("bounce()", 50)

Passing a string to setTimeout() is equivalent to using eval(): ugly and rarely necessary. Instead, you can pass a function directly:

Code:

setTimeout(bounce, 50);

You might also want to add in some more physics, and perhaps object-orient it.

Otherwise, fairly nice

**Fuzzyspace** · 01-25-2007, 01:18 PM

Hello Tewy

Thanks for the useful advice, ive made all the changes as suggested. Good learning experience here.

The only part im having trouble with is understanding is this part:

var e = document.createElement("img");
e.src = "images/smallball.gif";
e.style.position = "absolute";
e.style.visibility = "hidden";
e.id = "ball" + arraybuild;

I'm currently trying to find some more information on it in books and on the internet but cant get this to work in my script. I may need to modify other parts of the script to get the e.id = "ball" + arraybuild; part to work. It may be connected to the document.getElementById part lower down. I may just be suffering from brain lock at the moment.

Possibly i need to be shown a fully working example so i can figure out how its done.

Also any ideas for added physics? I have no idea what else i could do.

Thanks,

Fuzzyspace.

**Twey** · 01-25-2007, 01:32 PM

Sorry, I missed out a rather vital statement there:

Code:

var e = document.createElement("img");
e.src = "images/smallball.gif";
e.style.position = "absolute";
e.style.visibility = "hidden";
e.id = "ball" + arraybuild;
document.body.appendChild(e);

Read the Gecko DOM reference for more information.

Also any ideas for added physics? I have no idea what else i could do.

Here's an example of using basic gravity physics (taken from http://www.twey.co.uk/includes/game/Game.js):

Code:

  var s, u, v, a, t;
  t = (this.timeFalling = this.timeFalling + 0.01);
  u = 0;
  a = this.game.gravity;
  v = u + a * t;
  s = v * t + 0.5 * a * (t * t);

  this.move(0, Math.round(v));

t = time, u = initial velocity, a = acceleration (standard Earth gravity is roughly 9.81), v = current velocity (velocity at time t), s = displacement (the distance moved). The other variables are fairly self-explanatory. This code snippet applies to a body falling from a standstill; by giving it a negative initial velocity, it can be adapted to work with an object propelled upwards against gravity, such as one of your balls when bouncing upwards. Applied correctly, it will give a more realistic feel than the constant-speed sine-based algorithm you're using at the moment.

Code:

document.getElementById("ball" + ballbuild.toString()).style.visibility = "visible"
document.getElementById("ball" + ballbuild.toString()).style.left=xdirection[ballbuild]
document.getElementById("ball" + ballbuild.toString()).style.top=sindraw + imagescrollpos

This is inefficient: all those lookups are unnecessary. Perform the lookup once then store the result:

Code:

var ball = document.getElementById("ball" + ballbuild);
ball.style.visibility = "visible";
ball.style.left = xdirection[ballbuild];
ball.style.top = sindraw + imagescrollpos;

**Fuzzyspace** · 01-25-2007, 02:00 PM

Hello Twey,

Ok it works with the document.body.appendChild(e); added, thanks.

Yes the physics are faked at the moment, i do need to have a look at better formulars and will have a look at yours. For this submitted script i may leave it as it is and do an updated version later.

I did the multiple lookups as it was easier on my poor eyes but maybe i should change that. Does it slow a script down using my method?

I will upload the script again with your added suggestions when i get chance. Its done and ready but i cant do an upload just now.

Thanks for you feedback, i have learnt a lot already.

Fuzzyspace.

**Twey** · 01-25-2007, 02:15 PM

I did the multiple lookups as it was easier on my poor eyes but maybe i should change that. Does it slow a script down using my method?

Yes, redundant lookups are one of the most common bottlenecks in a script.

**Fuzzyspace** · 01-25-2007, 06:44 PM

OK, new version uploaded.

Twey have a look at and see if i got all your suggestions updated correctly.

http://www.spyatt.plus.com/FlatBounc...latBounce.html

Thanks once again,

Fuzzyspace.

**Twey** · 01-25-2007, 06:48 PM

Don't just test for document.all: test for the property you actually want to use.

Code:

if (typeof document.body.scrollTop !== "undefined")
 {
  imagescrollpos = document.body.scrollTop
  heightwindow = document.body.offsetHeight
  widthwindow = document.body.offsetWidth
 }

Other than that, yes, it looks OK. As I suspected, the script does also work in Konqueror without modification.

There are a few improvements that could still be done, including true physics simulations and object-orienting the whole script, but that may be more complex to implement.