Learning TypeScript by Writing a Game

Want to learn a new programming language? Tired of the usual Line-of-Business tutorials? Then write a game! I’ve always said that the best way to learn a new language is to write a game with it. You’ll come across many problems when writing a game that you just won’t experience by writing an app that selects product items from a customer’s order.

That’s what I did recently when I wanted to learn TypeScript. I decided to write a web-based version of PacMan. This post describes a bit about my goals. There’s nothing technical here; I may, at some point, describe the internals of the game and share the code.

**Update August 2017 – source code published and internals described**

My goals were to learn TypeScript and end up with a game that looked and played similar the original.

Here’s some comparison screenshots:

Arcade (Mame)

TypeScript

Arcade

TypeScript

Whilst learning the language, I didn’t want the overhead of also learning a game framework, so I chose to use the HTML canvas directly. This worked out well as the canvas is very simple to use.

The feedback cycle with the canvas is really quick: do the code changes and refresh the browser to see the results.

I used a combination of Visual Studio Code & node, and Visual Studio (2017) with IIS. I found debugging with Visual Studio 2017 easier than with Visual Studio Code (and of course, I also had ReSharper which works quite nicely with TypeScript although it’s not quite as fast and robust as it is with C#).

I found it quite easy to pick up TypeScript, probably because of its similarities with other C based languages. Like most languages, it’ll probably take years of use to master all of its nuances (my familiarity with the nuances of C# came from using it for years, and also from reading the fantastic More Effective C#).

In fact, I found that it was very quick and easy to get up and running in TypeScript. This was both good and bad: good because I could concentrate on the game more and worry less about the language, and bad because I could concentrate on the game more and worry less about the language!

There’s a fair bit to PacMan and I wanted mine to be as close to the original as possible. This included things such as:

This is very subtle but is critical in later levels; to evade faster ghosts, head to as many corners as possible until the ghost pattern changes (see below) – each corner gives PacMan a couple of pixels advantage of the ghost

I found that the game itself was only half the work. I wanted it to run on as many platforms and devices as possible (PCs, phones, tablets). A fair amount of work, after the game was finished, went into things like:

Overall, I think it was a good idea to write a game to learn TypeScript. Aside from the extra tasks involved after finishing writing the game, it was a quick way to learn the language with the added bonus of being able to visualise progress. Click here to play.


← Back to all posts

Based on the theme by Bradley Taunt.
View the Github repo.