Catventure! is a browser-based video game where you assemble a team of fantasy role-playing-game cats and go on a catventure! This videogame is built entirely in React.js with no external game engines. The user can add cats to their team, find treasure and engage in JRPG-style turn-based combat.
Catventure! is a full-stack app with a React front end, RESTful API routes using Express.js, a Node.js backend and a MongoDB database.
For this application we built our own server and did not use any external API's. Our server utlizes Mongoose ODM, Bcrypt, Express, and JWT (Json Web Token/JWT Decode). JWT and Bcrypt handle our user authentication and password encryption. All of our data stems from our two models, which are our User model and our Cat model. The cat model is attached to our user model in the form of an array, allowing the user to save their cats and have their game progress/data persist. Since we used React for this project, our routes/controllers are only serving up one html page. The bulk of the work our server is doing is serving up and storing data relating to the user and the user's cats.
One of the signature features of browser-based gamees is the implementation of time-gating mechanics, which enforce that users can only access certain benefits once per a set time interval, whether it's one hour or one day.
And from a game-balancing standpoint, we did not want our users to be able to consistently refresh the page to either spawn new cats or open infinitely many treasures. That led us to time-gating the user, which you can see on lines 99 & 101. We have an attribute in our user model called "lockoutTavern" in which the first time this function runs, the exact time/date are saved to our database.
Essentially, once the first set of three random cats is spawned into the Tavern page, the user is stuck with those cats for a set amount of hours. We conditionally render 1 of 2 things based on lockout times. We either render a fresh set of cats, or the first set of cats that spawned the first time they entered the Tavern. This function (and the jsx it affects) was a valuable lesson in state management/conditional rendering.
This time-gating method was similarly used to show/hide and allow/prevent opening of treasures on the Cave page.
Inspired by beloved retro-JRPG franchises like Final Fantasy, Catventure! features turn-based battles. As a React app, this requires that the UI and sprite animations are controlled by multiple independent React useState hooks, that are passed between the various functions necessary to execute the turn-based battle mechanics.
In order to reduce the quantity of arguments that must be passed, associated useState hooks (for sprite animations, UI elements, or sound effects) were consolidated into single objects that could be passed to GUI behaviors that reflected the scripted mechanics occurring within the code.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
- Clone repository.
- Navigate to
catventure-gamedirectory in terminal. npm installdependencies.- Run locally with
npm run develop. - Open
http://localhost:3000/in web browser.
- Generate optimized build with
npm run build. - Upload to webhosting service, such as Heroku.
- Attach MongoDB hosting service, such as MongoDB Cloud.
- React Sprite Animator
- React useSound
- React
- React Bootstrap
- Mongoose
- JWT/JWT Decode
- Express
- Bcrypt
- GitHub
- Javascript
- HTML
- CSS
| Emily Dorgan | Vince Lee | Derek Banister |
|---|---|---|
| - Portfolio | - Portfolio | - Portfolio |
| - Github | - Github | - Github |
- Pixel-art backgrounds provided by Jesse M, Szadi Art, & Anokolisa.
- Pixel-art enemy sprites also provided by Szadi Art.
- Background music provided by Fesliyan Studios.
- Battle sound effects provided by Mixkit.
