Rogue Tanks: 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

1. About The Project
   • Instructions
   • Live Demo
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Testing
   • Other information
3. Author
4. Contributing
5. License
6. Contact
7. Acknowledgements

About The Project

This desktop browser tank shooter game is developed using the Phaser Javascript framework. The requirement for this project is stated here. Under the hood, Javascript ES6 is the main programming language used. The inspiration behind this project is to create a browser game that looks like a classic retro game by applying fundamental game development guidelines and designs as well as structured and readable code.

Instructions

You will start this game by having control of a tank to move around and destroy enemy tanks. 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 and start the game.
• You will be spawned on the bottom right corner of your screen.
• From there, you can navigate and move forward and backward using W and S keys. You can rotate the tank body using A and D keys.
• The turret of the tank is the body part that fire bullets or cannons. You have to rotate it using your mouse button.
• To fire, point your cursor on an enemy tank with your mouse and click on it or hit the spacebar key.
• Enemy tanks are designed to chase you if you get close to them. They are faster in general, but you can boost your speed using the E key.
• Your score and health are displayed on the top left and top right part of the screen respectively.
• Your health will regenerate every five seconds if your hit.
• When you die, you can restart the game or head back to the menu. Either way, your score, and name will be uploaded to the leaderboard API, and you will a status - created 201 message on the gamover screen. If you see another message other than that, the API server and/or your internet conncetion may be down.
• On the menu screen, you can navigate to the options screen to turn audio on/off. The credits screen will show information regarding the developer, and the leaderboard screen will fetch scores.

Live Demo

Play the game online on Netlify

Built With

• Phaser 3.5
• Javascript ES6
• Webpack
• Jest
• Eslint
• Babel
• Canvas
• SCSS
• HTML
• npm
• Tiled Map Editor

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 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 i, and press Enter. These will install the dependencies.
2. After that 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. NB The port is set to 3000.

Testing

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

other information

• I have used underscore score to identify private properties and methods in some classes. As you can see in this eslint documentation it's purely a preference, and I have disabled the respective eslint rules off.

• pixelArt: true, roundPixels: true, rules can be used to enable the pixeled retro look. Just append them inside the config file.

• 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

👤 Bereket Beshane

• Github: @Berabjesus
• Twitter: @bereket_ababu_b
• Linkedin: Linkedin: linkedin

License

This project is MIT licensed.

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

• Microverse
• Phaser.io
• Tiled Map Editor
• Craftpix