Microverse Full-Stack Web Development Education
Microverse Page »
View Demo
·
Report Bug & Request Feature
.
Short Video instruction
We have been asked to build a platform game such as the turn-based RPG game. We tried to design a simple but creative game, and implement it using Phaser.
The Game logic is, the player walks around the map, finds enemies, and destroys them. In a fight, for each enemy unit to get destroyed, the player earns 10 points. For each player character unit gets destroyed, the player loses 10 points.
-
In the boot scene, write a name and click on the "New Game" button to start a new game, or click on the "Highscores" button to see the high scores.
-
In the world scene, use arrow keys to move and try to find enemies. Use the "ESC" key to register your score and turn back to the boot scene. Use the "F1" key to register your score and turn back to the high scores scene.
-
In the battle scene, use arrow keys to move between options of menus and use the "SpaceBar" to select the currently active option.
The Game contains:
-
BootScene: This is the first scene displayed. It contains directions to a new game or the Highscores Scene.
-
WorldScene: This is the scene that is displayed when the player starts a new game. The Player has a character to move on the map in boundaries. There are several, invisible, randomly spawned boxes on this scene. When the character collides with one of these boxes, a battle begins and this scene gets swapped with the battle scene. When the player presses on the "ESC" button on this scene, the player's score gets registered by LeaderBoard API request and returns to the boot scene. When the player presses on "F1" on this scene, the player's score gets registered the same as the "ESC" button, but the player returns to the high scores scene.
-
BattleScene: This is the scene that is displayed when the player gets into a battle. Enemy characters are on the left side, player characters are on the right side. 3 different action menus at the bottom of the screen.
-
UIScene: This is the scene that controls the UI elements in the Battle Scene like action menus and characters on the screen. It gets the Battle Scene and works with it.
-
Highscores Scene: This is the scene that displays the top 5 scores of this game. It gets all scores by LeaderBoard API request, filters the highest 5 of them, and prints on the screen.
- Player Character: Character type belongs to the player which is being used to fight against enemies.
- Enemy Character: Simple enemy characters which must be found and destroyed to earn points.
- Heroes Menu, contains the list of player characters. Characters are picked by the turn, not the player.
- Action Menu, contains the list of actions. Action is picked by the player. In this game, there is only one action named "Attack".
- Enemies Menu, contains the list of enemies. The enemy is picked by the player.
Components of this project is listed below;
This project has been deployed on heroku as an application, you can visit the app on heroku to play the game on your browser.
If you want to download and try the application in your local,
- Setup NodeJs on your local machine from https://nodejs.org/en/,
- Clone the project into your local machine,
- By using proper command shell, get into the application folder and use "npm install" to install the components,
- Use "npm run start" to start the application in your local machine,
- Open your browser and visit the "localhost/8080" to play the game.
- On the boot scene, click on Highscores button to see the top 5 highscores
- Enter a name into the input field and click on New Game button to start a new game.
- Use arrow keys to walk around the map, there are invisible, randomly spawned enemies. Find and destroy :)
- For each enemy unit you destroy, earn 10 pts. For each hero of yours gets destroyed, lose 10 pts.
- Click "ESC" button to save your score and turn back to the boot scene.
👤 İlhan Sönmez
- Github: Github Repository
- Twitter: @twitterhandle
- Linkedin: linkedin
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License.