Build Game App Tetris Clone with Angular

This is the first of (hopefully) many parts on game development with Angular. The first part will give you some background on the project I’m working on.

A few months ago, my wife was complaining that she could not find a good Tetris version for Xbox. “You are a software developer”, she said. “Can’t you just create one?”.

“Why not?” I said to myself. “it can’t be that hard!”. This seemed like an interesting challenge. So I quickly googled a few articles on game development for Xbox. I soon discovered that to get something onto the Xbox, I would either need to publish it through the store, or I would have to put my Xbox in a developer mode, which (as far as I understand) means that I would not be able to play “normal” games from the store anymore while developer mode is turned on. I would also have to use tools and frameworks that I don’t want to dig into right now, and which would not provide useful new knowledge that I could apply at work.

Then I remembered that the Xbox also has a browser. Unfortunately, it’s just Edge (the old one, not the new Chrome-based Edge). But hey, at least it’s not IE! So if I just create my game as a browser game, I won’t have to go through the store, and I won’t have to use developer mode. Also, I can use tools and technologies that I also use at work.

I decided to simply use Angular, since that’s what we currently use at Diamant Software to create our shiny new user interface.

Game development is different from developing user interfaces for an accounting application, so even though I’m not using a new framework, there is still enough new stuff for me to learn.

Some legal side note: The name “Tetris®” is owned by The Tetris Company. As far as I understand (I’m not a lawyer), they own the name “Tetris”, but the basic game idea is not protected by trademarks or copyright. So as long as I don’t call my game “Tetris”, I should be on the safe side. Besides, I’m not putting it in any app store and mainly use the game as example for my blog posts. Writing articles on how to create a game should not be that much different from all the “how to play XYZ on guitar” tutorials on YouTube (by the way, there even is a “Tetris Theme — Beginner guitar lesson” video).

So what should I call my game? For now, I choose to name it “Korobeiniki” as a working title. That’s the name of the Russian folk song that the Tetris theme is based on (I already regret that choice, as I can never remember how to spell it).

Before I started to write code, I first had to research the details of the T̶e̶t̶r̶i̶s̶ Korobeiniki game mechanics. This turned out to be surprisingly easy, as there is some kind of official guidance that official Tetris games will need to follow. This guidance was published in several Tetris wikis, for example here.

The most important part of that guidance is something called the “super rotation system”, which explains how a tetromino (your game piece) behaves when you rotate it, especially when you rotate it near other blocks where it might end up in used space after rotation. Getting this behavior right is important to make my own game “feel” like a Tetris clone.

The guidance contains many other interesting aspects, even details on input controls (which key does what) or scoring. I don’t plan to follow every detail to the letter, as I want to add some of my own ideas to the game.

In this post, I gave you some background on why I started to create my own game, and how I researched all the necessary little details of the game mechanics.

Some of the topics I might discuss in the upcoming posts are (No promises! maybe I’m lazy or busy and this will be the only part I ever publish):

• How to download and build the game
• Overall architecture of the game (Applying “Clean Architecture” to Tetris)
• Creating a game loop
• Using game-pads in a browser application
• Working with sound effects and music
• Rendering the game using Angular components
• How to optimize the game so that it always runs at 60 fps

Let me know in the comments which topics you are interested in reading about.

Hopefully I made you curious and you now want to get the source? You can download it from my github repository, https://github.com/oocx/korobeiniki

I won’t release a prebuilt version — if you want to play, you need to build it yourself :).

The README.md contains instructions on how to build and run the game. I assume that you are already somewhat familiar with Angular development, so you should be able to get started quickly. If not, let me know, and I’ll write another post to help beginners to setup a dev environment and build the code.

#angular #javascript #programming