TL;DR: I built this classic "Snake Game" using React, HTML Canvas, and TypeScript. No third-party libraries are used.
Play the Game: https:/...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.
Woahh it was a good one and I appreciate the effort and i found some similar Snake games
Is it known to many players like Minecraft 1.20.51