Space Invaders game built with Phaser 3 and TypeScript

Another Space Invaders game built with Phaser 3 and TypeScript 😂😂😂

It was based on Phaser 2 Invader official tutorial but written in Phaser 3 and TypeScript.

Working Game

Check out the working game -> https://invaders.trungk18.com

The game has sounds, wear your 🎧 or turn on your 🔊 for a better experience.

Source code

https://github.com/trungvose/space-invaders-phaser-3

Why?

I got a lot of motivation to work on some JS game after finishing Angular Tetris. I feel like gaming is a whole new world that I have never explored. For a simple Tetris game, probably I can leverage Angular with only simple state management and a game loop. But for complicated with a lot of animation stuff, I know I have to use a proper JS game framework.

Phaser is one of the most famous ones. I spent only about an hour to walk through the official tutorial to build the first game. The experience was awesome and I started to look at their example. There were several examples only for Phaser 2 and one of them is Invaders. I really like how the game look and I decide to spend time going through the source code and migrate it over to Phaser 3 with TypeScript.

In the end, what you are seeing is the result of that process. I did add some sound effects and make some changes to the UI. With only a few hundred lines of code, you could build a catchy looking game with Phaser 3. How cool is that?

Support

If you like my work, feel free to:

• ⭐ this repository. And we will be happy together :)
• 

Thanks a bunch for stopping by and supporting me!

Time Spending

I only spent a couple of hours on one weekend to read the documentation and migrate the source code to Phaser 3. Based on the report, 8 hours was the total time spending. Monday, August 10 is a public holiday in Singapore so I have the right to finalize and publish the game 😎

Available Commands

Node.js is required to install dependencies and run scripts via npm.

Command	Description
npm i	Install project dependencies
npm run watch	Build the project and open web server running project, watching for changes. The web server should run on http://localhost:4201
npm run dev	Builds project and open web server, but do not watch for changes
npm run build	Builds code bundle with production settings (minification, no source maps, etc..)

Configuring Rollup

• Edit the file rollup.config.dev.js to edit the development build.
• Edit the file rollup.config.dist.js to edit the distribution build.

You will find lots of comments inside the rollup config files to help you do this.

Note that due to the build process involved, it can take around 20 seconds to build the initial bundle. Times will vary based on CPU and local drive speeds. The development config does not minify the code in order to save build time, but it does generate source maps. If you do not require these, disable them in the config to speed it up further.

Author: Trung Vo ✍️

• A young and passionate front-end engineer. Working with Angular and TypeScript. Like photography, running, cooking, and reading books.
• Author of Angular Jira clone and Angular Tetris
• Personal blog: https://trungk18.com/
• Say hello: trungk18 [et] gmail [dot] com

Credits and references

The below table listed all of the awesome resources that I have referenced to

Command	Description
@photonstorm/phaser3-typescript-project-template	A quick-start project template combines Phaser 3 with TypeScript and uses Rollup for bundling
Making Your First Phaser 3 Game	Official guide to creating a small game involving a player running and jumping around platforms, collecting stars and avoiding baddies
Invaders Game - Phaser 2	Official tutorial to build Invaders game with Phaser 2. I reused its static resources but converting the code to Phaser 3
Phaser 3 API References	All of the API that you can refer to while working with Phaser 3
Phaser 3 and TypeScript Tutorial	How to build a simple game in the browser with Phaser 3 and TypeScript
Space Invaders Sounds Effects	Sound effects from the classic arcade game Space Invaders released in 1978 by Taito.

Upcoming

I am having some ideas to start building some of my favorite games (and easy to build 🤣). It could be

• Enhance the Angular Tetris with a few more games: racing, tank shotting.
• Duck Hunt

If you would like to collaborate, tag @trungvose on Twitter 👏👏👏

Contributing

If you have any ideas, just open an issue and tell me what you think. Notes that it is a very simple game, you could add in a lot of stuff: introducing level, add more invaders and stuff like that.

If you’d like to contribute, please fork the repository and make changes as you’d like. Pull requests are warmly welcome.

License

Feel free to use my code on your project. It would be great if you put a reference to this repository.

MIT