Skip to main content

JavaScript Tetris part III

Here’s just a short update on the Tetris project (if you can call it a project). I had a pretty busy week but I did find some time to play around some more with JavaScript, try out some GOF creational patterns, and build a nice domain model to make working with squares and blocks a bit easier.

This time I wanted to make the falling blocks look like real Tetris blocks. Right now the whole game state is pretty much an x and y position of the falling block, but in order to draw more complex blocks my domain model needs to get a bit bigger too.

The first thing I did was encapsulate x,y value pairs in a Vector object. I built a Square object with an x, y and a color and I built a Block object to hold several square objects to form one of the well known Tetris blocks.

The Vector, Square and Block classes only expose their properties through methods, that way they can’t be changed after creation. Actions on these objects will just return a new object, for example moving a square will leave the old square unchanged. This is something I’m used to in C#, and it looks pretty clean in JavaScript too. Not sure if this is common practice.

   1: function Vector(x, y) {
   2:     this.x = function() { return x; }
   3:     this.y = function() { return y; }
   5:     this.moveLeft = function() {
   6:         return new Vector(
   7:             x - 1, y);
   8:     }
   9: }

This is a small snippet of the Vector class to illustrate my point. The x and y are implemented as functions instead of properties. The Game object stores the current position in a Vector and just calls moveLeft when the user presses the left button to get a new vector one step to the left. This means I go around creating and throwing away more objects. But I have less side effects, which seems more elegant to me especially in a functional-ish language like JavaScript.

In order to make it easy to build the seven types of blocks from code I tried implementing some of the creational patterns. Eventually I things weren’t so complex that I needed a factory object or a builder so I went with a simple factory method ‘buildBlock’.

   1: Block.buildBlock = function(color, coordinates) {
   2:     var squares = new Array();
   4:     for( var i in coordinates) {
   5:         squares.push( new Square( coordinates[i][0], coordinates[i][1], color ) );
   6:     }
   8:     return new Block( squares );
   9: }

Instead of creating this method in the constructor method of Block like I normally do I tacked this method on to the Block constructor. This way you can call it without having an instance of Block, a bit like a static method in C#.

Now I can define the different types of blocks like this.

   1: Block.blocks = 
   2:     [
   3:         Block.buildBlock('maroon', [[-1,0], [0,0], [1,0], [2,0]]),
   4:         Block.buildBlock('lightgrey', [[-1,0], [0,0], [1,0], [1,-1]]),
   5:         Block.buildBlock('magenta', [[-1,-1], [-1,0], [0,0], [1,0]]),
   6:         Block.buildBlock('darkblue', [[0,0], [1,0], [1,1], [0,1]]),
   7:         Block.buildBlock('green', [[-1,0], [0,0], [0,1],[1,1]]),
   8:         Block.buildBlock('brown', [[0,0], [-1,0], [1,0], [0,1]]),
   9:         Block.buildBlock( 'cyan', [[-1,1], [0,1], [0,0], [1,0]])
  10:     ];

Pretty clean if I say so myself.

As usual you can download the code and play around with it yourself.

tetris0.03.rar (13.79 kb)

Next up, rotating blocks.


Popular posts from this blog

Square One available on the Android market

This is just a short post to let you know that a first version of the Android app I’ve been working on for the last couple of weeks is available on the Android market. The app is called Square One and it’s a simple bassline synthesizer. It’s free so try it out and let me know what you think of it, but be prepared it’s still an early version. I hope to add more features in the next few months and maybe build something that can be used to create real music.The lower part of the screen contains the sequencer controls that can be used to program your own bass lines. On the left is a four by four grid of buttons where you can select a step in the sequence. On the right you can select the note to be played on that step. When you’re done you can press Start and the sequence starts playing. The knobs on the top can be used to control a couple of parameters from the synthesizer engine that creates the sound. You can control the cutoff frequency and resonance of the low-pass filter, attack and …

Running a Git repository on Ubuntu using Gitosis

20I’ve been using Git for a couple of small projects that I’ve been hosting on but version control for my bigger ‘secret’ projects still runs on a windows machine with visual svn server.Now that I’m starting to use Mono for a couple of projects so I’m playing with linux more. Last week I decided to try to try out gitosis on an ubuntu server. I found out it’s pretty easy to use when you know your way around git but for a noob like me some things weren’t immediately clear. Eventually I solved most problems I ran into, so I decided to write up the steps I took to install gitosis on ubuntu 10.04

The big move

People who visit here more often probably noticed that my blog has been down a couple of times the last few months. The problem was that after giving up on hosting it on an (expensive!) windows server I tried unsuccessfully to host my blog on Ubuntu with Mono. I could probably get this to work but it takes too much time and effort. So I decided to move to a hosted blog on Blogger. This way I can spend more time blogging and less time on blog administration.If you’re on a stylish white blogger page right now you’re already on the new blog. Have fun and expect most of my old content to appear there over time. If you’re on my old coffee themed blog you’ll probably need to move to Or you can wait. As soon as I have all my content moved over I’ll point to the new blog too.