Ecosyste.ms: Awesome

## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [Visual Studio Code](https://code.visualstudio.com/download): You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): An extension for Visual Studio Code that help to launch a local development server with live reload feature for static & dynamic pages.

## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/platform-game.git
```
After cloning the repository, you can open the project by Visual Studio Code.

Click to Go Live from the status bar to turn the server on/off.

As usual, the app should automatically open in a new tab in your browser. It runs on port 5500 by default.

(back to top)

# Key Features

## The Game
Our game looks like this:

The dark box represents the player, whose task is to collect the yellow boxes (coins) while avoiding the red stuff (lava) and the purple stuff (monsters). A level is completed when all coins have been collected. The player starts with 5 lives and lose one life each time they die. When the player is out of lives, the game restarts from the beginning. You can check the player's lives at the top-right corner of the game. The empty heart is the life that the player've lost, while the filled one represents the remainder.

The player can walk around with the left :arrow_left: and right :arrow_right: arrow keys and can jump with the up :arrow_up: arrow. Jumping is a specialty of this game character. It can reach several times its own height and can change direction in midair. This may not be entirely realistic, but it helps give the player the feeling of being in direct control of the on-screen avatar.

The game consists of a static background, laid out like a grid, with the moving elements overlaid on that background. Each field on the grid is either empty, solid, or lava. The moving elements are the player, coins, and certain pieces of lava. The positions of these elements are not constrained to the grid—their coordinates may be fractional, allowing smooth motion.

Lava are represent by red boxes. There are different kinds of lava:
- Normal lava: lava that doesn't move
- Horizontally moving lava: lava that move back and forth horizontally
- Vertically moving lava: lava that move like vertically moving blobs
- Dripping lava: vertically moving lava that doesn't bounce back and forth but only moves down, jumping back to its starting position when it hits the floor.

Monsters are represent by purple boxes. They move only horizontally and can't fall (or they can "fly", in other words). The player can defeat a monster by jumping on top of it. If this is the case, the monster disappears. But if the player touches other parts of the monster, the player die.

You can pause and unpause the game by pressing the Esc key.

## The Technology

We will use the browser DOM to display the game, and we’ll read user input by handling key events.

Since everything looks like colored boxes, drawing is uncomplicated: we create DOM elements and use styling to give them a background color, size, and position.

We can represent the background as a table since it is an unchanging grid of squares. The free-moving elements can be overlaid using absolutely positioned elements.

(back to top)

# Usage
I played the first level of the game to illustrate its features:

- At the first two attempts, I tried to defeat the monster, but failed.
- At the third attempts, I fell into the lava.
- At the fourth attempts, I failed to defeat the monster again.
- And in my last chance, I defeated the monster, and collected all the coins to complete the first level.
- The second level was displayed.

There will be a surprise for you when you complete all levels and win the game! Try to figure it out!

(back to top)

# Contact

You can contact me via:
* [![GitHub][GitHub-shield]][GitHub-url]
* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
* ![Gmail][Gmail-shield]: [email protected]
* [![Facebook][Facebook-shield]][Facebook-url]
* [![Twitter][Twitter-shield]][Twitter-url]

(back to top)

[HTML5-shield]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://www.w3.org/html/
[CSS3-shield]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://www.w3.org/Style/CSS/
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.ecma-international.org/

[GitHub-shield]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[GitHub-url]: https://github.com/theEmperorofDaiViet
[LinkedIn-shield]: https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white
[LinkedIn-url]: https://www.linkedin.com/in/khiet-to/
[Gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
[Facebook-url]: https://www.facebook.com/Khiet.To.Official/
[Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
[Twitter-url]: https://twitter.com/KhietTo