Code a BRILLIANT multiplayer game 🚀 in 2 MINUTES!
Tags: challenge, javascript
Published: 2019-09-20 20:15:26

*Disclaimer: your definition of brilliant may vary*

# Where to start 
The hardest part of coding up multiplayer games is the setup, it's just a sh*t tonne of boilerplate:

## Setting up the server
- Creating the player object 
- Setting up the socket
- The tick rate
- Players joining the game
- Players leaving the game

## Setting up the client
- Creating the canvas
- Connecting to server
- Rendering the **entire** game

# WAIT!!! 🛑
Don't give up on this blog already. I've been a proper good lad and compiled a quick starter project for you so you can just completely ignore all of the stuff above.

## What is [P5 Multiplayer Game Starter](https://github.com/LukeGarrigan/p5-multiplayer-game-starter)?
It’s a very simple way to kick-start your multiplayer game development using express, socket.io and p5.js. It represents an opinionated approach to multiplayer game development which should allow you to skip the laborious beginning boiler-plate steps.

## How to use this magical repository?
1. `git clone https://github.com/LukeGarrigan/p5-multiplayer-game-start.git`
2. `npm install` in the root directory
3. `npm start` to get it running!

# Details

The project is very simple, it sets up a client Player class and a server Player. Every 16ms the server emits the current state of the game to the client. If a new client joins the server a new Player will be added to the game and displayed on all clients, it also automatically removes players when they leave the game. These are the standard features I frequently have to reproduce when creating a new multiplayer game, so I hope you find this as useful as I do!

Each client will be a player of your game, they all communicate with the server. The server will control all the game state, such as the player position. The position of the player will be emitted to the all of the clients so that each client can render (using p5) the player in the game!
![image of server to client architecture](https://www.oreilly.com/library/view/mastering-c-game/9781788629225/assets/15371b3c-817a-4dd0-8f36-3efc7ed10f5d.png)

# A demo of your game so far!
A player joins the game by going to localhost:8080

![Player joins](https://camo.githubusercontent.com/bac8483e8a1a60836350c70837a1678d4d22f815/68747470733a2f2f736e61672e67792f3130683643732e6a7067)
Your friend then joins!

![Your friend joins](https://camo.githubusercontent.com/e7ad183e1f4a6fb24262c9fbceea844a45f2741d/68747470733a2f2f736e61672e67792f4a706562456d2e6a7067)
Your friend sees how bloody good you are at the game and quickly leaves..

![Your friend sees how bloody good you are at the game and quickly leaves](https://camo.githubusercontent.com/bac8483e8a1a60836350c70837a1678d4d22f815/68747470733a2f2f736e61672e67792f3130683643732e6a7067)

So basically, in its simplest form the repository handles clients joining and leaving the game.

So there we go, what I recommend you do is having a play around with the repository, add some basic physics, get some interaction with the clients. This should give you the very basic building blocks of your next IO hit!

# Finally
I hope this helps some of you and I would love to see the games you create with the starter project! Please share them in the comments 😁

Follow me on twitter if you don't want to miss out on absolutely brilliant programming insight: 🤣 [@luke_garrigan](https://twitter.com/luke_garrigan)

Thank you, if you like my rambling check out my personal blogging site at https://codeheir.com/

## This blog is sponsored by <a href="https://www.codecanvases.com">Code Canvases</a>

Make your room come alive  with the coolest programming/coding canvases on the market.<a href="https://www.w3schools.com"> codecanvases.com</a> is the number 1 seller for programming prints with 100% exclusively designed canvases. Get them now whilst they're **20% off!!**
![[https://codecanvases.com/](https://codecanvases.com/)](https://cdn.shopify.com/s/files/1/0311/0151/7955/products/jqbr8djyof6ktl8qopmkpvy4_480x480.png?v=1585483987)