SheepWars

AaronMonday, October 31st 2016

SheepWars

A realtime multiplayer game created using HTML5, Javascript and Node.js

Sheepwars

Play Online Now

Gameplay

You play as a sheep on either the Red or Blue team, your objective is to capture the opposing teams flag 10 times before the timer runs out and to prevent them from capturing yours.

Power-ups

At regular intervals throughout the match power-up crates will drop, pick one of these up and it'll give you super speed, more health or a better weapon.

Controls

Desktop

  • Move with W, A, S, D
  • Aim with the mouse
  • Click to fire (You can fire in any direction)

Mobile

  • Touch and drag to move
  • Tap the fire button to shoot

How it works

Multiplayer (Networking)

Client, Server Communication diagram Websockets (Socket.Io) communicate all player input, in the diagram above player movements are sent to the server. The server then sends all movements to the client.

Input

Processing player inputs on the server ensures that players cannot cheat by moving their character directly or by falsely informing the server that they have killed a player. This does however mean that all your inputs must be sent to the server, processed and the resulting update sent back to the client before anything can happen on screen (60 times a second). This is not a problem with fast internet connections, but with slower connections or connections with high latency this can make the game difficult to play.

Mobile input

Mobile input screenshot On mobile an alternative touch friendly overlay is presented to the user.

Physics

Physics runs on the server using p2.js, this ensures that all clients show the same representaion of the world at the same time. Essentially the clients simply render what they are sent. This allows collision calculations between projectiles and players to be very accurate, at the cost of increased bandwidth requirements.

Rendering

Using the PIXI.js library, combined with the particle effects library pixi-particles to render to a HTML5 canvas element or WebGL depending on browser support allows us to create amazing effects and highly dynamic environments.

Levels

Using JSON files that store the intial positions of all level items and their behaviours allows us to load different levels by changing the loaded JSON file. The following items are currently supported:

  • Crates
  • Floors
  • Spawn locations
  • Available powerups
  • Background
  • Flag locations
  • Hazard areas

Limitations

Games over websockets

Using websockets for online gaming is not ideal as they use TCP which means you need a low latency connection with limited packet loss otherwise you'll start to see freezes followed by a kind of fast forwarding effect, this is caused by the way TCP works if one packet is dropped all other received packets are held until the dropped packet can be re-transmitted.

TCP lost packet diagram

A better solution would be to use UDP however at present UDP is not supported in web browsers. It is however supported by node.js, electron and nwjs. In UDP packets are not ordered or retransmitted if there is a lost packet you have to handle it yourself as shown below:

UDP lost packet diagram

This is well suited to games and videos because if a packet is lost by the time it can be retransmitted the data it contained is probably out of date. In these situations its best to just wait for the next packet.