splashPageTitle.mov
Table of Contents
Mint Scream! Is a 2D side-scrolling game, where the player must use a mouse or touch screen to click on the sprites before they reach the edge of the screen. Best on desktop, but also works on mobile devices.
- Click on the sprites to make them disappear into a puff of smoke.
- The sprites must not reach the edge of the screen.
- Player must click on 10 sprites per level (4 levels total).
Mint Scream! Is built from scratch using HTML5 Canvas, CSS, Javascript and Bootstrap. No gaming libraries were used.
- CSS animated rain and lightning effects with sound. ⛈️
- Animated character gifs. 🕷️
- "Meet the Developers" cards custom designed to look like tombstones.
- Animated sprite sheets built from single image files.
- Each character has their own movement pattern across the screen.
- Custom made parallax scrolling backgrounds, each level having a different number of layers and individualized speeds.
- Bootstrap
- Buttons
- Different music for each level
- Sound for Game Over and Winner mode
-Clone repository using the command git clone https://github.com/Tamsauce/mintScream.git
-Open file in code editor- Code Refactoring: To achieve an MVP within the time constraints, we took on a "make it work" mentality. Building each level, as if it was independent of the others, resulted in repetitious functions. Ideally, the code would be refactored to run more smoothly by importing and exporting the needed code.
- Audio Controls: Each level has music that plays in the background. The audio controls are currently hidden because they haven’t been customized. For accessibility reasons, we would like to stylize these controls and put the sound back in the users' control
- Looping Music: When the game ends or is won, ideally the personalized songs that play for each level would also come to an end.
- Start Game Page: This page was built to look like our levels but doesn’t use Canvas. Currently, the page is not responsive.
- Player Controls: A player can start the game on any level provided they have the right file path, this would also mean they would start with the needed points to achieve that level. In the future, these paths would ideally be blocked.
- Points Earned: A player is only required to earn 10 points per level, however it would be better if the level ended only after all monsters per level were killed. This would require coding a specific number of enemies to appear rather than a continuous line.
- Pause Game: The game is missing a pause game feature
- HTML5 Canvas: Prior to this project, we had no experience with game making or Canvas. Unlike regular HTML which allows for line breaks, we learned to render anything we needed to create mulitiple "draw" functions. We learned how to manipulate the x and y-axis, create functions that detected color, and manually built click events.
- Sprites and Parallex: Having never worked with sprites or parallax before, we learned how to build and manipulate them. Based on a lot of math tweaking, we were able to flip them around on the x and y-axis at will and adjust their movements based on what seemed fitting.
- Delta Time: We learned to increase performance, we needed to consider delta time which was written to account for the relationship of the users hardware and network responsiveness.
Level1Ghosts.mov
level4.mov
- Twitter: @Tamsaucce
- LinkedIn: @tami-hughes-58074a72
- Email: [email protected]
- Portfolio: https://www.tamsauce.com/
- Blog Post About This Project: Tami's Blog
- Twitter: @KHtmlscssjs
- LinkedIn: @katiemariedev
- Email: [email protected]
- Portfolio: https://www.katiemarie.dev/
- Blog Post About This Project: Katie's Blog