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!
September 5th, 2008 at 3:56 am
Thisisverynice!
October 8th, 2008 at 12:27 pm
aa:)nice,andonjavascript
October 16th, 2008 at 8:59 am
Oops! I just noticed the keymappings from the game had preventDefault() which was disabling the spacebar in the comments here. Sorry!
January 7th, 2009 at 8:21 pm
I love this! T C Surf was one of my favorite games. I grew up street skating and this game was the closest thing to it. Great work.
January 25th, 2009 at 1:45 am
I loved the game!
Well actually I came a cross the game a few months back while learning Jquery my self, To go straight into the point!
I am currently developing a networking site, I cant go into details, But I have to ask, would you mind if I hosted your game in the mini games section?
Of course with your name on it
Best regards,
Tamer Qtaish
January 29th, 2009 at 12:48 pm
Hi Tamer,
I’m sorry but I’d prefer to keep this content on jonraasch.com. Feel free to link to it of course.
And thanks for the kind words,
-jr
February 11th, 2009 at 3:14 pm
Nice Game!
But with Opera browser the jumping doesn’t work. By default spacebar ist for scrolling down on a page. So every time I try to jump the game scrolls up. You can change this in the opera keyboard settings, but it’s not an one-click action.
So I would like tu suggest to make the controls changeable.
Ciao! Bjoern
March 10th, 2009 at 2:47 am
ya better off downloading an emulator
April 6th, 2009 at 5:42 pm
Need more levels!
April 16th, 2009 at 12:50 pm
that’s great, keep on the good work with jquery.