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:
anomic30
/
Snake-arcade
Retro themed snake game 🎮with live highscore board! ✨
Snake Arcade
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 :)
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:
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.
Finally I have installed the Appwrite SDK in my React app using their npm package.
Demo video:
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)
Great job with this one! Awesome work
Thank you 😀
Please leave a comment here if you have played the game yet, along with your player name.
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).
Hey thanks for letting me know :) I fixed this issue.
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!
Just tested, it is still possible to patch past scores!
Lets connect on Discord and try to fix it. My id: Mav#8994
Woah! Congrats!
Thanks for the feedback :)
How cool! 🤩
P.S: We would love to have you in our Appwrite discord server, if not already!
discord.gg/KKZprAnX
Thank you so much 😀
I am already in the Appwrite Discord server.
Amazing! :D
This one is 🔥🔥🔥
Thank you Souvik 😀
Did it cost you to deploy the app on digital ocean?
You get $100 for 60days when you sign up for DigitalOcean.