soleraops / game-time

Game Time - Space Bunny

During Module 2 of our studies at the Turing School of Software and Design, Chris Chateau and I were tasked with recreating the classic game "Frogger" using the HTML Canvas API, HTML, JavaScript, CSS, Local Storage, and an existing code base. For our interpretation, we envisioned an astronaut bunny exploring the surface of the moon. At the end of her mission, she needs to return to the Bunny Moon Space Station, and so do all of her bunny friends. We have a similar score setup to the original "Frogger":

1. For each position the bunny gains, the player scores 10 points.

2. For each bunny that makes it home, the player scores 50 points.

3. For the first game, the player sets a hi-score.

4. On subsequent games, if the player's score is greater than their hi-score, their score is saved as the new hi-score.

Enjoy!!!

https://jessica-erickson.github.io/game-time/

game-time's Issues

Basic canvas states

• Make drawStart function that makes a start screen that displays game title, instructions, and points values;

• Make drawBackground function that draws the timer and lives count zone, the two safe fields, the land zone, the water zone, and the finish zone;

• Make drawGameOver function that draws the 'Game Over' screen with added instructions 'press start to retry;

Frog movement

• Make frog move in any direction using arrow keys;

• Write test;

• Make frog move in any direction using wasd keys;

• Write test;

• Make frog die on vehicle collision;

• Write test;

• Make frog die on water collision;

• Write test;

• Make frog take the speed and direction of water objects when occupying the same space;

• Write test;

• Make frog die if turtles submerge while riding them;

• Write test;

• When frog dies, if there are lives left, create new frog at start, else end game;

• Write test;

• Add points accumulator for frog advancement;

• Write test;

• Add points accumulator for frog finish;

• Write test;

• Add points accumulator for total score;

• Write test;

• Display current score in 'Score: ';

• At game over, display final score as 'High Score: ' and store value in local storage;

• On page load, if there is a high score in local storage, display it, otherwise display nothing;

• If, at game over, the final score is greater than the high score in local storage, replace the high score with the new value both in html and local storage;

Obstacle movement

• Write tests for direction, spacing, and speed range of obstacles;

• Set direction, spacing, and speed range of first row;

• Set direction, spacing, and speed range of second row;

• Set direction, spacing, and speed range of third row;

• Set direction, spacing, and speed range of fourth row;

• Set direction, spacing, and speed range of fifth row;

• Set direction, spacing, and speed range of sixth row;

• Set direction, spacing, and speed range of seventh row;

• Set direction, spacing, and speed range of eighth row;

• Set direction, spacing, and speed range of ninth row;

• Set direction, spacing, and speed range of tenth row;

• Write test for phasing functionality of turtles;

• Add phasing functionality of turtles;

• Add sound functionality of fastcars;

Finishing for mvp

• Add lives left counter and canvas display;

• Add timer display;

• Write timer test;

• Set start time at reasonable number;

• Have timer bar width decrease in proportion to how much time is left;

• At time = 0, if lives are left, lose life, else, end game;

• At frog = finish, reset timer;

• Add win counter;

• Add saved frogs to finish field;

• When 12th frog is saved, display: 'You Win!!!!' over game board, and make saved frogs hop in place.

Acquire assets

• Find the following sound effects to use: jump, land, land-collision, water-collision, win-jingle, background music, car-vroom, sad-death (if we have time: faster background music for incremented difficulty);

• Put sound effects into 'audio' folder;

• Figure out what we need to use sounds with canvas;

• Find the following art assets: sitting frog, leaping frog, frog life counter, 4 cars, 1 truck, logs in 3 sizes, turtle swim 1, turtle swim 2, turtle submerging, turtle submerged, purple pattern for safe zone, green pattern for end zone;

• Put images into 'images' folder;

• Figure out what we need to use images with canvas, and how that might affect collision detection;

Set up html and css

• Find Font to use: must be compact, but easily legible, in bold and extra bold;

• Add style 'display: grid;' to body element;

• Put contents into 'main' element that we can center using 'align-self: center;' and 'justify-self: center;';

• Add two bold headings to the top of the page: 'Score: ' and 'High Score: ', using any color, but leave background white;

• Make landing elements for the score values within the headings, probably using span and extra bold font;

• Style the headings to be 32 px tall;

• Add canvas element with dimensions 448px X 448px;

• Add button element with 'START' as label, with a height of 64px and width of 192px;

• Style button to have a top margin of 32px and be centered within main;

• Make the button green with a drop shadow, add light green and remove drop shadow hover state, add matte red without drop shadow disabled state while game is being played;

Issue for class

• Refactor this.obstacle array;