DEV Community

Cover image for I built a Snake Game in React
Menard Maranan
Menard Maranan

Posted on

I built a Snake Game in React

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

Snakes Game Demo


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

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

Top comments (19)

Collapse
 
perssondennis profile image
Dennis Persson

Well done, it was a good one! :) The snake was a bit too slow though, took a while to reach my high score.

Image description

Collapse
 
menard_codes profile image
Menard Maranan • Edited

LMAO 😂 I see what you did there😂
but yah I agree, the snake seems to be slow, my bros also told me that. I think it's my logic or the way I implemented it. But I'll give myself a pass, lol. This being the first-ever game I made which I built like it's a hackathon project😂
Thanks for trying it though😁

Collapse
 
artxe2 profile image
Yeom suyun

Using RAF for animation speed is a misuse.
The snake is too fast to control on my 240hz monitor.
But it was definitely slow when I changed it to 100hz.
You should check the time with Date.now inside RAF and move 1 step every certain ms.

Thread Thread
 
menard_codes profile image
Menard Maranan • Edited

Oh, yah you're right! Thanks for the heads-up 😁 I'll fix these the next time I have free time again

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
menard_codes profile image
Menard Maranan

Thanks😁

Collapse
 
yogini16 profile image
yogini16

Wow !!
This is awesome.

Collapse
 
menard_codes profile image
Menard Maranan

Thanks 😁

Collapse
 
slobodan4nista profile image
Slobi

It would be easier to make that game in plane JS but this is a good exercise.
Well done!

Collapse
 
menard_codes profile image
Menard Maranan

Thanks😁
Yah I agree. I also have thought of that while conceptualizing, as I mentioned in this blog.
But I took this as a challenge because I've never worked on a React project with complex Canvas logic like this. So I thought, why not give it a try🤓

Collapse
 
anurag_nagar profile image
Anurag Nagar

Great but not working in mobile devices.

Collapse
 
menard_codes profile image
Menard Maranan

oh yah, I didn't intentionally make it work for mobile, I guess it would be more complicated for a simple side project I hacked on a random weekend😅

Collapse
 
manchicken profile image
Mike Stemle

I love this so much!

Collapse
 
menard_codes profile image
Menard Maranan

Thanks! I'm glad you liked it😁😊

Collapse
 
marthasimons profile image
marthasimons • Edited

Thanks 😁😁

Collapse
 
menard_codes profile image
Menard Maranan

Thanks! 😁

Collapse
 
michael_lev_dbf1756aeed4c profile image
Michael Lev

I succeeded installing yarn and running your app by it, so now I can learn your nice app.
For me, the snake is a little too fast... Can I control its speed?
I'm new to both npm and yarn...
Can you explain a little about both, the differences between npm and yarn and what are the start points for each of them?
and can you describe what to do if I want to use npm instead?
Also I regularly use Visual Studio professional. Is VsCode better?

Collapse
 
torukmakto profile image
Evgeni Rovinsky • Edited

Hi Michael,

Yes, you can control the speed.

this.staggerFrame on line 53 in SnakeGame.ts controls the frame rate.

  • To make it slower set a bigger number.
  • To make it faster set a smaller number.

You can also control the size of the board
this.numOfRowsAndCols on line 45

If you set a bigger size in columns and rows, you would probably want to increase the canvas size in pixels. You can change canvasSidesLength on line 26 in SnakeBoard.tsx

I will leave it to the author to answer the rest.

Cheers,
Evgeni

Collapse
 
almandar profile image
Info Comment hidden by post author - thread only accessible via permalink
Almandar Sabirov

We will soon admire and be amazed at this progression of a programmer’s ability to write any text in principle.

The steps are as follows:

  1. Oh cool, you wrote a function to calculate factorial recursively!
  2. Oh cool, you wrote a function to calculate factorial.
  3. Oh cool, you wrote a function.
  4. Oh cool, you wrote something.
  5. Oh cool!

Sorry for impolite.

Some comments have been hidden by the post's author - find out more