JavaScript Tetris

Why?

I was finishing up some tedious work around midnight a few days ago and decided I needed to code something fun. I have a few projects I’m already working on so I figured I’d do something small and quick. Lately I’ve been getting interested in game programming so I wanted to do something along those lines. “But what sort of game can I make in a few hours?” I thought to myself. Then it hit me. I was going to make Tetris.

The Process

I’d never made anything like this before so I decided to implement in JavaScript since I’ve been doing a lot of JavaScript coding lately. I grabbed a Coke from the fridge and got to work. It took a couple of hours to throw together the internals and another hour or so to style it (CSS is not my cup of tee). I used the sweet jQuery library for all DOM manipulation and a few images I made so the blocks would look nice. It turned out pretty well and after one long night I had a nice little tetris game!

Compatibility

It works in Safari 3, Firefox 2, IE 6 & 7, and Opera 9 (those are all the browsers I have installed) with the only caveat being that Opera doesn’t continuously fire the onkeydown event while a button is pressed, so dropping blocks quickly in Opera requires multiple taps on the down arrow.

Source Code

The code, styles, images, and markup are available here in case anyone wants to fix any bugs they find or use it as a studying tool (the code is commented, but it was late so the comments are not as detailed as they could be).

Well enough talk! Check it out!