Pixi.JS Tank Game

👀 Displays a grid of Hays, Walls and Grass. A Player-controlled Sprite called 'tank' is moveable by using the keyboard WASD or Arrow keys. Spacebar key or Left Click shoots bullets from the player's object which can destroy Hays but not Walls. 'T' key changes the type of player's Sprite, which modifies the firing pattern.

🚀 Deployed here on Github Pages.

API Reference

Classes:

-> Game:

Handles the setup of the PIXI.Application and the generation of tiles. All classes are documented with JSDoc in the code.

-> Tile:

Represents and handles logic each tile generated by the Game class. All classes are documented with JSDoc in the code.

-> Player:

Represents and handles logic regarding the Player PIXI.Sprite. All classes are documented with JSDoc in the code.

-> Bullet:

Represents and handles logic regarding the Bullet's PIXI.Sprite. All classes are documented with JSDoc in the code.

How does it work?

1. Once the window object is loaded, the Game class is instantiated and the 'setup' method is called, generating the tiles and background Sprites.
2. The 'play' function is called, instantiating a new Player class and listening for Keyboard (moving, firing, transforming) and Mouse (firing) events.
3. Once the 'fire' method on a Player class is called, a new Bullet class is instantiated.
4. The game loop constantly checks for collisions between a Bullet instance and a Tile instance, moving any available Bullet instance. If a collision is detected between a Bullet instance and Tile instance, Tile.damage is called with parameter dmg as Bullet.#config.bulletDamageValue.

Bullets are deleted once they leave the stage or hit a Wall/Hay.

Run Locally

Clone the project

Go to the project directory

Install dependencies

  npm install

Start the server

  npm run dev

Tech Stack

Client: Pixi.JS, Typescript

Authors

• @russ0133