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!
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Thisisverynice!
aa:)nice,andonjavascript
Oops! I just noticed the keymappings from the game had preventDefault() which was disabling the spacebar in the comments here. Sorry!
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.
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
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
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
ya better off downloading an emulator
Need more levels!
that’s great, keep on the good work with jquery.
great post.. keep going. liked it!
it’s amazing man. Keep going..
Hey, great start!! I kept trying to rail slide on the boxes and the rail, but alas it’s not quite the real deal. But still, very very impressive.
While you gave this textarea back the space bar, it still doesn’t work in the Name field. But who am I to complain? This is still one of the best JS proofs of concept out there!
Nice game! I was wondering where you got the sprites for the game? Did you recreate them or were they available somewhere?
You like the game, you should check out this Austin, Texas VGM tribute band’s rendition: http://www.youtube.com/watch?v=_KT3lDppoU8
Nice game , realy very good
your code is so clean
First of all, great job! But on Google Chrome sometimes the guy desapears. O.O