This is Microverse's final project in Javascript's course.
In this project, I build a shooter game using JavaScript's framework Phaser 3, a "fast,free and fun open-source framework for Canvas and WebGL powered browser games".
This is an original shooter game built from scratch using Phaser 3 and vanilla Javascript OOP best practices. The game is called The Witcher.
The Witcher is a slightly different shooter game in which enemies will spawn from the top and the right side of the game canvas. The main character 'Pipoya' fights in the 'Magic Cliff' to prevent monsters to enter her world. You control Pipoya's movement with the arrow keys while shooting arrows with space and jumping with the up arrow key. Defeat as many enemies as you can before you run out of health or time!
You get points after killing an enemy. Each enemy will give a different fixed number of points. You'll also receive extra time after killing an enemy.
In the end, you can enter your name on the leaderboard and check the highest scores.
- Use the right and left arrow keys to move Pipoya around the map.
- Use the up arrow key to jump to evade enemy attacks.
- Use the space bar to shoot Pipoya's arrows.
You can play the game online clicking here or locally following these steps:
- Click on the green button "Clone or Download"
- Click on Download ZIP
- Extract the game
- In your terminal, navigate to the game's folder
- Run 'node server.js'
- Open, in your browser, 'localhost:8080'
- Beat my record and make my name disappear from the Leader Board
The game uses high-quality sprites to bring all scenes to life. You can expect well-designed animations and map textures. I used this sprite pack for animating heroes and enemies Game Objects and this one for rendering the map.
- Health: 100
- Damage: 10
- Weapon: Arrow
- Health: 20
- Damage: 5
- Weapon: No Weapon
- Points: 40
- Health: 50
- Damage: 10
- Weapon: No Weapons
- Points: 90
Tip : Don't fight this guy if you want to remain alive.
- Health: 200
- Damage: 30
- Weapon: Mace
- Points: 100
- JavaScript
- A bit of HTML and CSS for the front end
- Phaser 3
- Webpack
- Eslint
- Stylelint
- Babel
- Jest
- Express
- Node
- ES6
- NPM
- Github
- Heroku for the deployment
- Leaderboard API service
Use "npm run-script " followed by any of the following commands :
- "build": "webpack --mode production"
- "watch": "webpack --mode development --watch"
- "test": "jest"
- Add MMORPG functionality
- Add Music
- Make a mobile version
- Develop the lore
- Add more complex levels and worlds
👤 Diego Antonio Reyes Coronado
- Github: @xtrmdarc
- Twitter: @diegoreyesco
- Linkedin: diegoreyesco
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!