DEV Community

I built a Snake Game in React

Menard Maranan on November 05, 2023

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

Read full post

Dennis Persson • Nov 5 '23

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

Menard Maranan • Nov 5 '23 • 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😁

Yeom suyun • Nov 5 '23

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.

Menard Maranan • Nov 5 '23 • Edited

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

Mike Stemle • Nov 5 '23

I love this so much!

Menard Maranan • Nov 5 '23

Thanks! I'm glad you liked it😁😊

Anurag Nagar • Nov 9 '23

Great but not working in mobile devices.

Menard Maranan • Nov 10 '23

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😅

Slobi • Nov 5 '23

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

Menard Maranan • Nov 6 '23

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🤓

Comment deleted

Menard Maranan • Nov 5 '23

Thanks😁

yogini16 • Nov 7 '23

Wow !!
This is awesome.

Menard Maranan • Nov 7 '23

Thanks 😁

marthasimons • Nov 14 '23 • Edited

Thanks 😁😁

Menard Maranan • Nov 5 '23

Thanks! 😁

Michael Lev • Dec 3 '23

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?

Evgeni Rovinsky • Mar 14 • 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