Client

Now on your root folder create another folder, this time name it client and add two files inside of it:

index.html

Here we reset the page’s margin and add two scripts, phaser and our socket.io which is retrieved from the server.

index.js

This will start our game, setting the screen resolution inside our super function

don’t worry about the Game import for now.

Inside your client folder, create the following folder structure:

assets folder

You can find both sprites here, I created the asphalt sprite myself, and got the car sprite from the internet searching “free topdown pixel car”, if the real owner/creator of the car sprite wants atribution or for me to take it down just comment here or message me.

Inside your client folder, create another folder named config with two files named fileloader.js and index.js :

index.js

fileloader.js

Here we define the default background color for our game’s canvas, and we also load two sprites: asphalt and car .

Now create a new folder inside our client folder named state , and inside of this new folder we’ll create a few others:

world

utils

sockets

predictions

player

So lets start by the world folder. Create a file named createWorld.js inside of it:

Now create the utils folder and a file named index.js inside of it:

That’s it for the utils folder, lets create the sockets folder:

newPlayer.js

We use this socket event to emit to our server that we are creating a new player in our game

updatePlayers.js

We use this socket event to update all players positions and data.

Now on the predictions folder create a file named playerMovementInterpolation.js :

This will be the only interpolation we’ll be doing.

Now create a folder named player which will contain two files:

createPlayer.js

Here we add our car sprite to the game and enable physics for it.

index.js

In this file we finally assign a sprite to our player, give him a few properties, and make him able to drive around.

Now go to your state folder and create a file named Game.js :

Your client folder should look like this:

client folder

We are done with the client folder.