A video game using JavaScript and the game engine Phaser
This project is part of the Microverse curriculum in JavaScript course!
Explore the docs
Live Version
Report Bug
-
Request Feature
This is an arcade Shooter Game application where the player mission is to shoot enemies coming down from the top of the screen
- Screen Shots
- About the Project
- Application Instructions
- How to play
- Live Version
- System Requierments
- Development and Dependencies
- Built With
- Contributors
- Acknowledgements
The project uses the phaser3 game engine and almost all the code is related to this framework
Webpack is used to compile src folder content and outputs to dist folder to mimify the whole package code
Game scenes:
- BootScene that start the game
- PreloaderScene loads all the assets that we will need in our game
- TitleScene Shows the main menu game, there you can choose either you want to start playing by clicking on the play button or apply some custom settings before starting to play
- GameScene is the game itself it shows the battlefield(the space) and the different actors in action
- GameOverScene appears when the player loose the game(die) and display buttons to restart the game, exit and see the leaderboard
-LeaderboardScene show the top 10 scores achieved by different players
- Some objects have been created to build the connection between all our classes and fulfill the logic of this game
Located in scr/Objects folder, we have:
- Hero (Player.js and PlayerLaser.js)
- Enemies (CarrierShip.js, ChaserShip.js, Gunship.js and EnemyLaser.js)
- Button.js
- Entities (The base class of our game principal objects(Hero and Enemies))
- Scores.js handle the score
- ScrollingBackground.js
-
In the Title scene click Play to start the game or click Leadersboard to see the top 10 user's scores
-
In the Game scene use the keyboard arrows to move in 2 dimensions and the space bar to shoot weapons against the enemy ships that are coming down from the screen top. You start with a score zero shown on top of the screen Being touch by enemy laser or crashing your ship on an enemy ship you die
There are 3 types of enemy ships :
-
The CarrierShip, that shoots lasers. A new one appears every 2 seconds. You have to avoid the lasers else you lose. Destroying an Alien Ship you get 100 points.
-
The GunShip, that chases your ship and shooting it you get 200 points. A new one appears every 5 seconds
-
The ChaserShip that just comes down the screen. Shooting it you gain 400 points. A new one appears every 7 seconds
-
-
If you die, the GameOver scene appears. If there is a score achieved then an input form appears to enter your name first and then the score is submitted to the remote score API. In the GameOver scene, you can restart a new game session or select LeadersBoard scene
-
The LeadersBoard scene shows only the top 10 scores
The Hero needs to kill enemies, avoid them and their lazers
- (←) left arrow key => Move left
- (→) right arrow key => Move right
- (↑) up arrow key => Mpve up
- (↓) down arrow key => Move down
- (Space) key => Attack enemy
- JavaScript Enabled
- You need to Disable Cross-Origin-Restrictions from your browser if you want to open the index.html from your file system without using a server.
- Clone the project
git clone https://github.com/ericmbouwe/shooter-game-js.git
Use VSCode and Live Server to show index.html
- Since webpack is used, In your terminal run
npm install
npm run dev
npm run build
npm start
In your terminal, run
npm jest
This project was built using these technologies.
- Phaser3
- JavaScript (ES6)
- HTML5
- CSS3
- webpack
- APIs
- Git - GitHub
- ESLint
- Stylelint
- Jest
👤
- Github: @ericmbouwe
- Twitter: @ericmbouwe
- Linkedin: Eric Mbouwe
- E-mail: ericmbouwe@gmail.com