Sunday, November 25, 2012

Simple Tetris Clone in TypeScript

I wanted to create a JavaScript port of my tetris clone using the HTML5 canvas element but I never got the drive to start it, so it was lingering for ages in my TODO list. The final push come after TypeScript, a little language from the father of industrial grade languages like Delphi and C#. This was just enough to push me to use my little game to familiarize myself with this new language. 

So. How it went?

My overall experience has been positive. TypeScript is really a nice addition to the JavaScript ecosystem because it allows you to catch a lot of errors at compile time. Yes, I'm ashamed to admit it but I do many of these errors, it was one of the reasons I created Killa, I wanted the compiler to find typos for me. But TypeScript goes many steps ahead and already includes support for optional typing, classes, interfaces and namespaces and at the same time is JavaScript compatible and of practical use right now. I mean: it works.

The class system is based in the next JavaScript standard and I got used to it after a little time, I would have preferred a more conventional one but it's fine I guess. The optional typing system works like in AS3/Haxe and it's the one I was thinking for Killa so I already liked it. However, there is no "int" type, something that I really missed porting my game, because many errors porting C++ programs to JavaScript happen due to numerical conversion errors.

x = 5;

// C++
int n = x / 2;  // n = 2

// JavaScript
var n = x / 2;  // n = 2.5

The "this" keyword is also misleading inside a class method because it is still the "this" keyword from JavaScript and it can be the window object in some circumstances (that I found porting my game). Generics are missing, the arrays can be typed but I don't like the way how it's done, I think they can learn a bit from Haxe. At future, I'd love to see TypeScript deviating more and more from JavaScript and fixing the language in the process, however it's a difficult task at this moment because they want/need to support vanilla JavaScript and then you have to support things like "!==", ">>> 0", "[]=={}", etc. If it were me I'll add a JavaScript region tag, something like this:

    // paradise zone
#define js
    // all hell broke loose here...
    // paradise zone again

This way you could still have JavaScript compatibility, but only in contained zones and you could enforce full TypeScript safety in the rest of your program. You could shrink the dangerous zones progressively as new JavaScript libraries are ported to TypeScript. But enough of my lame opinions, here you can see the auto-generated code, it's not beautiful but it can be followed. There is an option to pass the comments in TypeScript to the generated JavaScript code but as you can see it's not perfect.

I did not use any fancy JavaScript library for this little game so this probably works only in the latest versions of Firefox and Chrome. Use your mouse for control, clicking in the left/right side of the board would move the falling piece to the left/right side, clicking at the bottom of the board would drop the piece and clicking at the top of the board would make the piece rotate. The stand alone version can be found here (you can use your keyboard there).

TypeScript really shines when you are using their IDE support with Visual Studio, because then you can fix your errors at edition time and you get intellisense and all the other VS goodies (I can use all my keyboard shortcuts from VC++!!). This is nothing new: Dart tried before but it didn't grab my attention. Also in Windows I prefer Visual Studio to any Eclipse based IDE if possible. By the way the VS team must be proud, the Visual Studio 2012 edition is pretty gorgeous looking and it's very fast. The 2010 version was ugly and slow as hell (I still avoid it as the plague), and following the tendency I was expecting an even worse experience now but it seems they somehow pulled it off:

It's interesting to see somebody with brains at the top management level behind this Microsoft move, because they didn't screwed this opportunity with things like:
  • we must make this closed source or use one of our Microsoft licenses: instead they used the Apache 2 license and that for patents issues is even better than the MIT license. They are even using git for version control.
  • we must give IDE support only for the paid Professional Edition of Visual Studio: the internet is full of high quality open-source-cross-platform IDEs (QtCreator any?). I don't see many people paying big bucks for a Windows-only IDE to beta test a new language.
  • let's bundle TypeScript with some ASP.Net crap and make it work the best in IE only: again no sign of Microsoft only technologies, they support Node.js and their demo was showcased in Chrome (the nerve!).
Of course they are not fooling anybody, Microsoft is doing this because it's in their best interest not to lose anything more with the web developer community after all the mess they helped to create. As anecdotal evidence, I didn't touch any client side JavaScript code for ages due to the terrible reputation of browsers like IE6, IE7 and IE8. I was under the impression that doing web development shortened your life fixing stupid problems, and I really admire the programmers that created things like Gmail and Facebook with so brittle tools. Things are improving it seems, but Microsoft still needs to do a lot. I'm not leaving Firefox for browsing or Chrome for development any time soon. I hope they don't miss their chance to implement the WebGL specification really soon or their browser is going to lack severely in the 3D games section. Making a whole new engine just to support IE when my game already works in all the other browsers is not going to happen unless there is a gun over my head or a big fat check under my pocket. At this time only grannies and prisoners use IE anyways and they don't play many games.


  1. Hi, I would like to ask you about the legal issues. Didn't the company of Tetris write you email asking you to remove the game from the internet?
    I would like upload to my webpage my own js version of tetris but i'm afraid after reading that the company always sues the clones of tetris and as I don't know anything about the legal, I'm quite scared of posible fines and etc..
    I would appreciate your opinion and response.

    1. Hi, actually not. But maybe I'm not that popular? :D
      I believe they sue the use of the name and mechanics of TETRIS in commercial products, but I can be wrong, I'm not a lawyer.

  2. Is the typescript code available somewhere? thanks!

    1. yep, there is TypeScript branch here:
      I think I updated this for VS 2015

  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai