/react-snake

An implementation of the Snake game in React.

Primary LanguageTypeScript

React Snake

About

React Snake is my implementation of the popular video game, Snake, and it is also my first ever personal front-end project. Originally, I have made it using vanilla Javascript and React, and, while the game functionalities were working, I was unsatisfied with the structure of my code as it was difficult to follow where and how the state changes. Consequently, I have refactored and improved my code using Typescript and Redux, resulting a more structured and predictable codebase.

Game features

The game includes 2 modes: with and without borders. The first mode is the default mode in which the game resets when the player (snake) hits the borders of the game grid. In the second mode the player teleports to the opposite side of the grid once they touch a border.

The player's score increases when they consume the fruit, and the game saves the high score using local storage so that it doesn't get lost when page gets refreshed or the browser gets closed.

You can control the movement of the snake using the A, W, S, D, and the arrow keys.

Tech stack

  • Typescript
  • React
  • Redux

Installation

git clone https://github.com/skorotky/react-snake.git
cd react-snake
npm i
npm run dev

This will serve the project at http://localhost:5173/