Dart Project - Building a Client Side Tetris Game - Part One

Repository

https://github.com/dart-lang/sdk

What Will I Learn?

• You will learn how to model points on a graph
• You will learn how to make generalized classes
• You will learn how to model items on HTML canvas
• You will learn how to model tetrominoes
• You will learn about Dart's Library system and the part/part of keyword
• You will learn how to use Stagehand and Webdev

Requirements

System Requirements:

• IDEA intellij or Visual Studio Code with the Dart Plugins
• The Dart SDK

OS Support for Dart:

• Windows
• macOS
• Linux

Required Knowledge

• The Dart SDK
• A Dart supported text editor (Dart Pad can be used)
• A little time to sit and watch a video and some patience to learn the language

Resources for Dart:

• Dart Website: https://www.dartlang.org/
• Dart Official Documentation: https://www.dartlang.org/guides/language/language-tour
• Dart GitHub repository: https://github.com/dart-lang/sdk
• Awesome Dart GitHub Repository: https://github.com/yissachar/awesome-dart
• Pub website: https://pub.dartlang.org

Sources:

Dart Logo (Google): https://www.dartlang.org/

Difficulty

• Intermediate

Description

In this Dart Tutorial Video, we build the model layer for a client side Tetris game. This includes modeling the tiles which make up the Tetromino blocks, the Tetromino blocks themselves as well as the different kinds of tetrominoes. We look at the Dart library system and we take a look at how we can generalize these models for use on an HTML canvas game board.

Setting Up a Library in Dart

Dart has a fairly prolific library system that allows users to combine multiple files into one single file. The main purpose of this system is to give the developer an ability to organize their code in a nice idiomatic way. To create a library, you must first define a root library file. This root file contains any imports that you will need in your other files. It also contains part statements which attach directly to the other files in the library. Each of the extra library files must also contain a part of statement at the top of the file so that the virtual machine knows that its a part of the library.

In our project, we defined a library called Tetris. This library contains all of the logic and models for the game that we are building. As you can see in this image, we have three primary imports; dart:html, dart:async and dart:math. All of these imports are exposed to any file that is declared as a part of this tetris library. Below the imports, we have the part declarations which combine all of the other files into one large file. This also means that anything defined in one of the other library files is exposed to another library file; in other words, we can access our models without having to explicitly import them.

Building Tetrominoes from Tiles and Points on a Grid

Tetris as a game is defined by its pieces. There are seven pieces that are used in Tetris with each piece being made up of four blocks. These four block sized pieces are called Tetrominoes. The seven Tetrominoes are designated by letters that look similar to their shapes; the I piece, the L piece, the J piece, the Z piece, the S piece, the O piece and the T piece. Because all of the Tetrominoes share certain properties, we can create a generalized class and then extend it for each of these seven pieces.

The class defined in the image above represents the I piece for our game. The class extends the generic Block class which contains a list of tiles of length four, a color string and a center of rotation tile. The Block class also contains three methods, one to help it move and two to rotate the blocks either to the right or to the left. With the IBlock class specifically, we use the constructor to define how the block will look on the HTML canvas game board. Because the block is just a horizontal bar, we want it to have constant y values for each of its tiles. It's x coordinates are incremented around the middle of the screen so that the block will drop from that point when it is spawned. Also, the IBlock will be a cyan color in our game.

The Source Code for this video may be found here: https://github.com/tensor-programming/dart-tetris

Video Tutorial

Curriculum

• A Beginners Guide to Dart - Scope, Iterators, Functional Programming and Collections - Part Six
• A Beginners Guide to Dart - Inheritance, Abstract Classes, Interfaces, Mixins and Casting - Part Five
• A Beginners Guide to Dart - Methods, Final, Static, and Class Inheritance - Part Four
• A Beginners Guide to Dart - Intro to Classes and Objects - Part Three
• A Beginners Guide to Dart - Control Flow and Low Level Compilation - Part Two
• A Beginners Guide to Dart - Types, Functions, Variables and Objects - Part One