Trevor Babcock

Snake

For fun I built a Javascript/HTML version of the game Snake (sometimes known as Nibbler). I chose HTML/CSS as my rendering engine (as opposed to Canvas) because I thought it would be a challenge but suspected I could still make it work. Click the 'play' button if you'd like to play it. Spacebar starts the game and the arrow keys control your direction. Also check out the 'advanced setup' options; they let you customize the game in a lot of interesting ways.

I've done a lot of front-end work developing smooth, functional, and sometimes flashy user interactions. With that being the case, I've grown to love working with Javascript and jQuery, but despite my familiarity with Javascript, writing this game presented me with some challenges I had not yet encountered. For example, almost immediately I ran into a problem with creating the main game loop. In many (most?) video games, you put most of your game logic inside of a 'while' loop. In each iteration of the loop, the game is updated a little bit. However, using a 'while' loop for this in Javascript doesn't work for two reasons: 1) it spikes the CPU and 2) all user input is ignored as the 'while' loop runs. The solution I decided on was to, instead of having my main game-updating function run inside a while loop, have it call itself from a setTimeout. The length of the timeout in this case is the amount of time I want each game cycle to take (100 ms for medium speed, for example). So here's what happens: I call the main function once, it sets a timeout to call itself again, then it runs all the game-update logic. Once it finishes running that update logic (which takes a few milliseconds), the game sits and waits (allowing user input) for the timeout to go off. It continues calling itself until the game has ended. This and a few other problems challenged me as I wrote this game, but I'm very pleased with the end result.

If you'd like to take a look at the code, you can find it here on Github. The cool stuff is happening in game.js and snake.js. Also, if you run into any browser issues, let me know.

Element

At my previous place of employment we avoided using .Net's ASPX files and instead generated markup using a library we called Element. The code looked something like this:

The above code would generate the following markup:

You get the idea. Well, there were multiple versions of this Element library floating around the office, and none of them worked the way I felt they should, so I wrote my own to see if I could improve on it. Not only was I able to fix the issues with the inheritance structure (the biggest problem in my eyes), I was able to write a much cleaner version of the recursive "Add" method and write the whole library in fewer lines. Unfortunately I never had an opportunity to use the version I developed, but it was still a fun exercise. You can check out my version here on GitHub. It's a MVC 3 application, so if you can't open it, look at Element.cs; that's where a lot of the good stuff is happening.

More Projects Soon...

I promise! I'm planning to write an implementation of an A* pathfinding algorithm in Ruby and I'm brainstorming more ideas for a kinda big project I'm planning that will include a website and maybe an iPhone app. Stay tuned!