- About the Project
- Installation
- Control's
- Live Link
- Game Design
- Game Play
- Journey
- Built With
- Future Updates
- Contact
- Acknowledgements
I have built a 2D shooter game inspired by 'Naruto Shippuden' anime. The game is only browser-based, built with Phaser 3. The main character 'Naruto' fights his arch-enemy 'Sasuke'. The objective of the game is to collect as many coins as you can while 'Sasuke' will try his best to stop you.
For each coin you collect +10 points will be added to your score. In the end, you can enter your name on the leaderboard and check the highest scores.
- On Game loading Screen, it will play the cut-scene
- The main menu has 4 options
- Play button to start the game
- Options button where the player can enable/disable the background music
- Credit button where the player can see the contributors to the game
- Top Scores button where the player can see the leaderBoard
Enjoy playing it and try to break the high score 🔥
- (←) left arrow key => Move left
- (→) right arrow key => Move right
- ( ↑ ) up arrow key or Space bar key => To jump
- ( X ) key => Fire Rasengan
To run 'Naruto Shippuden Game' locally, clone the repository, navigate to it's containing directory.
git@github.com:jaspreet-singh-sahota/shooting-game-javascript-capstone.git
cd shooting-game-javascript-capstone
npm install
npm startNow it will successfully open 'Naruto Shippuden' locally in your browser.
- A bit of HTML and CSS for the front end
- Phaser 3
- Webpack
- Eslint
- Stylelint
- Babel
- Jest
- ES6
- NPM
- Github
- Netlify for the deployment
- Leaderboard API service
The game uses high-quality sprites to bring all scenes to life. User can expect well-designed animations and map textures. I used this sprite pack for animations and for the parallax background effect.
- Health: 100
- Damage: 100
- Attack: Rasengan
- Damage: 100
- Attack Name: Rasengan
- Health: 100
- Damage: 100
- Attack: Amatrasu
- Damage: 100
- Attack Name: Amatrasu
- AKA: Black flame
| DAYS | OBJECTIVE | DESCRIPTION | OUTCOME | STATUS |
|---|---|---|---|---|
| Day 1 | Game Design | I read the requirements of the project and after that, I concluded that I will build a 'Naruto Shippuden' themed shooting game. During the 1st half of the day, I designed the basic structure and flow of the game, I immediately start working on the layout of the game by gathering the sprites, music and other images. During the second half, I continue to work design of the game. | By the end of the day, I was able to complete the template that I wanted to build. | ☑ |
| Day 2 | Game Logic | During the 1st half, I watched 2-3 tutorials For a better understanding of Phaser 3. After gaining the basic knowledge of how things work in Phaser 3. I started working on the game logic. During the 2nd half, I kept on working on the logical part. | By the end of the day, I had a fully functional game that used Webpack to bundle all files (HTML, CSS, JavaScript ) to start the game. | ☑ |
| Day 3 | Game Template | After completing the game logic all that is left is to work on the preloader and menu for the game. For that, I used the template provided by the Microverse. I followed the instruction given in the template while playing around with the code to implement some of my ideas. I completed the scoring system by using the provided API (Leaderboard API service) | By the end of the day, I had a fully working game that ran on my local environment. I still had some styling to do, but in general, I had a working project. | ☑ |
| Day 4 | Testing, Styling, and Deployment | I added the final design details to the game, like background images and personalized logo. I refactored my code to be able to test it using Jest. I made the tests for the modules I created to add functionality to the Phaser module. Finally, I deployed the app to Netlify. | By the end of the day, I had a complete project that was accessible everywhere through Netlify hosting. I separated the Dom and logic files and created tests for the methods I coded and implemented, and everything was up and running. | ☑ |
- Add health bar
- Add more characters
- Make a mobile version
- Add more levels
- Add special attack feature
👤 Jaspreet Singh
Give a ⭐️ if you like this project!
This project is MIT licensed.