jQuery Video Game Remake: T&C Surf

When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.

Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump

About the Development

After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).

I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use the src attribute of any objects.

The main obstacle in development was cross-browser keyboard support. Thankfully jQuery’s keyboard event objects, along with a little Javascript hacking makes it work in all browsers.

Developing Javascript and jQuery video games is always a challenge, and often more than it’s worth. I only do it because I love DOM scripting and pushing its boundaries. Sure these games might be easier program in Flash, but JS/jQuery can handle it.

I hope you enjoyed playing the game as much as I enjoyed developing it. Check out the real NES version too, it’s much more fun!

Nintendo - Now you’re playing with power!

Posted on Monday, August 18th, 2008 at 9:21 am in webdev.