A browser-based TypeScript implementation of the classic retro game, Snake (Wikipedia)

Click here to play the game

Game features implemented so far are:

1. Mobile responsive layout
2. Keyboard / mouse / touch controls
3. Persistent high scores

A non-UML class diagram for the Snake game is as follows:

The game was implemented in HTML, CSS and TypeScript using Visual Studio 2019 as the development IDE.

The HighScoresProvider interface has been implemented twice, namely an in-memory (non-persistent) provider and also a (persistent) webservice provider.

The in-memory provider has been configured as the default provider in the checked-in codebase. This allows the Snake game to be standalone and work 'out of the box' should you build and run a forked / cloned repo.

You will need to implement your own webservice implementation (or similar) should you want persistent high scores between games and between users.

The specific provider to use is defined in code through a poor man's DI located in the app.ts file, namely:

    //Load the correct high scores provider here:
    const highScoresProvider: HighScoresProviderInterface = new HighScoresMemoryProvider(
        [
            new HighScore("FDR", 10),
            new HighScore("HGR", 7),
            new HighScore("SRR", 2)
        ]
        );
        
    //const highScoresProvider: HighScoresProviderInterface = new HighScoresWebServiceProvider(
    //    'http://localhost/SnakeWebAPI/api/Snake/GetHighScores',
    //    'http://localhost/SnakeWebAPI/api/Snake/SaveHighScore'
    //);

A comprehensive suite of unit tests have been written against the materially important classes to validate a lot of the game logic. Classes have been split out into separate TS files and loaded when needed through the RequireJS framework. The use of separate type files have allowed unit tests to be easily written against individual classes. Jest unit test framework was selected and remains a good choice due to ease of use and breadth of functionality. Both RequireJS and Jest were installed with NPM (Node Package Manager).

1. Make the Snake's length grow upon eating each apple [Done - 21 January 2021]
2. Collision detection of the snake upon itself [Done - 21 January 2021]
3. Unit testing (of TypeScript classes) [Done - 20 January 2021]
4. GitHub post commit hook to execute unit tests
5. Persist high scores in a database with the help of a ASP.Net Web API service [Done - 22 February 2021]
6. Give the snake a timer and make it autonomous; redraw the Html canvas on browser screen refresh event
7. Implement a proper config file option (example)

The following resources came in handy when implementing the game:

• Tutorial: Create an ASP.NET Core app with TypeScript in Visual Studio
• Getting the Right Set Up for TypeScript
• Multiple files making up Type Script project
• Can you create Typescript packages? like c# dlls

• Canvas Animations in TypeScript
• Using Touch Events with the HTML5 Canvas
• Event Creation and Handling Techniques in TypeScript

• HOW TO GET STARTED WITH REQUIREJS
• Using RequireJS with Visual Studio
• What's the correct way to use requireJS with typescript?
• How to use npm installed requireJS for browser

• ts-jest
• Unit Testing with Typescript and Jest
• Jest - TypeScript Deep Dive

• The TypeScript Handbook
• Using ESLint with TypeScript in 2019
• How to upgrade the version of ESLint used in Visual Studio 2019?
• Custom error class in TypeScript
• How do I cast a JSON Object to a TypeScript class?
• JavaScript Obfuscator Tool

Royalty free Snake logo courtesy of CLEANPNG