The main idea was to create my own game logic without using canvas or any side game library. Snake 🐍 mechanics is written with help of custom written hooks. So the whole game engine is just written with pure js and react. Below you can find more information about how this whole mechanism works.

All logic is broken down into several hooks: useSnakeMotion, useSnakeHasFailed, useSnakeColor, useRandomFoodCoordinate, useLastControlKeyPressed. And the main hook useSnake simply combines the work of above hooks.

Then GameplayScreen component calls useSnake hook

const snakeData = useSnake();

So snakeData contains all the information needed to render the whole game snake logic in UI. The snakeData is rendered on the special ui grid.

The grid is just a matrix with a size of 144 elements:

const sizeOfMatrix: number = 144;
const matrix: Array<number> = [...Array(sizeOfMatrix)].map((el, i) => i);

1. npm install - install all dependencies
2. npm start - start a project

• React
• Redux Toolkit
• Typescript