IlyaAgarishev / react-gameboy

Snake game written without canvas or any side game library. You have control buttons such as arrows and space. You can use your keyboard or mouse click. Also you can use tap on your smartophone to interect with UI.

React Gameboy 🐍🍎🎮

Play now: https://react-gameboy.netlify.app/

About

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 React. Below you can find more information about how this whole mechanism works.

You have control buttons such as arrows and space. You can use your keyboard or mouse click. Also you can use tap on your smartophone to interect with UI.

It's a good example how you can solve a hard task just using your imagination and creativity.

How it 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);

Fully mobile optimized:

My best score is 58! Can you beat my record ?

How to start locally

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

Technologies used

• React
• Redux Toolkit
• Typescript