To prepare for the Devnology meeting next month I have to write a version of Tetris in a language of my choosing. I had already fired up Visual Studio to build a kick-ass C# XNA version with explosions and 3D visuals when I realized it would be much more fun and educational to pick a language I’m less familiar with. I’m pretty sure there will be Ruby, Python, Java and Haskell implementations by some people who are pretty good at programming in those languages so I decided not to pick any of those obvious languages. But I’d still like to invest my time learning something I’m actually going to use, so Cobol wasn't an option.
In this first post we’ll get started implementing a couple of easy stories. I chose the following three.
- As a user I can see a playing field that is 10 units wide and 18 units high.
- Blocks fall one unit every second.
- As a user I can steer blocks left and right with the arrows on the numeric keypad.
Lets get started.
As a user I can see a playing field that is 10 units wide and 18 units high
The first story is too easy. The display is just going to be a div. So we create a tetris.html file like this:
and the stylesheet:
I decided on a block size of 20 pixels so the field is 200 by 360 pixels.
Blocks fall one unit every second
In order to draw a block every second we need some sort of gameloop that is called every second. So I put something like this in the jQuery document ready handler :
and the gameloop:
As a user I can steer blocks left and right with the arrows on the numeric keypad.
We still can’t call this a game though. Movement is nice but without interactivity we might as well be looking at dancing hamsters. We want to be able to steer our block around.
jQuery makes registering a keyboard handler pretty easy. We can just add:
Next time we’re going to look at tooling to make testing and debugging all this a bit easier and we’re going to get a bit more OO.
You can download the code in this post here: