Space-Shooter-Game-Js

Shooter game built with Javascript using Phaser and Webpack. Capstone Project for Microverse on the top of my Javascript knowledge.

Screes

Built With

• HTML
• JAVASCRIPT
• PHASER 3
• NPM
• WEBPACK
• JEST
• GITHUB ACTIONS

Live Demo

Live Demo Link

Instructions to Play

• Enter your name.

• Press 'Play' to start playing.

• Press 'Options' to enable/disable sound features.

• Press 'Credits' to see who made it possible.

• To play you need the Keyboard and the Mouse.

• CONTROLS:

  • Press 'Up Arrow' to move Up.

  • Press 'Down Arrow' to move Down.

  • Press 'Left Arrow' to move Left.

  • Press 'Right Arrow' to move Right.

  • Press 'Right Click' to SHOOT.

• Use the mouse for the non-game and dialogues screens.

• Have Fun Playing!

Game Development

• Ideation

  During the planning phase of the game, I was faced with the conundrum of recognizing that there are plenty of shooter games out there most of which share the same ideas. Therefore I decided to proceed with the idea of making a space shooter game that contains a jet in space shoot enemies and collect coins to make the score

• Designing

  Designing is a very important part of game development. I found the space image on the Phaser website. I get this image and edited according to my need and rotate it on y-axes infinitely to give the effect you are actually in space. I find jet image ammo image and blast sprite from code4cause it looks perfect for me so I used it. The buttons and the loading design are the same provided in the getting started template by Zenva.

• Development

  Working with Phaser 3 is awesome. At first, it looks weird but by watching tutorials and follow the getting started guide provided by the phaser I found it very interesting and after some time, I think it is time to make my own game.

  I listed the main features I wanted in my game and designed them following the Phaser 3 documentation.

  Breifly, below are the steps I followed in development:

  • Install Phaser using Node Package Manager(npm) and set up the game configuration.

  • Design the Game scene by implementing the following:

    1. Use template provided by Zenava.
    2. Use rotated tiled background of space image.
    3. Find jet and ammo image and allow jet to fire ammo.
    4. Find bomb image and sprite shows when bomb explode.
    5. Add scouring system.
    6. Use microverse provided api to keep record of the scores.
    7. Make object to show leaderboard score.

  • Design other supplimentary scenes.

  • Add sound to the game.

  • Add and implement the Leader Board functionality using the scoring api.

  • Finalise.

• Deployment

  The game is deployed on netlify.

Getting Started

Usage

• Click the Live Demo link and enjoy playing the shooter game.

Setup

• Clone the repository on your local machine
• Cd into the folder
• Run npm install
• Run npm start
• On your browser, make sure you point to the right address (i.e: http://localhost:8080/)

Run tests

• Run npm test on the root directory to run all the tests.

Author Details::

👤 Muhammad Talha Waqar

• Github: @LamiaSristy
• Linkedin: @LamiaSristy
• E-mail: Email
• Twitter: @LamiaSristy

Contributing

There are two ways of contributing to this project:

1. If you see something wrong or not working, please open the issue in issue section
2. If you see something to improve or to correct, and you have a solution to that, follow the below steps to contribute:
   1. Fork this repository
   2. Clone it on your local computer by running git clone https://github.com/talhawaqar/Shooter-Game-Phaser3Js.git Replace your username with the username you use on github
   3. Open the cloned repository which appears as a folder on your local computer with your favorite code editor
   4. Create a separate branch off the master branch,
   5. Write your codes which fix the issue you found
   6. Commit and push the branch you created
   7. Open a pull request, comparing your new created branch with our original master branch here

Show your support

Give a ⭐️ if you like this project!

Acknowledgment

• Microverse
• The Odin Project