TL;DR: I built this classic "Snake Game" using React, HTML Canvas, and TypeScript. No third-party libraries are used.
- Play the Game: https://snakes-game-nine.vercel.app/
- Source Code: https://github.com/menard-codes/snakes-game
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
- 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
Top comments (21)
Well done, it was a good one! :) The snake was a bit too slow though, took a while to reach my high score.
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😁
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.
Oh, yah you're right! Thanks for the heads-up 😁 I'll fix these the next time I have free time again
Thanks😁
Great but not working in mobile devices.
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😅
I love this so much!
Thanks! I'm glad you liked it😁😊
It would be easier to make that game in plane JS but this is a good exercise.
Well done!
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🤓
Wow !!
This is awesome.
Thanks 😁
Thanks 😁😁
Thanks! 😁
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?
Hi Michael,
Yes, you can control the speed.
this.staggerFrame on line 53 in SnakeGame.ts controls the frame rate.
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
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:
Sorry for impolite.
Some comments have been hidden by the post's author - find out more