Table of Contents
Another version using Canvas of the original Platfrom Game. It is based on chapter 17 of the famous book about JS - "Eloquent JavaScript", with a few additional features.
Before cloning and using this application, you'll need to install these things on your computer:
- Visual Studio Code: 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: An extension for Visual Studio Code that help to launch a local development server with live reload feature for static & dynamic pages.
You can install this application by cloning this repository into your current working directory:
git clone https://github.com/theEmperorofDaiViet/platform-game.canvas.gitAfter 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.
Our game looks like this:
 |
Player |
 |
Wall, Lava and Coin |
The player's task is to collect the coins while avoiding the lava. A level is completed when all coins have been collected. 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 ⬅️ and right ➡️ arrow keys and can jump with the 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.
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.
You can pause and unpause the game by pressing the Esc key.
We will use Canvas to display the game, and we’ll read user input by handling key events.
I played the first level of the game to illustrate its features:
- At the first two attempts, I fell into the lava.
- At the third attempt, I successfully 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!
You can contact me via:
