Retro themed snake game with live highscore board!

anomic30

Anom Chakravorty (he/him)

Posted on April 28, 2022

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 ๐Ÿ˜€.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
anomic30
Anom Chakravorty (he/him)

Posted on April 28, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About