tzvaita / js-phaser-shooter-game

A JavaScript game built on Phaser game engine. This is an arcade game where you have a battleship firing at enemy ships and projectiles appearing from the top of the screen. Scores accumulate as you destroy more enemies. Final scores can be uploaded to an API leaderboard.

JavaScript Capstone Project: Build a Shooter Game

This is Microverse's final project in Javascript's course.

In this project, I built a shooter game using JavaScript's framework Phaser 3, a "fast, free and fun open-source framework for Canvas and WebGL powered browser games".

Table of Contents

• JavaScript Capstone Project: Build a Shooter Game
  • Table of Contents
  • About
  • The game
    • How to play
    • Design
      • Player's ship
      • Enemies
      • Scenes
  • Technologies used
  • Future work
    • Technical
  • Contact
  • Acknowledgements

About

This project's objective was to build a shooter game similar to York Computer's tutorial. My game is inspired by this.

The assignment can be seen here.

Link to a live version here.

Repository: https://github.com/tzvaita/js-phaser-shooter-game

The game

This is a one player game. The game starts with the player's battleship aligned in the middle of the screen. Enemy ships start to appear from the top of the screen. The player ship can be manouvered up, down, left and right. The ship also has shooting capabilities with the produces lasers destroying the enemy ships on contact. The best players accumulate the greatest scores which can be submitted to a leaderboard.

How to play

The keyboard keys to play the game are the direction keys for movement and the space-key for shooting.

You can play the game online clicking here or locally following these steps:

• Install Node Package Manager (npm) on your machine.
• Scroll to the top of this page and click on the green button "Clone or Download".
• Click on Download ZIP.
• Extract the game to a folder of your preference.
• Open your terminal and navigate to the folder you extracted the game to.
• Run 'npm install'.
• Run 'npm start'.
• Open, in your browser, 'localhost:8080'.

Design

The game is on a canvas measuring 480 x 640 px. The background consists of two overlapping backgrounds which are constantly changing.

Player's ship

For this version, the player only has one life so first contact with enemy lasers or ships and the game is over. Lives will be implemented as a game update.

Enemies

There are three kinds of enemies. One of these fires lasers, the other one just glides through the screen in a straight line and the last one is a spinning sphere which when in near proximity of the player ship, changes course and starts to follow the player ship wherever it goes unless if it is destroyed.

Scenes

This game is composed of four scenes.

• Main Menu:

• Game:

• Game Over:

The Leader Board will only show 20 names.

Technologies used

• JavaScript
• A bit of HTML and CSS
• Phaser 3
• Webpack
• Eslint
• Babel
• Jest for the tests
• Github
• Heroku for the deployment
• Leaderboard API service for the leaderboard

Future Work

• Player lives
• Stages

Contact

👤 Tennyson Zvaita

• Github: @tzvaita
• Twitter: @tennyzvaita

Acknowledgements

• Microverse
• OpenGameArt