I built a Snake Game in React
Tags: react, typescript, javascript, html
Published: 2023-11-05 09:46:44

> **TL;DR**: I built this classic "Snake Game" using React, HTML Canvas, and TypeScript. No third-party libraries are used.

![Snakes Game Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4cckb14n3ybopapbtqf.gif)

- **Play the Game**: https://snakes-game-nine.vercel.app/
- **Source Code**: https://github.com/menard-codes/snakes-game

<hr />

## Background Story

While I was bored and lying on the swing the other day, a random thought just went into my head. I remember back in the days that I used to play this Snakes game on a Nokia phone. So I wondered how could I build a game like this🤔.

Web development is my thing, I'm not a game dev and I never built a game before, so this would be a challenge.

But tackling a challenge is also my thing.

So I sat there for a couple of hours conceptualizing this possibly *'new project'* to see if I could pull this up. I wrote down my ideas and the structure of the project on my phone, as well as some pseudocode.

After pondering about it for a while, I think I can build this thing and I have a rough concept in my phone, with all the game logic ready to be implemented and tested if this idea works.

## Development Time

I was excited to start this project. So I brought my phone with my concept in it, went to my computer, and opened VS Code.

I've thought of what tech should I use. Welp, I don't think I have lots of choices, I only know React (as I said, I'm just a web developer 😅). But since the game will be implemented primarily using HTML Canvas, I thought React would be optional as I can build this without a framework. But still, I pushed on as I hadn't built a React project before with this complex Canvas Element logic, so I gave it a try.

Of course, I used TypeScript😉.

And ohh, no CSS libraries. A plain 'ol CSS would do the trick since the UI won't be too complex and the components that I will style won't be that much.

After several hours of coding (and tons of debugging), I finally managed to implement the game logic and my idea came to fruition. It's rough to the edges but the game is already working.

This is the first game I made and the joy of making it work is priceless. It was just an idea moments ago and now I'm already playing it.

Anyway, I'm also a bit tired at this moment so I continued the other day.

So on the next day, I spent most of my hours fixing several bugs in the code. I also added some new features, like the scoring, high score, and pause/play.

Then it's finished. I was so ecstatic. I showed it to my brothers and let them play for a while (and also to check if they might encounter some bugs, which they actually did).

After fixing those minor bugs and making the game fully working, I hosted it on Vercel and wrote this blog.

## Demo

![Snakes Game Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4cckb14n3ybopapbtqf.gif)

- **Play the Game**: https://snakes-game-nine.vercel.app/
- **Source Code**: https://github.com/menard-codes/snakes-game

## Features

- Classic Snake gameplay
- Score tracking
- Saves HighScore
- Game over screen with the option to restart
- Keyboard controls for navigation

## Tech Stack

- React.js and HTML Canvas
- TypeScript for type safety
- No third-party libraries used

## 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 on the screen