30 Aug 2023 - by 'Maurits van der Schee'
Although one can create Canvas based games, one can also create DOM based games (as I did). This is especially suitable for board games as these tend to have a fairly static layout. The advantage of DOM based games is that your sprites can move over and under each other by means of the "z-index", without having to do programmatic redraws. I also like the SVG support and that I can create my graphics using either Inkscape or hand-written SVG.
I've installed the TypeScript compiler using "nvm" (Node Version Manager):
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install node
npm install typescript live-server
I use the following file and folder structure:
To run the compiler I typed:
To run the live server I ran:
node_modules/live-server/live-server.js --mount=/src:src web
I have found that this command can be configured in "scripts" section of the "package.json". I have also configured the "tsconfig.json" using:
And loaded the "require.js" library, finally having to just add one line to my HTML to get started:
Corresponding to the startup code in the "index.ts" file in the "src" directory. I have found that Visual Studio Code and it's TypeScript extension by Microsoft provides a very nice developer experience.
I use the factory pattern with an abstract base class with a static create function returning a class extending the base class. The Typescript compiler gave the following cryptic error message:
TypeError: Class extends value undefined is not a function or null
According to this StackOverflow post the error is caused by a circular dependency. The classes extend the base class and the base class imports the classes to call their constructor in the static create method.
I'm running into the same problem. The Factory Pattern is causing a circular reference. It seems that moving the factory to another file (and not a static method inside of a class that gets inherited) is the way to go. – Johnny Oshika
This pattern is quite common and the error was not very descriptive. According to this Medium post you can fix the problem by adding all classes to the same typescript file (in different ways), but most people suggest to avoid circular dependencies, which is what I've chosen to do.
Do you want to start writing your own games? Check out my next post: TicTacToe in TypeScript, which can serve as a simple starter project. You can find the source code of the starter project on my Github account: