Flex Tetris Tutorial
Introduction + Game + Download
Overview of Implementation
Conceptual Implementation
The Game Loop
The Game Master Component
Responding to User Input
The Player Controls Component
The Game Painter Component
 
TheTetrisGame.mxml
GameModel.as
Board.as
Block.as
GameMaster.as
GamePainter.as
PlayerControls.as
 


Flex Tetris Tutorial

By Jakob Jenkov

Bookmark at Del.icio.us

In august 2008 I started studying Adobe Flex which is a Rich Internet Application platform. In other words, Flex is a platform for developing more advanced GUI's (rich clients) for web applications, than you can do with HTML / JavaScript. Flex is compiled into Flash, by the way, so you can everything in Flex, you can do in Flash.

I was quickly impressed with the power, flexibility and yet simplicity of Flex, compared to developing GUI's in Java Swing or SWT. It has many solutions to problems I had come across with both Swing and SWT. For instance, a much more advanced event handling model than found in either Swing or SWT. If you are new to Flex you can read more about it here:

Adobe Flex

flex.org

I wanted to learn more Flex, and figured that I needed a case. Having thought about a few different cases, my thoughts fell on Tetris! The ever-popular game developed by Alexey Pajitnov in 1985, which has spread to nearly every platform capable of running games, and known by the majority of serious computer players around the world. I had always wanted to write a game some day, so the more I thought about implementing Tetris, the more motivated I got.

Having finally implemented a first version in oct. 2008 (try it below), I decided to share the code and how I did it with everyone interested, via this tutorial website. The texts may be expanded, new texts added, and the code may change as I polish the game, and learn new tricks in Flex. So check back from time to time, to check for updates. Or better yet: Subscribe to the RSS feed and get the news immediately when new texts are published in this tutorial trail. If you have any comments to this tutorial or the code, feel free to send me an email. You can find the contact details on the About page.


Download the Tetris Flex Code

You can download the Tetris game Flex code by clicking the link below:

Download Flex Tetris Game Code (v. 1.0.12)


Try the Tetris Game!

Below you can try out the tetris game as it looks now.

To Play Tetris:

Click mouse on game board to give Flash component focus.

Press Return key to start/restart game.

Arrow left / right moves blocks left / right.

Arrow up / down rotates blocks.

Space moves blocks faster down.

P pauses the game.

Below is a list of the individual texts in this tutorial. This list can also be found in the right side of the page at all times, on all pages / texts.

Flex Tetris Tutorial
Introduction + Game + Download
Overview of Implementation
Conceptual Implementation
The Game Loop
The Game Master Component
Responding to User Input
The Player Controls Component
The Game Painter Component
 
TheTetrisGame.mxml
GameModel.as
Board.as
Block.as
GameMaster.as
GamePainter.as
PlayerControls.as
 

Connect with me:
     
Newsletter - Get all my free tips!