DEMO

• Introduction
• Built With

A game program based on the classic arcade game Frogger. The goal is to guide the player character to the water while avoiding the bugs.

Click the 'DEMO' link above to start the game in your browser. Control the player character using UP,DOWN,LEFT and RIGHT arrow keys.

Players are given 3 hearts. When a collision happens, the player will restart to the beginning cell and one life will be deducted.

Every time the player reaches the water their points will be increased by 100 and they are transported back to the beginning cell. The enemy bugs will gain increased speed as well.

When the player runs out of lives, a game over screen appears, showing the Final Score, and an option to play again.

Project forked from Udacity.

Udacity provided minimal HTML and CSS files. The JS files resources.js, engine.js, and app.js are also provided.

resources.js contains the image loading utility. engine.js provides the loop functionality and draws the canvas as well as the entities on the screen, and updates them over and over.

app.js defines the Enemy class and two other functions, as well as an event listener function for key press. It also contain comments as clues on how to structure the program.

For a more detailed instruction, check out this guide from Udacity.

• HTML
• CSS
• JavaScript ES6

Toolkits

• Google Fonts Press Start 2P
• Font Awesome Icons
• Subtle Patterns Gaming

Ideas and Tutorials

• 2D Collision Detection from Mozilla

• Blinking "Play Game" button from a Stack Overflow question