DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A classic Snake game built using React.js, HTML Canvas, and TypeScript

Snake Game ๐Ÿ

A classic Snake game built using React.js, HTML Canvas, and TypeScript

A classic Snake game built using React.js, HTML Canvas, and TypeScript

A classic Snake game built using React.js, HTML Canvas, and TypeScript.

Demo

You can play the game online at Snake Game Demo.

Features

  • Classic Snake gameplay.
  • Built with React.js and HTML canvas.
  • No third-party libraries used.
  • TypeScript for type safety.
  • Responsive design.
  • Score tracking.
  • Saves HighScore
  • Game over screen with the option to restart.
  • Keyboard controls for navigation.

Getting Started

To run the game locally, follow these steps:

  1. Clone this repository:

  2. Navigate to the project directory:

  3. Install the required dependencies. Yarn is recommended:

  4. Run the build script:

  5. Start the game by serving the build output:

NOTE : The development environment causes the components to re-render, causing the game logic for the canvas to be duplicated and appear buggy. Thatโ€™s why itโ€™s recommended to build the app and run the build output to avoid the re-renders.

Game Controls

Use the arrow keys or W,A,S,D keys on your keyboard to control the snakeโ€™s direction:

  • โ†‘ (Up) or W โ€“ Move Up
  • โ†“ (Down) or S โ€“ Move Down
  • โ† (Left) or A โ€“ Move Left
  • โ†’ (Right) or D โ€“ Move Right

Others:

  • To Pause the game โ€“ Press esc or click anywhere the screen

License

This project is licensed under the MIT License โ€“ see the LICENSE file for details.

GitHub

View Github

Top comments (0)