Space Invaders built with Phaser 3 and TypeScript

Another Space Invaders game 😂😂😂

It was based on Phaser 2 Invader official tutorial but written in Phaser 3 and TypeScript. There were quite a lot of changes between Phaser 2 and 3 but I like version 3 better. It made the code much more readable and structure.

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.

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.

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

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 @tuantrungvo 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