lcaroselli / game-time

Game Time

Synopsis

This project is a new take on the classic Frogger game, and is called Soot Sprint. It takes thematic content from Studio Ghibli's animated film Spirited Away. The application was developed in order to practice using canvas and developing unit testing. This project was developed for a class at the Turing School of Software and Design.

Usage

On page load, the user sees the start page, and can click the play button to start the game. The soot is set to the bottom of the canvas and the user must maneuver the soot sprite up to the fires at the top of the canvas, using the up, left, right, and down keys, whilst trying to avoid the cat bus (cars) and also staying on the trains that run through the water. Once the soot sprite reaches the fire five times, the game levels up and the speed of the obstacles on the canvas increases. Scores are also collected and appended to the DOM, and a high score is saved in localStorage. The game has three levels, after which the final win page appears.

Contributors

Margo Schaedel Laura Caroselli

game-time's Issues

Testing

*Functions - produce consistent results
*Collision detection
*Soot movements
*Game over and win conditions

Add sound effects

Extension: Must land on specific fire in order to win

Prevent Soot from being able to jump off canvas

Soot can go below/behind the canvas parameters

Level up speed for scores over 125

Add reset game state (similar to win game state - play again)

Update collision detection to reset round

Update collision detection to reset round:
*Soot resets to start point
*Deadly objects reset to starting point
*1 life goes down
*If all 3 lives used, trigger game over state

Create platforms

Create game platforms to soot to visually hop across

Platform background images

Create harmless objects

Harmless objects for soot to jump on (logs/barrels)

Add game music

Fix soot jumping on log (cannot key-right)

Re-size game board according to screen size, media queries for canvas element

Overlay game images

Fix images
Overlay the game images

Outer UI - button, score, and highest score

Reset game button, score, highest score

Set initial increasing difficulty - Speed

Create increasing levels of difficulty as the soot successfully gets a coal to the fire (increase speed)

Look up image sprites or image overlay

Extensions

*After "win", add another level of difficulty (more rows of obstacles)
*Add a second Soot AI for the player to compete against
*Add sounds for when the Soot is squished and when it makes it to the fire

local Storage for high score

Space out fires, you can only win if you land on a fire

Refactor

*Single-responsibility functions
*Inheritance where applicable
*Make sure ES6 fully utilized
*Array prototype methods where applicable
*No nesting
*Binding & using this

Game over game state

Create game over game state to trigger when user loses all 3 available lives

Fix win game state to bring speed back down to default (lowest) speed)

Trigger win state when soot completes a level (5 rounds - gets 5 coals to the fires)