Classic Arcade Game Clone - Udacity Front-End Nanodegree Project 3

Introduction

This Classic Arcade Game Clone is the third project of the Udacity Front-End Nanodegree and follows the "Classic Arcade Game Clone project rubric" and the following style guides provided by Udacity:

• CSS Style Guide
• HTML Style Guide
• JavaScript Style Guide
• Git Style Guide

The HTML and CSS files were validated by the followings validators without any errors or warnings.

• W3C HTML Validator
• W3C CSS Validator

Overview

This project is organized as follows:

• index.html
• README.md
• /css
  • app.css -> style sheet
• /images
  • favicon.png -> my logo
  • char-boy.png
  • char-cat-girl.png
  • char-horn-girl.png
  • char-pink-girl.png
  • char-princess-girl.png
  • enemy-bug.png
  • Gem Blue.png
  • Gem Green.png
  • Gem Orange.png
  • grass-block.png
  • stone-block.png
  • water-block.png
• /js
  • app.js
  • engine.js
  • resources.js

How to play the game?

• The player needs to collect all the gems and cross the road avoiding to be hit by the bugs.
• To move the players use the arrow keys or W (up), A (left) S (down) and D (right) keys.
• The player starts with 3 hearts and 0 stars.
  • If the player gets hit, she/he loses 1 heart.
  • If the player gets 1 gem, she/he wins 1 star.
• The player wins when she/he gets 3 stars and finish crossing the road.
• The game is over when the player loses all hearts.

How to install and use it?

Considering it uses only vanilla JavaScript, HTML and CSS, it is not necessary to install additional features. Just download the files and double click on the index.html file. It works fine in Chrome (Version 73.0.3683.86), Firefox (Version 66.0.2) and Safari (Version 12.0.3).

References

• W3 Schools Documentation
• MDN Documentation
• Icons from Font Awesome
• Animations from CSS3 Animate
• Modal based on the The Daily Signal
• Game logic based on the Getting Started conducted by @Rodrick