Making a puzzle game in Angular

Play the game here : Dots

I never really looked into Angular much over the past few years. It’s not that I have any strong opinions on it, I just never really got to it. Until recently, when it came up in a conversation and my hands started itching to give it a try.

Whenever I want to learn a new skill, I start with a few basic tutorials before coming up with a small practical project. This obviously doesn’t get me to expert-level knowledge, but the combination of theory and practical application gives me a good idea of the basics and it is a good starting point for a more formal learning approach. The Angular website has a great getting-started tutorial. As for a practice project, I came up with a small puzzle game.

The setup

Angular comes with a CLI tool that can get you up-and-running in no time. Installation can be done through NPM or your favorite packaging tool.

npm install -g @angular/cli

After that, run the Angular CLI tool’s new command.

ng new [project-name]

This command asks a few questions about the type of application you’re looking to make. I mostly went with the defaults, only selecting SCSS as a CSS preprocessor. After confirming the selected options it sets up a boilerplate application you can start with.

The game components

Angular uses components as its main building blocks. A component has as Typescript class with some Angular-specific decorations, a template file, and a SCSS file for styling. These last two can also be placed directly in the Typescript file, but I like having these elements split up into separate files to prevent spaghetti-code.

The game itself really only uses a single component for keeping track of the game’s state and rules and rendering the game board. There are also a small handful of plain Typescript classes to keep the Game component’s code clean. In a future version I might extract a few things from this main Game component into their own components.

Below is the structure of the Game component. As you can see it is a Typescript class with some Angular-specific configuration to tell Angular this is a component.

import { Component } from '@angular/core';

@Component({
  selector: 'game',
  imports: [],
  templateUrl: './game.html',
  styleUrl: './game.scss'
})

export class Game {
  ...
}

Fields and methods inside the Game class can be referenced in the template file. Below is part of game.html as an example.

@for (dot of dots; track dot.id) {
  <div 
    class="dot"
    [class.active]="dot.active"
    [class.alive]="dot.alive"
    [style.left.px]="dot.x * gridWidth"
    [style.top.px]="dot.y * gridWidth"
    (click)="makeMove(dot)">
  </div>
}

Dots is an array of Dot objects. These are the main game pieces that appear on the board. As you can see, in the template file you can loop over this array and render each piece as a div element. The piece’s state and position can be set as a class or style element. This enables me to move the pieces around in the Game class. It also hooks the click event up to the makeMove method in the Game class.

Building the project for release

Since I don’t have a backend in this project, I’ve set up my project to build as a browser application. There are many options in the Angular configuration, so I probably haven’t set it up in the most optimal way (any tips would be much appreciated).

My current build options:

"builder": "@angular-devkit/build-angular:browser",
"options": {
  "outputPath": "dist/dots",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": ["zone.js"],
  "tsConfig": "tsconfig.app.json",
  "inlineStyleLanguage": "scss",
  "assets": [
    {
      "glob": "**/*",
      "input": "public"
    }
  ],
  "styles": ["src/styles.scss"]
},

The verdict

My goal was to build a simple puzzle game as a starter-project in Angular. It took considerably less time to build than I expected, to be honest. Having a system in place where the state inside a Typescript class is tied directly to DOM elements is key in making this game work and using Angular means you don’t have to think about this part of the application at all.

With the CLI tool I got up-and-running in no time. It gave me a framework that already had a clean structure, with separate files for components/styling/templating. It even came pre-installed with a unit testing tool. All this means you can focus on building your application, rather than first having to write a lot of boilerplate code.

All in all, I’m quite impressed with Angular so far. I know I really only scratched the surface with this puzzle game, but it gave me a good idea of what Angular is about and whether I should dive deeper into it (which I will definitely be doing in the near future).

With that said, go enjoy the game Dots and if you happen to run into any issues, or if you have a tip for me to improve my Angular skills: contact me.