Creating a Basic Phaser3 Tank Game
Phaser3 is a amazing tool for making basic games as well as highly complex ones. Here’s how to make the simplest tank game possible. We won’t use a physics engine in this game. Instead we will do our own math and trigonometry, so pay attention in your math classes at school.
But First …
First we need a place to put our code. I’ll call mine
tank. Create a project repo or directory if you prefer. Make sure you have some way to back up your game.
Step by Step
First we need a
tank directory to put it in. You can reuse your
www or any other project repo is you wish.
Navigate into the parent directory in which you want to make your
tank directory. You might already be there is you are opening a terminal from VSCode.
Let’s make it.
You can check if you have it with
Now change into it your
tank game code directory.
If you enter the
ls command here you won’t see anything. Why?
⚠️ If you are using VSCode make sure to reset:
code -r .
Don’t forget the
.(everybody does) and there is a space before the dot.
Now we can make a directory for the
assets as usual. There are not that many so I won’t be making subdirectories this time for images and sounds but you can if you want.
Now we need some art for our game. Here’s a list of the art in the order that we need just for now. We’ll need more later.
|bg.png||1024x768||Background for whole game.|
|p1.png||32x32||Player 1 tank.|
|p2.png||32x32||Player 2 tank.|
|shell.png||10x10||Shell being shot by either.|
Let’s use one of our favorite online art tools.
Once you have the assets you can start a Phaser3 game as usual.
💡 Now might be a good time to try an HTML5 document challenge to refresh your memory.
Now we are ready to start making things appear and happen, first the background.