Mem

A browser memory game featuring a cat fighting monsters in an endless dungeon.

The GitHub repo can be found here!

Tools used: JavaScript, HTML, CSS, Procreate

I started with my concept and a few character sprites I made beforehand. I came up with enemy ideas as well as input combinations. I experimented a bit before deciding to turn each enemy into an object literal, with properties for their name as well as input combination. Afterward, I developed functions for grabbing the key characters from the user's input and adding them to an array and then made a function to compare that array to the enemy input combination array. I figured out how to make enemies appear one after another once defeated, and at this point, most code was being printed to the console.


Later on, I began working on transferring everything over to the display and working on the HTML components. I made the rest of the sprites, and after taking a look at my previous mockups, I thought to use CSS grid to get my desired design layout. I made divs for different components of the screen and changed them depending on variables and user inputs. Basic information was displayed, and I thought to experiment more with colors, sprite locations, and so forth to make it more visually pleasing.


After receiving feedback, I worked toward debugging, adding a timer, providing instructions, and figuring out how else I could provide feedback for correct and incorrect inputs. An error would occur if the user pressed more keys than the enemy allotted before a new enemy loaded, and I adjusted this by instead grabbing the enemy's input length for my for loop. I added a timer using setInterval(), and then finally added start and end screens (start screen triggering when the game starts and end screen triggering when the timer runs out). I ran into a few errors if the user chose to run the game again after losing, but I resolved this by restarting variables to their default values once the game loads. I finally made small quality changes by adjusting sprite sizes to look less blurry on the display and adding sound effects.