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.

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)



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:

  • Everything has a different speed and those speeds vary depending on level (and where you are in the level). PacMan travels at a different speed to the ghosts (initially, a very small difference), but later levels the difference increases.  PacMan’s speed changes when he’s eating pills, which is barely noticeable unless a ghost is 5 pixels from your rear!
  • Cornering – Related to the different speeds of things is the technique of ‘cornering’: PacMan can gain a very slight speed increase over the ghosts by selecting the direction a couple of pixels before the turn:

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

  • Ghost patterns: ghosts are either chasing PacMan or returning to their ‘home corner’.  Every level has a different duration to the patterns.  I used this page for all the timings in the game and this page to understand where the ghosts should go.
  • BUGS! There are a few bugs in the original PacMan.  As far as I know, I replicated all but one bug (the kill screen bug) (but I’m sure I introduced a few of my own to make up for it!).  Bugs deliberately programmed in include the ghost house bug (where it’s possible to keep 3 ghosts from entering the maze for the whole level), and the bug where ghosts can (very rarely) change direction just before they eat PacMan.
  • Ghost eyes: ghost’s eyes look at where they’re going next. If they’re heading for a T-junction, they’ll either look left or right just before they get there.  If you’re very quick, you can use this to your advantage.  This is very subtle.  I’ve played PacMan for years and only recently discovered this.
  • Cutscenes: These are intermission screens that appear after certain levels.  They tell a ‘story’ that reveals the true identity of the ghosts!

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:

  • The loading screen to show the progress of script and asset loading
  • Audio issues – sound played on the PC but didn’t play on mobile devices. I ended up using the super Howler library
  • Control Panel – needed a control panel where users could ‘insert coins’ and select the number of players by clicking/touching (during development it was all keyboard based)
  • Touch/swipe – needing to handle touch/swipe correctly for tablets and phones
  • Sound – not playing on mobile devices until touched

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.

Problems with CSS and themes when using ASP.NET Forms Authentication

A while back, I wrote a blog post about how turning on Forms Authentication caused problems with stylesheets and Themes.  A lot of people found this post useful but had trouble finding it.  One reader suggested I change the title to get more hits.  So, I did, and this is it. 

ReSharper for Visual Studio 2010

rs I don’t know how I missed this for so long, but JetBrains have released a preview of ReSharper for Visual Studio 2010! They say this version is neither 4.5.1 nor 5.0, but a preview build with some of the new 5.0 features enabled.

Looking at the nightly builds, it seems that the first release was 9th July, but there was no news on their blog, which I’ve been checking daily since June (when they said it’d be ready).

Anyway, now I can give Visual Studio 2010 another try.  I just couldn’t use it, not even for evaluation, without ReSharper!

Also, let’s not forget that version 4.5.1 for Visual Studio 2005 and 2008 is also now available.

Google Squared and sexy languages!

Google Squared looks like an interesting tool. 

“Google Squared is a search tool that helps you quickly build a collection of facts from the Web for any topic you specify.

  • Facts about your topic are organized as a table of items and attributes (we call them "Squares" for fun).
  • Customize these Squares to see just the items and attributes you’re interested in.
  • See the websites that served as sources for the information in your Square.
  • Save and share Squares with others.”


There’s some interesting results.  I searched for ‘programming languages’

It displays a list of languages, a picture of the language, a description, and what it was influenced by.

I was very surprised to see the Miranda language (apparently influenced by Haskell).  Try it yourself:  scroll down to Miranda.  I must take a closer look at this one!

limbo Another one that might get you excited is Limbo.  Scroll down and take a look (but be careful if you’re at work!!). Apparently influenced from Stackless Python.  I’d say more like alcohol!

Updated: Tree Trim

Tree Trim is a command line tool that trims your source code tree.  It removes debug files, source control bindings, and temporary files.

It’s integrated with Windows Explorer: when you right click a folder you’re given the option to clean the folder.

Massive thanks to Scott Hanselman for blogging about it and for providing some great and detailed feedback.

If you’re interested in doing your own Tree Trim plugin, there’s now a Wiki page to take you through the process.  If you’d like to contribute your plugin or fix any issues, then take a look at this page.

New tool: TreeTrim

hammer I’ve recently been working on a tool based on Jeff Atwoods Clean Sources Plus

It’s called TreeTrim.  It’s a tool that strips out debug files and folders in your source code tree and also zips and emails amongst other things.

One of the BIG requests for CleanSourcePlus (well, amongst the 5 people in the comments section of the tool’s page!) is for the tool to make a working copy of your source before it deletes and zips.  TreeTrim does this.

It’s plug-in based, so if it doesn’t do something that you want, you can write your own plug-in, plonk it in the directory, and have the tool run it alongside the other plugins.

The installer and source code is available for download at http://code.google.com/p/treetrim/