Frogger

This project re-creates the arcade game Frogger using JavaScript and a basic HTML/CSS skeleton. Try the game here. Note: This project is based on a skeleton structure from Udacity. For more information, see the initial commit on the appropriate GitHub page given above.

Structure
  • The game has 15 levels which the player must complete while avoiding enemy bugs.
  • You traverse the board using the arrow keys.
  • If you come in contact with a bug, you lose a life and return to the default position on screen.
  • You can also collect gems (of varying point values) and stars (which give extra lives).
  • If you lose all your lives, the game is over. If you complete all 15 levels with at least one life left, you win.
  • When the game ends, you may play again or return to the introductory page.
Design
The game begins with an introductory page explaining how to play. It also lists the player's possible avatars, along with which keys to press to switch avatars. Begin by pressing the "space" key.
A screenshot of the game's introductory page
The game page includes a background of grass, brick, and water. Your score, remaining lives, and level appear at the bottom. You have to cross the board while avoiding enemy bugs. Gems and stars appear occasionally, and you get points for every gem you collect: 3 for blue gems, 6 for green gems, and 9 for orange gems.
A screenshot of the game during play
The end page resembles the introductory page and congratulates you on completing the game.
A screenshot of the end page upon a loss A screenshot of the end page upon a win
The game becomes increasingly difficult. The chance of each of three independent rocks appearing on screen increases up to level 5, after which time they will all always appear (though sometimes overlapping each other). One strategy to avoid losing lives is to wait for the right half of the screen to become clear and cross from that half (since enemy bugs always cross the screen from left to right). To further increase difficulty beyond level 5, a fourth rock will always appear somewhere in the rightmost column.
Running The Application
Run the application in your browser by clicking here. To download, clone the repository using this terminal command:
git clone https://github.com/wbchristerson/arcade-game.git

Alternatively, follow the instructions below to download to a hard drive:
  • Navigate to this page.
  • Click the green "Clone or download" button towards the right then choose "Download ZIP".
  • Find the folder arcade-game-master in your Downloads folder or wherever it was placed on your device.
  • Right click and choose "Extract All" then extract.
  • Open your browser and use Ctrl + O (for Windows machines) to open the file selector on your device.
  • Go to arcade-game-master, enter arcade-game-master again, then select index.html. The game screen will appear.