Retro themed snake game with live highscore board!

Anom Chakravorty (he/him) — Thu, 28 Apr 2022 14:19:33 +0000

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…

View on GitHub

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 😀.

DEV Community: Anom Chakravorty (he/him)

Retro themed snake game with live highscore board!

Overview of My Submission

Submission Category:

Link to Code:

anomic30 / Snake-arcade

Retro themed snake game 🎮with live highscore board! ✨

Snake Arcade

npm start

npm run build

Additional Info:

Additional Info:

Demo video:

Thank you Dev & Appwrite!

Update 1:

`npm start`

`npm run build`