This is my capstone assessment where I was tasked with building a shooter video game using Javascript and the game engine Phaser.
Explore the docs »
Report Bug
·
Request Feature
This is a 2D browser-based shooter game built with Phaser 3. The main character is a witch who gets attacked by a magic troll and his wolf trying to stop them from collecting coins. For every coin collected, you will get 10 points and in the end you can see how you compare to other users.
When the game loads, you will be taken to a screen with 4 options:
- Play => this takes you to the screen with the instructions. After reading the instructions you can choose to go back to the main menu or to start the game
- Options => from here, you can enable or disable the music/sound.
- Credits => You can see the design details and contributions.
- Leaderboard => from here, you can see the users with the top scores and try to beat their scores
You can use the following controls to play the game:
- ⬅️ - Press the left arrow key to move left.
- ➡️ - Press the right arrow key to move right
- ⬆️ - Press the up arrow key or the space bar to jump.
- X - Press the 'X' key to shoot the enemies.
- I used this sprite pack from Pipoya for the animations
- I used this pack from Marwam for the parallax background effect.
- I used this music pack from Muhammad Riza for the sound
- Role: Main Character
- Witch's Attack:
This project was built using these technologies.
- HTML
- CSS
- Javascript
- Phaser 3
- Webpack
- Leaderboard API service
- Eslint
- Stylelint
- Babel
- Jest
- ES6
- NPM
- On the first day, after requesting for my project, I spent the day reading the requirements and looking at tutorials. I then set up my repository, configured my webpack and gathered the character sprites, background and music that I would be using in my project. By the end of the day, I had a shell of the game I wanted to create.
- The next day, my plan was to start the game logic, however I got stuck and needed to watch a few more tutorials about the game. By the end of the day, I felt I had a deeper understanding of how to approach the project.
- On the second working day, my intention was to do the game logic. I spent the day working on the game logic. I also completed the scores and implemented my API key for the leaderboards.
- On the third day, I completed all of the other scenes (preloader, title, game over, etc.). Then, I worked on testing my project and deploying my project to netlify. By the end of day 3, I had a fully functional project that was ready to submit for a review. All that was left was to complete the README.
- Over the weekend, I asked various friends and family members to play my game in order to make sure all of the features are working correctly. I then played the game myself in order to create a few gifs to add into my README. I also then began writing my README documentation.
- On the morning of day 4, I finished my README and prepared to submit my project for a review.
- To get a local copy up and running follow these simple steps.
- $
git clone git@github.com:BrittanyBlake/JS-Shooter-game
cd
into the project directory- Run
npm install
to install the necessary modules - Run
npm start
to automatically open the local server
👤 Brittany Blake
- Github: @BrittanyBlake
- Twitter: @bbcodes_
- Linkedin: Brittany Blake
Give a ⭐️ if you like this project!
This project is MIT licensed.