JS-Shooter-game

Shooter Game

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

Table of Contents

• About the Project
  • Built With
  • How it works
• Game Design
• Game Development
• Contact
• Acknowledgements

About The Project

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

How It Works

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.

Game Design

• 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

Witch

• Role: Main Character

• Witch's Attack:

Enemy Troll

Enemy Wolf

Game Play

Loading Screen:

Menu Screen:

Disable/Enable Audio:

Credits:

Leaderboard:

Instructions:

Game Play:

Game Over:

LIVE DEMO

Link to live demo

Built With

This project was built using these technologies.

• HTML
• CSS
• Javascript
• Phaser 3
• Webpack
• Leaderboard API service
• Eslint
• Stylelint
• Babel
• Jest
• ES6
• NPM

Game Development

Day 0:

• 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.

Day 1:

• 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.

Day 2:

• 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.

Day 3:

• 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.

Weekend:

• 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.

Day 4:

• On the morning of day 4, I finished my README and prepared to submit my project for a review.

Getting Started

• To get a local copy up and running follow these simple steps.

Clone the repository to run the app.

• $ 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

Authors

👤 Brittany Blake

• Github: @BrittanyBlake
• Twitter: @bbcodes_
• Linkedin: Brittany Blake

Acknowledgements

• Microverse

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.