JS Retro Shooter

This project is inspired by the game "ASTRO WARRIORS" by SEGA. The project is a vertically scrolling shooter. Set in space, the player flies a spaceship shooting enemy spaceships to reach the mother ship of an invasion force.

Game Design and Development Process

The design and development process was a quite challenge for me.

After I collected all required assets for a project I started studying the best practices for building games using the Phaser framework. The main objectives were to decide how to organise code and modules should I have.
So the main file is just starting the Boot process and adding all required scenes (in separated files).
Next day I created basic templates for entities that I need (player, enemies, buttons, lasers) and what shared functionality and attributes they should have.
Then I focused on was how to handle the physics and motion frameworks it provides.
Getting all together was about building the project while keeping the following concepts in mind: 5.1. MVP - Building the main functionality before going further in implementing additional features. 5.2. I made sure that the build was deployable by enabling it to work locally and via a hosting service. 5.3. The visual aspect of the game is subject to change, I made sure I met all functionality requirements I laid out before proceeding.

Features

Menu navigation
Game scene with player and enemy spaceships
Animations on player and enemies death
Scoring system
Game Over scene with a form for saving scores
API implementation of Leaderboard
Retro style of SEGA games

Future Features

Improve the UI of Menu navigation
Background Music and sound effects
Paralaxing Backgrounds
Add levels to the game
Each level should have more attacking enemies and different types of them.

Screenshots

Built With

Javascript ES6
Phaser 3 (Game Engine)
HTML & CSS
Webpack, npm & Babel
Eslint & Stylelint

Live Demo

Check it out

Navigation in Menu

The player can navigate to the following scenes after the game loads 1.1. Credits: This is where we give credits to the ASTRO WARRIOR and the creator of the game. 1.2. The Top: The scene where top 5 players are displayed. 1.3. Play: We navigate to the game scene.
A player can fire a laser to kill the enemy.
The enemy can also fire laser and kill the player.
After the game is over, the player will be navigated to Game over scene where he/she has the option to enter a username and press ENTER to submit and save score .

Game Play

Use the ← ↑ → ↓ arrow keys to control movements of ship/player 1.1. Key Up is for moving upward 1.2. Key Down is for moving downward 1.3. Key Left is for moving backwards 1.4. Key Right is for moving fowards
Use the spacebar to shoot.

Getting Started

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

git clone https://github.com/bettercallazamat/js-retro-shooter.git
cd js-retro-shooter
npm i
npm start It will start the game in the browser automatically

Prerequisites

Node.js is required to install dependencies and run scripts via npm.
A modern browser

Available Commands

Command	Description
`npm install`	Install project dependencies
`npm run start`	Build project and open web server with running project
`npm run build`	Builds code bundle with production settings (minification, uglification, etc..)
`npm run test`	Runs unit tests using Jest framework

Author

👤 Azamat Nuriddinov

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Fork it (https://github.com/bettercallazamat/js-retro-shooter/fork)
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

Show your support

Give us a ⭐️ if you like this project!

Acknowledgments

Microverse
Developers at Open Game Art for the characters, sprites, lasers, etc.

bettercallazamat/js-retro-shooter