November 29, 2020

Classic Arcade Game

Project 3: Classic Arcade Game Clone (72 hrs) ~ [Udacity Front-End Web Developer Nanodegree Program (https://www.udacity.com/course/front-end-web-developer-nanodegree—nd001)

In order to recreate the classic arcade game Frogger, we were provided with visual assets, an image loading utility (resources.js) and a game loop engine (engine.js). I created all of the game logic and the code within app.js to add a number of entities to the game, including player characters, enemies, and gem prizes.

PLAY GAME HERE

Usage

  1. Clone this repository
  2. Navigate to your local copy of index.html through your web browser

Technologies Used

Object-Oriented JavaScript, HTML5 Canvas, HTML5 Drag & Drop

  • When you drag and drop a new player onto the board, the background changes color to match the player using a CSS gradient.

Style Guide Used

Udacity Front-End Style Guide

Game Directions & Rules

  1. The goal is to get your character to the water while avoiding getting hit by the enemy bugs
  2. Pick the character you’d like by dragging and dropping your character onto the game board. You are given 5 lives to start (hearts). Keep track of your score at the top
  3. Use your keyboard arrow keys to move the player up, down, right, left
  4. If a bug hits you, you die, lose a life, and 20 points
  5. If you gain a gem by moving on top of it, you gain 20 points
  6. If you lose you 5 lives, you lose the entire game, lose 50 points, and your character is reset with new lives
  7. If you reach the water, you win, gain 40 points and 1 life

Resources

Potential New Features