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 codebook or 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.

mkdir tank

You can check if you have it with ls.

Now change into it your tank game code directory.

cd tank

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.

mkdir assets

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.

Initial Tank Game Assets
File Name Size Description
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.