🐸 Custom frogger Arcade Game 🐸

Classic Arcade Game Clone

  • Languages: HTML5 Canvas API + Object-Oriented JavaScript
  • Purpose: Udacity Project
  • View on Github + Source Code
  • 🏃-> <- 🏃


Summary 💬

Custom frogger Arcade is a variation of the classic Frogger arcade game developed by Konami and licensed for North American distribution by Sega-Gremlin and worldwide by Sega itself. It is regarded as a classic from the golden age of video arcade games, noted for its novel gameplay and theme. wiki/Frogger


Objectives of the game🏃

The object of the game is simple, you must direct the hero character across the grey brick road, full of enemy bugs, towards the water without getting hit.

Your score is based on your current score + (level x 2) for each level you pass.

The enemy bugs run across the screen at random speeds in the x direction and random y locations given their constraints which is between the grey bricks.

The number of enemy bugs will increase by 1 until level 6 where an increase of 1 bug will be added to the total enemies each time you complete the level.

If you run into an enemy bug, you will reset, your level decreases by 1, your score decreases by 1 and the enemy you run into will disappear.


How to play and the controls 🎮

If you run into an enemy bug, you will reset, your level decreases by 1, your score decreases by 1 and the enemy you run into will disappear.

Users control the hero character by using the main keyboard keys: [ ← → ↑ ↓ ] arrow keys on their keyboard. There is no press down and hold option, you must press each key to move in that specific direction.

Tools & Techniques involved

  1. Object-Oriented JavaScript
    • Scopes
    • Closures
    • The 'this' Keyword
    • Prototype Chains
    • Object Decorator Pattern
    • Functional Classes
    • Prototypal Classes
    • Superclass and Subclass
    • Pseudoclassical Subclasses
  2. HTML5 Canvas API
    • HTML5 Canvas Basics
    • From Pixels to Animation

Modifications of your own 🙌

  1. Download the GitHub zip file or clone the repository onto your local workstation:

  2. To check out the game, navigate to the game.html file in your application's directory and double click to open in your browser.

  3. To modify the javascript, please access app.js