Thursday, 10 November 2011

TwitchTetris, the Beginning of TwitchCode

> Press Any Key to Continue...

I've created this blog to publish the projects that I'm working on or have finished, as well as to start discussion on whatever interesting ideas I stumble upon. Today marks the release of the first project I'm setting into the wild: TwitchTetris.

Currently, Tetris games on the web tend to fall into one of 2 categories:

  1. High-Quality Flash games with obtrusive ads.
  2. Low to medium quality games in flash or Html5 with noticeable game-play problems.
My problem is that when I want to play Tetris, I want to play it now, and I want it to play crisply and responsively on every platform. I don't want to wait for some video ad to finish before I can start playing, and there must not be any noticeable lag in the controls. And most of all, if the game does not follow the Tetris Guidelines (yes, Tetris has it's own regulatory agency), I'm not going to play it.

In short, I'm very particular in my choice of Tetris games, and as of now, no web-based implementation has met my requirements.

Enter TwitchTetris.

My first design decision was to not use the cluster-fustication that is Flash. Without even touching on the user experience problems of plugin dependencies, Flash implementations vary in quality and performance by operating system and browser. Tetris is one of the fastest games around, so differences in Flash run-times become very noticeable around level 12 of the game.

This leaves Html5/Canvas as the sole option.

By making this call, I knew that excanvas wouldn't be able to keep on par with the performance that I needed for the game. I basically had to accept the fact that I was telling IE users to get bent if they wanted to play the game.

I have no regrets.

So after doing a quick survey of the available libraries for writing simple games using Html5, I settled on JawsJs. It's a simple game development layer that is still early in development, but it was far enough along for me to make a half-decent game with it.

The projects that have been developed in JawsJS to date were considerably less complex than what TwitchTetris turned out to be, and I had to do a bit of creative rendering to make keep it running at the speeds I needed, but overall I think that JawsJS was the right direction for me.

As a whole, there are a lot of points where JawsJS could see some serious improvement, and if game development in Html5 starts to take the place of Flash, I hope that this library sees some serious development from the community.

So, then after weeks and weeks of development happening between lectures and labs at school, TwitchTetris is finally ready to be deployed. I'm using Google App Engine as a backend/hosting solution just because it's at the center of the cross-section of easy-to-use, and reliable.

My design theory was "no bullshit": meaning no ads which hinder the experience of the gamer and no extra "features" added on to the game to make it needlessly complex.

I came up with a "Teletype Console" theme for displaying the level and score information. The theme allowed me to create a relatively simple backdrop of green on dark green so that the action of the game really draws your attention with more dynamic colors. It also puts some movement into the side panels of the game display, so the game feels more dynamic.

So, head over to, play a few games, try to set a high score, and let me know what you think!


  1. โปรโมชั่นใหม่ “แจกโบนัส สูงสุดทันที 1,000 บาท”
    gclub online โปรโมชั่น แบบครบวงจรที่คอยอัพเดทข่าวสารเกี่ยวกับโปรโมชั่น จีคลับ บาคาร่าออนไลน์ สล็อตออนไลน์ ตลอดทั้ง 24 ชั่วโมง เพื่อให้ท่านได้สามารถเข้าร่วมสนุกไปกับเกมออนไลน์ของเราได้ตลอดเวลาโปรโมชั่นสำหรับสมาชิก Premium, VIP ที่แจกโบนัสให้สูงที่สุด 10% และโปรโมชั่นแบบรายวัน สำหรับคำขอบคุณที่มอบให้กับ โปรโมชั่น gclub