TicTacToe in TypeScript

31 Aug 2023 - by 'Maurits van der Schee'

In my last post I've told you about how I'm writing (simple) games in TypeScript. In this post I'll share the source code of a Simple TicTacToe game I rewrote in TypeScript. I'm using Visual Studio Code and the TypeScript plugin. I'm working on Linux, but on Windows you should be able to use the same instructions within the WSL2 environment.

Quick start

Type the following commands to get started:

git clone git@github.com:mevdschee/typescript-tictactoe.git
cd typescript-tictactoe
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install node
npm install
npm run dev

Now use Visual Studio Code (with the TypeScript extension) to edit the content and see how the code is recompiled and the browser is reloaded when the code is saved.

RequireJS

I've chosen to compile all TypeScript modules into one single JavaScript file (AMD format) and RequireJS to load the Javascript. I like the idea of all code being in a single Javascript file. Same goes for my sprites: I like to combine them in some form of spritemap (either SVG or PNG). I don't think that it is really needed as fetching extra resources is less expensive in newer HTTP protocols. Note that RequireJS loads it's modules after the document is loaded, so don't wait for a document or window "load" event.

Starter project

By implementing TicTacToe I tried to make a small starter project for your/my own games. By cloning this starter you should be able to create more complex games. Check out AceCardGames.com to get an idea of what you could be building and clone this project to get creative with your own ideas and designs.

Source: https://github.com/mevdschee/typescript-tictactoe

Enjoy!

PS: Liked this article? Please share it on Facebook, Twitter or LinkedIn.

TQ
dev.com