Nyan cat game is actually a music rhythm based game 🎶 I.e you start with a decent difficulty as the music in start is decent and it expect you to pass through it, after a few tries at least.
Once you pass through the first phase of the game, you'll enter a Panic event phase, where it gets real exciting 🎸. Panic event can start anytime above the score of 50 pts.
Why this?
After participating in 4 previous Hackathons (actually winning non of them :P), I decided to do something really entertaining & crazy. So I came up with this idea to make a web game using Redis as a primary database. Thanks to RedisOm it got really easy to do this.
Easy to use thanks to the documentation, it was a fun project to work on, and really think it's a Wacky Wildcard Project :P.
Submission Category:
Wacky Wildcards
Languages used:
JavaScript(Next.Js) & Css
Screenshots 📷
Check out these Demo clips of the game 🤯
Overview video 🎥
Here's a short video that explains the project and how it uses Redis:
Nyan cat game with MetaMask authentication for Web 3.0 ecosystem. Made out of Next.js & Moralis. Database powered by @redis (Currently in hibernation)
Nyan Cat Game
Nyan cat game is actually a music rhythm based game 🎶 I.e you start with a decent difficulty as the music in start is decent and it expect you to pass through it, after a few tries at least
Once you pass through the first phase of the game, you'll enter a Panic event phase, where it gets real exciting 🎸. Panic event can start anytime above the score of 50 pts.
Why this?
After participating in 4 previous Hackathons (actually winning non of them :P), I decided to do something really entertaining & crazy. So I came up with this idea to make a web game using Redis as a primary database. Thanks to RedisOm it got really easy to do this
Easy to use thanks to the Redis documentation, it was a fun project to work on, and really think it's a Wacky…
When it comes to working of this game, it comes down to a web application. Here I've created a Next app using npx create-next-app. Metamask wallet address for user Authentication, this app uses Next.js framework with Moralis SDK and Redis for querying & storing data into Redis cloud.
Here game is rendered using HTML5 canvas.
How the data is stored: 🤔
In this application, I've something called Redis-om for Node.js.
Here data is stored in the form of JSON where following schema is created
Notice I've also declared something as const ttlInSeconds = 21600; and then used it in await repository.expire(id, ttlInSeconds); because we don't want to store any data longer than 6 hours. Yes, your scores will reset after 6 hours.
Once this is done, we can create an API route in our Next.js application.
Once we create it in our database, it will be stored in our database by giving data from our frontend, I've used javascript's fetch API for this purpose. You can check this file, where I've declared such logic.
How the data is accessed: 🤔
Now if you've gone through the application, there is a section of leaderboard, where we have scores and addresses or usernames of players with highest pts.
To access our database and then fetch it from our Redis database, we have couple of ways like...
In our development phase, I've used Redis Insight, importing my database using public endpoint & password.
But in our application I've used .env.local file to store all API keys.
Once that is done, in our redis.js file we create a redis instance also called Client() like:
One more thing is that we are also displaying the top-3 players in the Home page of the Game. Let's dig it...
So we're doing something similar to what we did above I.e.
Hope everything was clear, and if not consider checking the video. If still stuck on something feel free to contact me over my any of the social handle, I'll be happy to help you :)
How to run it locally? 💻
Requirements 📝
Node.js - Expected version ">=14.17.0". If you need help in installing on Linux like me Check out.
You'll need Metamask account to pass Authentication 📝
Follow these steps to run on your device after Cloning the repository and cd project-giga-cat to enter the root project folder.
First things first, use yarn install to install all the dependencies.
In root directory of the repo, create a file .env.local and declare 3 env variables. But before that go to Moralis.io & Redis and create a free account over both.
In Moralis dashboard, click on Create new Dapp and select the Environment Testnet and under testnets select ETH Goerli testnet. Select a region and give a cute name, finally proceed with it.
Now, create a subscription in your Redis Cloud and then create a database for yourself. Make sure to save their details.
In your .env.local, create 3 variables as:
NEXT_PUBLIC_MORALIS_SERVER_URLNEXT_PUBLIC_MORALIS_APP_IDNEXT_PUBLIC_REDIS_URL
and give them their values.
For Moralis, go to settings of your Dapp, and copy the Dapp URL for SERVER_URL & Application ID for APP_ID.
For Redis, go to your database and from Security section copy the user password, and also take the public endpoint from General section. Now paste them in the .env.local file, formatted as NEXT_PUBLIC_REDIS_URL=redis://default:password@endpoint:port. Note: port should be appended at the last of your public endpoint.
Now run yarn run dev to run the application.
Go to http://localhost:3000/ and you'll see the Connect Wallet page.
Click on Connect wallet and for signing in, Metamask should've popped up. And you'll enter the dashboard.
If you've find any difficulty in this, Check my video! 🔥
If you notice anything unusual try refreshing the page. If it doesn't fixes the behavior, please create a issue in Github :)
💥 New Update : Users can now have their temporary usernames 💥
Thanks to a Redis feature -> TimeToLive or ttl, users can assign themselves a temporary username for purpose of few hours till their scores exist. Check & read docs for more information.