DEV Community

Cover image for Retro themed snake game with live highscore board!
Anom Chakravorty (he/him)
Anom Chakravorty (he/him)

Posted on • Updated on

Retro themed snake game with live highscore board!

Overview of My Submission

Snake Arcade is a retro themed snake game with a live highscore board.
I took this inspiration from the popular Nokia snake game which I used to play in my dad's mobile back when I was a kid. I had so much fun playing it. Moreover my friends used to brag about their scores but there's was no scoreboard to track them. And that's why I decided to build one with a highscore board ๐Ÿค .
To make it more fun and challenging I have added a little twist. Whenever the golden fruit appears, you get 50 points more but there's a 20% chance that your score will be reduced by 50 points ๐Ÿ˜œ. So are you willing to take the challenge? Compete with your friends and top the leaderboard!

Play now: Snake Arcade

Submission Category:

Wacky Wildcards

Link to Code:

GitHub logo anomic30 / Snake-arcade

Retro themed snake game ๐ŸŽฎwith live highscore board! โœจ

Logo Snake Arcade

React Appwrite DigitalOcean

Snake arcade is a retro themed spinoff of the popular Nokia snake game. Play now and compete with your friends to top the high scoreboard!

Link: https://snake-arcade-bck7y.ondigitalocean.app/

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Additional Info:

Snake Arcade uses Appwrite to store the score of every player in its database. The Appwrite instance is hosted at DigitalOcean.

Disclaimer: All the sound effects and music have being taken from OpenGameArt.org which is a media repository intended forโ€ฆ

Additional Info:

Frontend: React.js
Backend: Appwrite
This is how the architecture of my Snake Arcade looks like. If you wonder how I designed this, I have used Figma :)

Workflow

How I integrated Appwrite:
I have hosted the Appwrite instance on a DigitalOcean droplet using their 'One-Click Droplet' in the DigitalOcean Marketplace. You can find the tutorial here: https://dev.to/appwrite/announcing-appwrite-one-click-droplets-on-digitalocean-1hd8

In order to build the highscore board, I have used the Appwrite's database to store the highscore of each players. The database schema looks like this:

Database Schema

Now, to query the top 10 highscores I have indexed the database based on the userId to locate the required data without having to search through every document for result.

Database Index

Finally I have installed the Appwrite SDK in my React app using their npm package.

Demo video:

Snake Arcade Demo

Thank you Dev & Appwrite!

This is my first time using Appwrite. Its so simple and easy to learn that any beginners can use it in their project. I would recommend everyone to use Appwrite ๐Ÿš€.

Update 1:

Just crossed 100 users. Thank you everyone ๐Ÿ˜€.

Top comments (17)

Collapse
 
moose_said profile image
Mostafa Said

Great job with this one! Awesome work

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him)

Thank you ๐Ÿ˜€

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him) • Edited

Please leave a comment here if you have played the game yet, along with your player name.

Collapse
 
anshles profile image
Ansh Saini • Edited

The game seems great. But I think you should make it a little more secure. Right now I can open the network tab, see your requests and make any changes to high scores that I wish to. I can even edit other player's scores. (I have not done that though don't worry).
Image description

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him)

Hey thanks for letting me know :) I fixed this issue.

Collapse
 
luccabiagi profile image
Lucca Biagi de Paula Prado • Edited

I Think that it isn't entirely fixed, as I still managed to post one (the Lucca with 100000 points) one possible way to fix that would be on start of every game create some type of One time password, and validate if is valid on each post. I think that this would prevent things like that.

But really nice job tho!

Thread Thread
 
luccabiagi profile image
Lucca Biagi de Paula Prado

Just tested, it is still possible to patch past scores!

Thread Thread
 
anomic30 profile image
Anom Chakravorty (he/him)

Lets connect on Discord and try to fix it. My id: Mav#8994

Collapse
 
tarwatuddin profile image
Tarwat Uddin

Really impressed with the game!

Got high score ๐Ÿ˜
screenshot

Keep up the good work! ๐Ÿ‘๐Ÿฝ

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him)

Woah! Congrats!
Thanks for the feedback :)

Collapse
 
haimantika profile image
haimantika mitra

How cool! ๐Ÿคฉ

P.S: We would love to have you in our Appwrite discord server, if not already!
discord.gg/KKZprAnX

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him)

Thank you so much ๐Ÿ˜€
I am already in the Appwrite Discord server.

Collapse
 
haimantika profile image
haimantika mitra

Amazing! :D

Collapse
 
8bitsouvik profile image
Souvik Mandal

This one is ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him)

Thank you Souvik ๐Ÿ˜€

Collapse
 
rohitraje786 profile image
Rohit Patil

Did it cost you to deploy the app on digital ocean?

Collapse
 
anomic30 profile image
Anom Chakravorty (he/him)

You get $100 for 60days when you sign up for DigitalOcean.