Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/raminmammadzada/js-shooter-game

It is an HTML5 space shooter game I developed with a Phaser library. The game works on desktop computers and mobile devices. Several features are developed to work differently for mobile devices specifically.
https://github.com/raminmammadzada/js-shooter-game

es6-javascript eslint jest mobile-game mobile-web phaser webpack

Last synced: 12 days ago
JSON representation

Host: GitHub
URL: https://github.com/raminmammadzada/js-shooter-game
Owner: RaminMammadzada
License: mit
Created: 2021-01-30T06:06:01.000Z (almost 4 years ago)
Default Branch: develop
Last Pushed: 2021-03-11T12:21:55.000Z (almost 4 years ago)
Last Synced: 2024-11-29T00:32:26.286Z (24 days ago)
Topics: es6-javascript, eslint, jest, mobile-game, mobile-web, phaser, webpack
Language: JavaScript
Homepage: https://raminmammadzada.github.io/js-shooter-game/index.html
Size: 33.7 MB
Stars: 9
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]

phaser

Cosmos Wars: Shooter Game

A shooter game developed with phaser 3.5 game development framework

Explore the docs »

Play the game online
·
Report Bug
·
Request Feature

# Table of Contents

About The Project

Getting Started

Author

Contributing

License

Acknowledgments

## About The Project

It is an HTML5 game developed with a [Phaser](https://phaser.io/) game development library. The game was inspired by this [Space Shooter project](https://learn.yorkcs.com/category/tutorials/gamedev/phaser-3/build-a-space-shooter-with-phaser-3/) and implemented by using game development best practices as much as possible.

The specific [requirements](https://www.notion.so/Shooter-game-203e819041c7486bb36f9e65faecba27) are followed throughout the project. The game works on desktop computers and mobile devices. Several features are developed to work differently for mobile devices specifically because there is no keyboard in mobile devices and another way of player relocation must be done.

### Instructions

You will start this game by having control of a player spaceship to move around and destroy an enemy ship. Read the control instruction carefully below.

- The game starts by loading and asking you to insert your name. After that, click on the Play button to start the game.
- You will be spawned on the top left corner of the screen.
- From there, the user can navigate by clicking on the specific location to which you want to go. The user can rotate the ship body using the mouse on desktop computers. The rotation feature in a mobile device is calculated automatically when the aimed location to move is clicked.
- The User can fire a bullet by clicking the `spacebar key` on the keyboard. The target location to which the bullet is sent is specified by the mouse `pointer`.
- The enemy ship is designed to chase the player ship if the user gets close to it. The enemy ship generally goes slower than the user ship, although when it is attacked by the player ship, it increases its speed and towards the player ship.
- Player and enemy powers (healths) are displayed on the top of the screen.
- There are extra disturbers in the game, there are stones. The player's power gets lower when they touch the player. However, the player can destroy them by fire bullets at them and can get a score.

- When the player dies, it can restart the game or can go to the leaderboard scene. Either way, your score, and name will be uploaded to the leaderboard API.
- On the title screen and during the game, the user can mute or unmute the background music of the game by clicking the music icon on the bottom left corner of the screen. The user can also turn audios (such as shooting, explosion) on and off if needed by clicking the sound icon in the bottom right corner of the screen. you can navigate to the options screen to turn audio on/off.

### Live Demo

[Play the game online on GitHub Page](https://raminmammadzada.github.io/js-shooter-game/index.html)

### Built With

- [Phaser 3.5](https://phaser.io/)
- Javascript ES6
- Canvas
- HTML
- npm
- Webpack
- Jest
- Eslint
- Babel

## Getting Started

To set this project upon a local environment clone, or download this repo and follow the instructions below.

### Prerequisites

- Web browser
- CLI tool
- npm
`npm install npm@latest -g`

**Very Important Note: Some browsers may have their GPU hardware acceleration turned off. You have to turn this feature or for a smooth gaming experience. For example, use [this](https://www.lifewire.com/hardware-acceleration-in-chrome-4125122) instruction to turn chrome's GPU feature on if you experience a lag**

### Installation

1. Navigate to the root folder of your local copy and, using any CLI tool, type `npm install`, and press Enter. These will install the dependencies.
2. After it is completed,

- If you want to repack the file
- Run `npm run build` to pack the files in the src folder
- Go to the build folder and open index.html
- Else
- Run `npm run start` to open it on a live server. In webpack config, the port is set to 8072.

### Testing

- Navigate to the root folder of your local copy and type `npm run test` or `npm run test-watch` to run jest.
- You can add more tests in the `./test` directory.

### other information

- if you run into `npm ERR! Unexpected end of JSON input while parsing near...` run the following in their respective order. `npm config set fetch-retry-maxtimeout 60000` then
`npm cache clean --force && npm i`

## Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Author

👤 **Ramin Mammadzada**

- Github: [@RaminMammadzada](https://github.com/RaminMammadzada)
- Twitter: [@RaminMammadzada](https://twitter.com/RaminMammadzada)
- Linkedin: [@RaminMammadzada](https://www.linkedin.com/in/raminmammadzada)

## License

This project is [MIT]('./LICENSE.txt') licensed.

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

- [Microverse](Microverse.org)
- [Phaser.io](https://phaser.io/)
- [Free Sound](http://freesound.org/)
- [Open Game Art](https://opengameart.org/)
- [Text Craft](https://textcraft.net)

[contributors-shield]: https://img.shields.io/github/contributors/RaminMammadzada/js-shooter-game.svg?style=for-the-badge
[contributors-url]: https://github.com/RaminMammadzada/js-shooter-game/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/RaminMammadzada/js-shooter-game.svg?style=for-the-badge
[forks-url]: https://github.com/RaminMammadzada/js-shooter-game/network/members
[stars-shield]: https://img.shields.io/github/stars/RaminMammadzada/js-shooter-game.svg?style=for-the-badge
[stars-url]: https://github.com/RaminMammadzada/js-shooter-game/stargazers
[issues-shield]: https://img.shields.io/github/issues/RaminMammadzada/js-shooter-game.svg?style=for-the-badge
[issues-url]: https://github.com/RaminMammadzada/js-shooter-game/issues
[license-shield]: https://img.shields.io/github/license/RaminMammadzada/js-shooter-game.svg?style=for-the-badge
[license-url]: https://github.com/RaminMammadzada/js-shooter-game/blob/development/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/raminmammadzada/
[product-screenshot]: public/logo1.pngd