I've just uploaded this simple javascript game: Play here.

The idea is that you move the ball through the gates before the screen closes in on you. Been done many times before, but I wanted to see if I could do it using JavaScript rather than the usual way of creating web browser based games - by using Flash.

Because there's no 'on collision' event that I'm aware of (although I have just discovered gameQuery, which may have helped me, but I haven't looked into it yet), I had to simulate collisions. Each row is the same height and the random row lengths pre-processed by the server and therefore accessible by the JavaScript. This meant that I could calculate an x and a y coordinate of the holes - and so if the ball's current position matches a hole, it starts the drop animation to the next level, and moves on to the next hole.

For motion, it's mostly performed using the animate() jQuery command. To be able to apply separate vertical and horizontal motion to the ball, the image for the ball was placed inside a 'playerX' div, which in turn was placed inside a 'playerY' div. This meant that I could apply a drop animation without losing the horizontal momentum already gathered. Initially, it didn't play well as it stopped its horizontal motion on a fall, which wasn't very smooth.

A detection function to test if the ball is on top of a hole runs every 50 milliseconds, so producing a frame rate of 20fps depending on browser (although the game scroll and player motion should be smoother than this as they're not tied to the hole detection function). Within this function however, I added a jQueryRotate plugin, which was very useful. Depending on whether the ball is moving left or right, it updates the rotation value every 50 milliseconds.

Finally, a scoring system was added along with the ability to post high scores. There are many ways of cheating to log an impossible score, but I wasn't overly concerned about this as it wasn't the main principle of the task.

Anyway, have a play.