Christian Montoya

Tunnel: A Javascript & CSS (jQuery-powered) game

I've spent the past few days doing three things:

  • Studying for my HADM 430: Intro to Wines exam
  • Playing Gunbound
  • Making a game with Javascript & CSS

I'm here to talk about the last one I mentioned. I decided to get some practice with Javascript by making a web game, and I decided to port one of the games my lab partner & I programmed for our ECE 476 final project. Now I know the idea of making a game with Javascript & CSS sounds crazy, but I had a few good reasons for giving this a shot:

  • It's a lot cheaper than making a Flash game, which requires purchasing the very expensive Adobe Flash development software
  • It's a bit nicer than making a Java applet, which no one uses these days
  • For some things, it's actually a lot easier than one might realize

So I dove in. I made a game using jQuery with quite a bit of DOM manipulation and a few fade effects, as well as some Ajax requests talking to a PHP backend using a text file to store high scores. It was a big challenge at times but I was able to figure out most everything with the help of the jQuery site as well as php.net. Some things I discovered:

  • Using CSS to control the appearance of things, and using GIFs and PNGs for images, makes the graphics side of things incredibly easy. Advanced graphics techniques like particle effects are beyond the scope of what one can do with Javascript, but with basic 2D sprite-based graphics, Javascript works just fine.
  • jQuery makes Javascript development very easy, especially when you need to manipulate the DOM or perform Ajax requests.
  • Using Ajax is a pain in the neck when security and timing are concerns. As far as I can tell, nothing you store in Javascript can ever be truly secure.

So putting it all together, my result is here: Tunnel. To explain, it's a very basic game where you use the mouse to move your ship left and right. As you play, the walls narrow until eventually you have about 2 widths of your ship to fly between. The game ends when you die, and your score gradually increases as long as you live. When you die, your score is checked against the top 10 and if you get a high score, you enter your name to put yourself on the list. It's not too complicated and you can check out the source to see everything that's going on at the front-end. I should mention, however, that this is my own work, so you can't steal it and put it on your own site. Plus, it has a couple bugs that I think are worth mentioning:

  • In Firefox 2.0 on Windows Vista, the game speed gets cut in half after the first time you play. I'm assuming there are some Javascript objects sitting around as a result of the Ajax requests that Mozilla doesn't clean up which end up slowing the whole thing down. This doesn't happen in IE 7 at all.
  • The high scores are stored in a text file, and it's very important that this file is only accessed by one person at a time. If two people get a high score at the same time, the second person is just going to be locked out and might not get their score entered.
  • Occassionally, mysterious things happen on the PHP side and the score table gets messed up. I put in some workarounds to try to prevent this, but if the table just happens to dissappear, it can't be helped.
  • It is entirely possible to hack the high score system and enter insanely high values. There's a couple ways to do it, which I won't share here. If you have ideas, please don't try them… I know it's hackable, so there's no need to test it. As far as I know, there's no way to make it any more secure than it already is.

All that being said, the game works pretty well and I think it's a good example of what can be accomplished with Javascript & CSS. Feel free to have a look at it, learn from it, and get your own ideas. If you happen to use any of my code or ideas, please do give credit where credit is due. And I dare you to beat my high score ;)

p.s.: Want to know what's cool about making a game with Javascript and CSS? It works even when images are disabled! Disable images in your browser and check out the game to see what I mean.

Thank you for reading • Published on May 10th, 2007 • Please take a moment to share this with your friends