rufusasterisk/game-time

Toader

A Frogger remake on HTML5 Canvas.

Frogger (C) Atari 1981 Sprites provided by [email protected]

Project Info

We made Toader as an exercise in HTML5 and practice working with JavaScript object and OOP fundamentals. The game code was written by Jen Woodson and Rufus Welsh. We pair-coded most of the core functionality of the game, learning what style of working together worked best. Some of the later visual changes were solo coded with GitHub reviews prior to merging.

One of the more interesting problems we resolved was periodically refactoring to make our code more DRY and creating more objects to manage different parts of the game. Passing values between objects was challenging as the game grew more complex - creating object dependencies is tricky!

The sprite animations in the game are controlled using a frame-based timer. Each time requestAnimationFrame tells an object to draw itself, the timer increments. At different frame times, the game displays different sprite objects.

Initial Setup

Pre-installation

Toader requires Node.js v6.11.0 or a compatible version. Node is available for free at https://nodejs.org/en/download/ or using a CLI like brew. Installation requires Git installed on the local machine. Grab it here! https://git-scm.com/downloads

1. Clone the repository to the local machine

Using a shell of your choice, navigate to the desired parent directory and run

git clone https://github.com/rufusasterisk/game-time.git toader

2. Change into the toader directory

3. Install required modules

In the Toader directory run

npm install

This installs all required dependencies for Toader

4. Start the webserver

Toader is hosted via webpack. Starting the server is easy! Enter the following command in the Toader directory

npm start

5. Play Toader!

The webpack server might open a browser tab with Toader running. If it doesn't, navigate to

http://localhost:8080/

Click Start Game to begin, press Reset Game at any time to start over.

Use the arrow keys to move, Good Luck!

game-time's Issues

shift canvas objects down 87.5px

add color to constructor for platforms

Add edge limits

Add platform tests

add page styles

Add Home function

Add Frog Class

Add high score to local storage

Add sprites to logs

Add platform class

for turtles, logs, and crocodiles - things the player can stand on

Will likely need to be drawn before frog

Add frog homes

Add sprites to obstacles

Add level 1

o

Add Game Over to Level

indicate that the game is over to the user when the last life is gone

Add sprites to turtles

Add win criteria to game class

Add obstacle tests

Explore combining collision functions to 1 function

Add collision detection between frog and obstacle

Add Level X text to indicate level to user

maybe put text in upper right of canvas:
Level 1
Level 2
Level 3

-OR-
Level
1
Level
2
Level
3

Add crocodiles to homes

Add timer to level class

Fix first row river collision (hard coded)

remove Lint errors

Add bonuses to homes

Add obstacle class

For snakes and cars - things the player can't touch or be touched by

Create game class

block toad from jumping off the right or left of a platform

Add Frog Tests

Layout page around canvas

Add crocodiles to river

Add collision detection between frog and water

standardize object property names for collision detection

Determine how to draw graphics

Want to use images over drawing

May need to create images with drawing tools and use them

Optimize Collision Detection Scope

Add Home Tests

Add snakes to logs

add sprites to toad/frog

Add snakes to purple grass

add level 3

Add Row building function

Currently function is split into 9 different functions with 90%+ duplicate code.

Need one function with parameters to build rows

add color to constructor for Autos

Add Level class + tests

Add README

include sprite acknowledgment

Add sprites to background

Setup drawing framework

Parametrize height in class constructors

row height is defined in the game code, it's hardcoded in the class constructors

Add lives to level class