Shallow Thought – an Angular chess player

Update (March 2023): I’ve refreshed this for Angular 15. I didn’t have to make tons of changes, but I found it easiest to start over with a blank Angular 15 app and copy my code into it. Then I had to update a couple of things in the way I hook up the engine, to accommodate changes in Angular’s web workers.

It’s been a long time, but I’m back with another of my dinky code demos.  This time it’s that old classic, the chess engine.  For extra fun, we’re going to build it in TypeScript to run in the browser and we’ll give it an Angular 2 UI so you can play against it.

All the source code is on GitHub and can be found here.

I’m going to post a few articles here looking at what’s going on in the code.  Hopefully there will be something here to interest a variety of readers, so the articles will be split across the different topics.  You might want to know about the basics of computer chess, or the basics of Angular/TypeScript, or even the basics of web workers (i.e. background threads).  In any case, the key word here is basic.  This is not an advanced study of anything and as usual I’m not an expert on any of these topics.  I just like writing code.  Especially on the chess engine side, this discussion will be aimed at beginners.  I do assume that you know how to play chess and you know the algebraic notation.

The articles

1. How to make your computer play chess
2. Chess engine code – laying the groundwork
3. Chess engine code – running in the background
4. Chess engine code – minimax
5. Chess engine code – the evaluation function
6. Angular 2 components – piece
7. Angular 2 directive – square

The code

The interesting parts of the code are in the /src/app/engine and /src/app/ui folders:

/src/app/engine

• ChessElements.ts and MoveGenerator.ts (discussed in this article).
• Evaluation.ts (discussed in this article and this article).

/src/app/ui

• piece.component.ts (discussed in this article).
• square.component.ts (discussed in this article).

Advertisement