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
 


Overview of Tetris Implementation in Flex

Connect with me:  
  Jenkov.com - News

NOTE: This text is part of a growing tutorial explaining how to implement Tetris in Adobe Flex. To be notified of new texts in the tutorial, subscribe to the RSS Feed.

In this text I will give you an overview of the components developed to implement the Tetris game in Flex. The implementation consists of the following components and concepts:


  • The Main Flex Application File

  • The Game Loop

  • The Game Model

  • The Game Master

  • The Player Input Response Code

  • The Player Controls

  • The Game Painter


I have tried to structure the implementation according to the model-view-control design pattern. This should be visible from the above concepts and components, and their division of responsibility. For instance, the "model" code is kept in the game model. The "view" is spread out between standard Flex UI components and the game painter which draws on some of these Flex UI components. The "control"'s are divided between the player input response code, the player controls component, and the game master component.


The Main Flex Application File

Every Flex application has a main application file. It is this file that is compiled into a Flash (.swf) file which can be displayed by the Flash player. The main Flex application file is called TheTetrisGame.mxml.

The main application file contains the game loop and the player input response code.

The Game Loop

The game loop is the loop controlling the game. While the game executes it keeps executing the game loop. Most of the rest of the code in the Tetris implementation is called from within the game loop. Only the code responding to the player input is not called from within the game loop, because of how Flex works. The game loop is located inside the main Flex application file, the file TheTetrisGame.mxml. The game loop is covered in more detail in the text The Game Loop.


The Game Model

The game model is logical model of the game. Even if the game model is implemented as a separate class, the GameModel.as, the game model is just an aggregation of more fine grained game model objects. Thus, it primarily serves as a central point of access to all game model objects.

The game model contains a model of the falling block and a model of the board the blocks are falling onto. The board and the block are modeled in their own files (classes), Board.as and Block.as.


The Game Master

The game master component is the component that controls all non-player objects and actions. If you have ever played role playing games back in the day when it was called "Dungeons & Dragons" (D&D), it was played around a table with one game master and N players. The game master made up a quest and world. The players controlled their characters according to the D&D rules and the quest and rulings of the game master. The game master then controlled all non-player creatures, the world, and any actions and events.

The game master component in this Tetris implementation is a bit inspired by the game master in the D&D games. All non-player logic is kept inside the game master, like the movement of the ghosts in Pacman, and the downward movement of the block in Tetris, score counting etc.

The game master component is described in more detail in the text The Game Master. The code for the GameMaster.as component is listed here: GameMaster.as


The Player Input Response Code

The player input response code is kept in the function onKeyDown() inside the main Flex application file. This code is described in more detail in the text Responding to User Input.


The Player Controls

The player controls component contains the logic executed as response to the user input. For instance, if the user presses arrow-left, the PlayerControls.tryMoveLeft() function is called. This function moves the block left if it is possible. The player controls component is described in more detail in the text Player Controls. The code for the PlayerControls.as class is listed here: PlayerControls.as.


The Game Painter

The game painter component paints the board and the block whenever they are changed. The repainting of the board and blocks are signaled by the game master component and the player controls componenet. The game painter component is described in more detail in the text The Game Painter. The code for the GamePainter.as class is listed here: GamePainter.as.


NextNext : Conceptual Implementation.

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