Retro Shooter Game With Phaser3/JavaScript

I created this web video-game which recreates some aspects of classic space-shooting games. I used the Phaser3 library for building the whole game environment and the different scenes, such as Boot, Preloader, Menu, Commands, Scores, Game and GameOver. I also used Webpack for bundling modules, classes and assets. A provided API was used to store/retrieve the players/scores.

Live Project

You can visit the live project here: Space-Shooter-Netlify

Project Presentation

Watch a short live presentation for the project here: Loom

Built With

• Phaser3
• JavaScript
• Webpack
• Git
• Jest
• Netlify (deployment)

Game Context

Your spaceship is on a mission for collecting as many space diamonds (blue and white) as possible, while avoiding collisions with enemies and their lasers.

How To Play (Browser)

• Go to Space-Shooter-Netlify... OR ...
• Follow the steps of "How To Run It (On Local System)" below
  • On the Menu scene, enter your name so we can save your name and score to our database (API)
  • Click on the "COMMANDS" button to have a look at the game's rules and commands
  • Click on the "PLAY" button to start the game
  • Use the arrow keys (up, down, left, right) for moving, avoid enemies/lasers, and to collect blue and white gems
  • Use the spacebar to shoot lasers to the enemies
  • Look at your points/collected gems at the top-right corner of the screen
  • If you get hit by an enemy or its laser, you get killed, and you will see the "GAME OVER" screen with your final score
  • Click on the "RESTART" button to play again (as a new player)
  • Click on the "SCORES" button to see the current top five scores
  • Click on the "MENU" button to go to the Menu scene

How To Run It (On Local System)

1. It's recommended to use Git's latest version.
2. Clone or download the repo: shootGame-JS to your local system
   • Click on the "Code" green button and copy 'HTTPS URL'
   • On an empty folder on your local system, open the command-line: git clone 'HTTPS URL'
3. Go to the repo root directory
4. Install webpack-dev-server: 'npm install webpack-dev-server --save-dev'
5. On your terminal, run 'npm run start'
6. When the browser opens, click on 'dist' directory

Recommendations For Playing (Chrome / Firefox)

• To avoid getting autoplay related warnings in the browser console:
  • Click on top URL left bar and show below popup
  • Then click on allow audio and video
  • Then refresh your browser, now you shouldn't get any autoplay related warning in the browser console

Tests (Code Editor Terminal / Command Line)

• Install Jest: 'npm install --save-dev jest'
• Run 'npm run test' or 'npm run watch' (for automatic Jest execution after updating the code)

Acknowledgements

• Phaser3
• Zenva: Phaser GameDev Tutorials
• York Computer Solutions: Build a Space Shooter with Phaser 3
• OpenGameArt
• Ian Peter for Spaceship (Player) image
• Xevin for Spaceship (Enemy) image
• Clint Bellanger for diamonds (gems) images
• Giphy.com
• Psyklon for star-wars-hyperspace
• Netlify

Author

Mily Puente 👩‍💻

• GitHub: @Milypm
• LinkedIn: Mily Puente
• Twitter: @MilyPuente

Contribute 👈

Any advice and suggestion for improvement are more than welcome. Visit issues' section

Show Your Support

Give a 🌟 if you like this project!

License

This project is MIT Licensed