Understanding Angular with Tetris

For this week’s post I read through Michael Karén’s article, “Game Development: Tetris in Angular.” As the name suggests, this article demonstrates how to make a Tetris game in Angular. This is a great example project that shows many of Angular’s functionalities without being too complex. It covers topics introduced in CS 343: components and templates, and other topics like styles and event listeners. The author’s project code can be viewed on GitHub for further examination.

The project contains three components (with @Component decorator): app, board, and piece. The app component is the main component that uses the board component as a template. The board component handles the board UI and injects the game logic from GameService. And lastly, the piece component handles the UI and properties of the Tetris pieces.

Templates are used in two ways in Karén’s game. The app-root which uses another component as its template by using the custom tag <game-board></game-board>. The game-board uses a URL as a template, which is defined in the board component’s HTML file. This HTML file defines how both game-board and, by extension, app-root are rendered on the page.

The injectable class (with @Injectable decorator) game.service contains much of the game logic. As an injectable, game.service’s methods are accessible to board.component when game.service is injected in board.component, located at the example code’s line 72 with “constructor(private service: GameService) {}.” This is useful as it is cleaner to separate the responsibility of the game logic and the UI logic from each other.

The styles are defined in a Cascading Style Sheet or CSS file. The CSS file is used to define how some of the HTML elements are designed. CSS makes HTML design simpler with its more intuitive interface.

I learned a new decorator from this article, @HostListener. This decorator can be used to define the program’s response to user interaction. In this article’s project uses @HostListener to define how the game board responds to the specified keystrokes.

The JSON methods stringify and parse were also new to me. JSON.stringify will convert an object into a string. JSON.parse on the other hand, converts a string into a JSON object.

Reading through this article and examining the project’s code has helped my understanding of Angular and HTML tremendously. I recommend Michael Karén’s article, “Game Development: Tetris in Angular,” to those who are looking for a fun example of an Angular program.  Being able to see all the parts of the program and how they work together has made Angular more accessible for me and has provided an excellent resource for possible projects in the future.

Article referenced:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: