Bouncing Ball

Using Scriptaculous

Stop! This is the version using the Scriptaculous effects library. The main Character object works largely the same way, with the same boundary checking as in the canvas version. The main thing we're not doing here is drawing, which saves some steps. Scriptaculous basically changes the position attributes of the CSS to move the smiley-face image around. It has to be loaded in a known space to work properly, the script can move it around.

There are ways to do this, but basically, we don't have the same context that we have when using a canvas. We can mimic it with a div set to a certain size, and so long as relative css positioning works, we're good to go. I don't know how more than one ball would work, however. I also am still tied to javascript speed and "framerate" to determine the speed of the ball. Lowere the framerate, and it slows down,etc. Faster framerates give a more realistic motion, but determining speed and direction with the vectors I have is annoying. I'd rather set a direction vector (an angle?) and a speed, and then check the speed against passed time to set the new location.

One other thing about Javascript ist hat we can't have quite the same game loop that we'd have in another game. Here we have to set a callback on a timer or interval, otherwise the browser thinks we've got a rogue script that's taking all the cycles. I know, that's what games typically do, but we have to play nice in our sandbox.