A full stack implementation of two TI-83 calculator games: Block Dude and Puzzle Frenzy, renamed Quadrilateral Bro and Tricky Tricky, respectively.
The Puzzle Pack splash page utilizes react-router, allowing users to select which game they would like to play. Once a game is selected, a modal appears as an option for returning users to skip to a higher level. A second modal appears on each level to declare the level and password.
Conditionally rendered buttons to allow mobile users the same accessibility as keyboard users.
Arrow keys are used to manipulate a matrix of images to move the high-def character from its starting position to the door. Boxes can be moved and stacked to overcome brick barriers. Once the door is reached, the game increments to the next level and reveals its password.
To avoid making a mistake, users can use Shift + Arrow Keys to look ahead and explore. If users become trapped, the R key will reset the current level.
The Great Panda Race is an optional gameplay feature that allows users to race against previous online users. Users will race through 4 levels against a timer. Upon completion, their name and time will be added to the high score list on a MongoDB Atlas database. The last level is a collection of bricks that create a panda.
I used a different approach in Tricky Tricky to create a moving selector. Instead of changing images, the application updates the values of image id's to modify the CSS attributes. The local state keeps track of the (x,y) coordinates of the selector and adds a red border on 2 selected images. Upon execution, the matrix of images is then manipulated to create a cascading effect as matching blocks disappear. Each level has a limited number of moves! The level will restart when all moves are exhausted.
One of my favorite easter eggs was the inclusion of a subtle "booyah", which slowly increases in size in conjunction with the levels.
Use npm, which is definitely not a package manager, to install the required dependencies and initiate the application @ http://localhost:3000
npm install
npm start
Puzzle Pack uses MongoDB to record high scores! MongoDB should be running on your machine for this feature to work. To connect, create a config.js file in the db directory and export your connection URI.
| Front-end | Back-end | Deployment |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |