This is Tetris written in Dart.
JavaScript Dart HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



This is Tetris written in Dart.

To play it, open src/index.html in a modern web browser.

There's also a JavaScript version in tetris-in-javascript.


Make sure you get the latest, untested version of Dart Editor and use
Tools >> Generate JavaScript when committing a new version of


This code was inspired by Alexei Kourbatov (

Lessons Learned

 * Don't try to play with DOM elements before the DOM is loaded.  The easiest
   way to achieve this is to import your Dart-compiled JavaScript at the bottom
   of the page.

 * Dart has generics.  This is a little unfamiliar for a scripting guy like me.

 * I had a hard time finding methods like JavaScript's Math.abs and Math.floor.
   They're now members of num.

 * This is how you add to the DOM:

     HTMLDocument doc = window.document;
     HTMLParagraphElement p = doc.createElement('p');
     p.textContent = message;

 * Using innerHTML works too, but I suspect it's frowned upon.

 * DOM manipulation isn't as easy as using innerHTML.  It's not quite as
   horrible as I feared, but it's still a pain in the butt.

 * Sometimes you need to use a temporary variable to help out the type system.
   If you write:

     doc.getElementById("s-" + i + "-" + j).src = 'images/s0.png';

   it'll say "'src' is not a member of Element."  However, you can easily fix
   this by writing:

     HTMLImageElement img = doc.getElementById("s-" + i + "-" + j);
     img.src = 'images/s0.png';

 * Translating from JavaScript to well-typed Dart is a linearly time-consuming,
   but relatively straightforward progress.

 * Intelligent code complete is really helpful when you don't know a language
   or its APIs.  I'm definitely slowed down by not being able to use an
   editor whose keybindings I know (like Vim, etc.), but it's still faster than
   looking up APIs by hand all the time.

 * Trying to figure out the proper way to handle keyboard events in Dart is
   hard because of the DOM.  I'm looking at
   (, and it looks like
   there are two ways to do things, the deprecated way, and the way that isn't
   implemented yet.

 * Command-g is the usual Apple key to find the next occurrence of something,
   but it doesn't work in Dart Editor.

 * They're working on a new DOM API
   (  I've decided not to
   use it until they say it's stable.

 * The way main() works in the Sunflower Example doesn't match the way main()
   works in sample applications generated by Dart Editor.  I'm not sure why.

 * The latest, untested version of Dart Editor has a feature in the Tools menu
   called "Generate Optimized JavaScript".  This reduced the generated
   JavaScript file from 8.9mb to 186k!