Before start reading sorry for the big story but I needed to write like a story to make you understand my issues I have with my created game
Hey there I already program my game as a hobby for circa a year . I am using canvas & JavaScript . Now I have some different questions a I am not a pro and I need to know how I can continue with the given knowledge I have and which is very limited 
I have set up a nodes.js server and my script is running so and so. I tested out different ways of handling my loop.
- Starting with the First Code
I have created objects on server side and then I have send object arrays to the client. The client took the object arrays and draw the object array data received via socket.on in a loop througj the object array.
Then I have read that it’s not wise for multiplayer games to use objects via network you have overhead which you take with you and which results in a higher bandwidth each client creates cause you transport more data.
-
the Second code
So this time i created objects and transform these array objects into real array . The real array is then send to the client . The client receives the array via socket.on and draws the arrays while looping through the array. Btw the server is broadcast emitting since he is calculating all the stuff. So I broadcast emitted the ship , bullets , planets, flares …
Then I got stuck and read in the I net that you can also socket.emit to all except the client logged in . Ok since my server is calculating the x and y ( from what I have read and understood in books I have read I think it’s called authorative Concept) the server is giving all x and y and therefore I need to broadcast emit to everybody. In this Concept the Client only triggers the server based on the coordinates and the functions used like move or fire.
Was thinking ok all clients receive the Data from Server but what if I want to manipulate objects or for example create an explosion after the bullet hit the target . Also where do I put my elapsed time everybody is talking about with request animation frame? The client receives data via socket and instantly draws the x and y . Turning it on with elapsed time i got flickering and also I think I understood why because it receives all the time new x and y and the restarts with the elapsed time and each frame destroys the animation since the server calculation Is updating the drawing .I needed to find another solution
Btw somehow this solution had best Performance! Also in the Main Game Loop i always destroyed the array at the end of the loop to refill it in the socket.on loop -
Coming to the to the third code
Ok what if I just save the start and end point on the server and sending the info as a real array the client.
The client receives the real array and draws the array onto the screen . My request animation , this time with elapsed calculation is working can handle the rest. The positive side this version looked very smooth . The downside. Every time a new client logged in at a bit later time while time has passed every client had the his own animation . So there was some dissync between all of them . I somehow needed to sync the time a bit which isn’t possible as there is also latency between all connected devices. My brain started to hurt . Kept me thinking days long .
Also I though â– â– â– â– I also need to give feedback on collision cause he is always repeating the start to end animation on the client so i dismissed the code -
This brought me to back to the authorative solution . I create objects on the server side and calculate everything on the server side. My arrays are still passed as real arrays to prevent overhead. The client side got changed now
I receive the real array but instead of drawing I create an object. The objects runs through a loop. So my socket.on function goes through a loop and looks through the array received from the server . Since my objects all have a unique IDs it looks if the object with that unique is already existing and if yes then just update the objects data .
Ok here I also have a garbage collector looking all the time is everything the server is populating is existing on the client . For example if an object exist on the client but the server hasn’t send the object then delete it . In case it’s a bullet draw an explosion objects . Anyhow since the server is sending x and y I cannot use the elapsed time thingy or can I ?
Also when 3 players are connected and for example every player shoots around 20-30 bullets the performance goes down as though it’s showing 60fps it gets choppy . Bringing me to the conclusion that the error lies in the socket.on function which is iterating if and objects exist or not and that they are allin different coordinates when you look for them . If an item is at pos 150 of 160 available to find it the system iterates 149x times and finally finding it in pos 150 and then decides whether new object or update object.
Here I am stuck an would be happy if somebody can help me on finding the best solution or a small hint how I can achieve best results and which way I need to go forward as my brain starts collapsing
Thank you for reading