Udacity FEND Arcade Game Frogger Clone Project 🎮

Arcade Game Frogger Clone is a Single Page App

This project is from my Front-End Web Developer Nanodegree Program at Udacity. This project is based on the classic arcade game Frogger.

The goal of the game is to reaches the water (i.e. top of the game board), the game is won. The challenge is to avoid the bugs that travel on the road. If a bug is touched, the character is reset back at the beginning.

Table of Contents

• Get Started
• Motivation
• Lesson Learned
• Screenshot
• Installation
• How to Use?
  • Mobile phone users
• Technology Used
• Contributing
• License

Get Started

Click on this link to see the website or you can download or clone the project, and loading up the index.html file in your browser.

Motivation

Games have a lot of objects and those objects do a lot of different things; but sometimes they do some very similar things as well. This creates a great opportunity for me to practice object-oriented programming, an important programming paradigm that influences application architecture and provides performance optimization.

What I learned from this project

During the project, I learned complex applications that must be “broken down” into simpler entities that manage their own properties and functionality. I also learned JavaScript’s object oriented programming features to write eloquently designed classes capable of creating countless instances of similarly functioning objects.

Screenshot

Installation

• You can download the zip or clone the project with git

  $ git clone https://github.com/abdsamadf/udacity-classic-arcade-game-clone.git

• Install Node.js by following the instructions on the website.
• Run npm install inside the project
• Run npm run build to build javascript
• Run npm run watch afterwards
• Good Luck! 👍

How to Use?

• Use the keyboard arrow keys to move player left, right, up and down
• Press C to change the player character

Mobile phone users

• Users swipe on screen to move the player
• Users touch on screen to change the player character

Technology Used

• Vanilla JS
• HTML5 and CSS3
• CSS Animation animate.css - A cross-browser library of CSS animations.
• Animated Modal animatedModal.js - animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions.
• Hammer.js HAMMER.JS - A javascript library for multi-touch gestures

Contributing

Contributions are always welcome! Please read the contribution guidelines first.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

LICENSE

MIT © Abdul Samad