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!

t and c surf designs

Nintendo – Now you’re playing with power!



Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.




You Might Also Like:


18 Comments to “jQuery Video Game Remake: T&C Surf” RSS 2.0

  1. insic says:

    Thisisverynice!

  2. turok says:

    aa:)nice,andonjavascript

  3. Jon Raasch says:

    Oops! I just noticed the keymappings from the game had preventDefault() which was disabling the spacebar in the comments here. Sorry!

  4. benjamin says:

    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.

  5. TamerQtaish says:

    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

  6. Jon Raasch says:

    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

  7. Bjoern says:

    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

  8. slagz says:

    ya better off downloading an emulator

  9. Chris says:

    Need more levels!

  10. daft01 says:

    that’s great, keep on the good work with jquery.

  11. video games says:

    great post.. keep going. liked it!

  12. Prabhakaran says:

    it’s amazing man. Keep going..

  13. 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!

  14. Stephen says:

    Nice game! I was wondering where you got the sprites for the game? Did you recreate them or were they available somewhere?

  15. JustinP8 says:

    You like the game, you should check out this Austin, Texas VGM tribute band’s rendition: http://www.youtube.com/watch?v=_KT3lDppoU8

  16. Oyun says:

    Nice game , realy very good

  17. agungnurkaya says:

    your code is so clean

  18. Fernando Valentini says:

    First of all, great job! But on Google Chrome sometimes the guy desapears. O.O



Leave a Reply



  • HTML permitted
  • Wrap code in <pre><code></code></pre>
  • Escape HTML to display as text