Tetris

Introduction

This is a rebuild of my previous (successful) attempt to create a Tetris like game. The goal of this rebuild is to get acquainted with some TypeScript/JavaScript techniques and patterns. Some of these are:

• Web componnents
• Decorators
• Finite state machine
• Dependency injection
• Observables
• Lenses
• Routing

A note for everyone that is thinking why doesn't he just use framework x of library z? The goal is not the game itself, but the journey. I want to learn how to create and implement certain patterns. The best way for me to learn these concepts is to create it myself.

The project will be created with vanilla JavaScript TypeScript.

The result (a work in progress) can be found here

Setup

The project is build with TypeScript and won't have any dependencies, of course it has a few dev-dependencies.

For the bundling I use Webpack and for testing Karma.

These are the npm commands you can use:

• npm run lint, lint all files. The config is based on tslint-microsoft-contrib.
• npm run test, run all unit tests in a headless Chrome browser.
• npm run build, compile and bundle all files to es6 JavaScript.
• npm run dev, start a development server on port 5000.

Phases

The project will be created in phases.

• Web components, I want to use Custom elements with shadow DOM and HTML templates.
• Use decorators to make it easier to create a Web component.
• Use a Finite state machine to ensure the flow through the pages.
• The pages will share services that need to be singletons, they will be available through Dependency injection.
• Observables the DOM events that will control the game will be available as streams.
• A Store to store the state of the game.
• Color manipulation to create darker and lighter colors from a given color. This will be used to draw the Tetrominos.
• Canvas for rendering the game.

The old project

The code of the old project can be found in the release/1.x branch. The result can be found here here.