Where to start creating a multiplayer game like slither.io, agar.io, etc.
I need only learn how to draw live positions and other data of all players into one fullscreen HTML5 canvas with update frequency +/-100ms.
I already have websocket server but that is only chat. I dont know sending images of players and positions. My first idea is sending every 100ms array of all players positions, current position on the map and all other data of players.
var worldSize = [10000,10000]; //width and height in px
var currentPosition = [5000,5000]; //center on the map
var players = new Array();
//on player join
players.push({
id: 1,
name: "test",
position: [1234,850], //random position on the map
points: 100 //example points
});
//on player eat point find that player, update players[index].points+1 etc.
This is only my (bad) idea and I not tested it because I dont know how start, how to send visual game data via websockets. How?
Update
I checked slither.io game WebSocket console and all frames is Binary Frame (Opcode 2) and Binary Frame (Opcode 2, mask). This is short version of array of all players and their positions and all other data? Or?
For example if game play 1000 peoples, that array will be too long. This will lag browser?
