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.
1 Trackbacks/Pingbacks
- Pingback: All in a days work… on May 13, 2007
11 Comments
Sorry, comments for this entry are closed at this time.
Great work!
It works a lot faster on IE7 than in Firefox 2.0 on Windows XP (it's not the bug, it's just the Javascript handling)
Okay, I think 129's my best for tonight =)
Haha, nice!! I only got up to like 36 points. Oh well. Better luck next time!
yawn Good morning. You know, I think that the path stopped decreasing in size after 90 or so… theoretically, even the so-called "hacks" (i.e., the higher scores) are reachable using the same technique I'm currently using without cheating. I am using IE7 on Windows XP, and the game seems to be running smoothly.
"I dare you to beat my high score" — Done. Darn peer pressure…
Of course the path stops decreasing in size, otherwise there would be an upper limit to the score you could acheive.
Still, it seems like the path could decrease in size once more or so and still be playable.
kramtark: It could, but it would be incredibly hard… if you are playing the game at full speed (in IE, for example) then I think you might agree. Plus, not everyone is a pro like you… I could add multiple difficulty levels though… that sounds like an idea!
It's too fast on Chrome. Use a slower wait period . . . 2 ms is too short! No one needs 500 FPS on a game like this.
You are correct sir, I just tested it in Chrome and it is waaaay too fast. I'll fix it.
Not too bad. Regarding your first point and that most recently raised in the comments, you don't really need to buy Flash development software to compile a SWF–plus I imagine it would be easier to guarantee a consistent experience using a VM whose authors are working to ensure browser compatibility, versus a language where the implementation is solely up to the browser vendor. Then again, Flash is my livelihood, so I might be biased ;).
PS - How's life in the far (north)east?
PPS - I'm drunk.
Well, there is a way to ensure that Javascript FPS are the same in every browser, and I've tested and confirmed this method, but I haven't actually had a chance to post a demo of it. I'm too busy with other things these days. And… I don't try to beat Flash with Javascript like I used to.
NYC is a cool place. I'm always too busy though.