Slot Machine Game
Summer 2021
During the summer of 2021, I worked on a solo project to create a simple 3x5 slot game primarily using ReactJS. The primary goal of the game is to simply spin the slots, and if you hit connections, you will be awarded according to the multiplier associated with the symbol. You must also create an account to play the game in order to keep track of the user's credit balance.
Process
I ultimately decided to use a MERN stack (MongoDB, ExpressJS, ReactJS, and NodeJS) for its simplicity to work with. Since I also wanted to learn login authentication, I opted to use PassortJS to handle secure login authentication.
I first worked on developing the basic mechanics of the game. I had to research a lot into React states as well as CSS animations to make a reel look like it is moving. Once I got one reel to be able to roll once, I utilized React's reusable components to create the 5 reels in the slot.
As far as the design of the slot machine page went, I looked through existing online slot machine games to gain inspiration. I based the font family, color palettes, and layouts to my page, and it really exceled my front-end work.
When I was satisfied with a rough draft of the slot game, I moved on to the back-end / database. The database was relatively easy to set up, as I only needed to store username, an encrypted password, and the account balance. For the REST API, I created 5 endpoints: one to register a new account, one to login an account with PassportJS authentication, one to retrieve / update a user's account data (username, account balance).
By then, I had a basic slot machine game going, but I found features that could be improved: creating an infinite reel, and adding infographics for the rule/payouts of the game. The new reel took some time to create, but I eventually figured out how to regenerate the hidden symbols in the reel without changing the ones that are showing with some Array manipulation. I also added info cards for the game, and I am particularly proud of designing the payout line infographics completely on my own using only HTML/CSS.
What I Learned
With this project, I learned a lot about how to use React's features:
- States that kept track of variables, and changed when necessary using functions
- Props that passes values to child components
- Arrays in React's HTML that can return the same component multiple times
- Router that created all endpoints for the front-end pages
- Protected Routes that restricted access to certain pages if you were not logged in
- Reusable Components to reduce repeated code and better readability
- HTML/CSS basics
Screenshots
