How to implement a multiplayer game?

Question

Game development

Let's take for example the simplest game, by pressing one of the keys: W, S, A, D, the square on the canvas will move along the X, Y axes.
When the user presses one of the keys, a json array of events is sent to the server by the socket, on the server, this array is processed and data with final coordinates is sent to the socket client. Then the coordinates of the square in the canvas are updated for all users.
How to implement this correctly in javascript? If I'm not mistaken, then the user can substitute his data in the request, how to get around this? Let's say the user should have received the coordinates: x = 500, y = 500, and instead of these, he substituted his own

Answer 1

That's right - to build the logic of the game so that the user's substitution of their data does not give him any advantages, but vice versa.
Multiplayer games are implemented on the server, on the client only drawing a picture as the server says and listening to which buttons it pressed.
If he draws a square for himself not where the server told him to draw, he will only make things worse for himself and will not affect the course of the game in any way.
The user can fool the server only in terms of when and what buttons he pressed, sometimes it matters sometimes it doesn't. If it does, then there are already all sorts of systems for detecting such cases, depending on the logic of the game and how much imagination is enough

Answer 2

Send only the pressed key to the server, do all coordinate calculations on the server.

Answer 3

Problems begin not only with cheating, but also trite when the connection with the server is broken. For example, when the user loses the Internet. And if you allow the player to move locally by sending coordinates, then from the server's point of view, the player will disappear for a while, and then reappear at other coordinates far from where he was.
In fact, there are many nuances here, so there is no universal recipe. Depends on your game. For example, if the game is very dynamic, then anti-aliasing must be on the client. After all, it will look miserable if after pressing W 200ms pass, and only then the box will move. It is necessary that he move immediately, and only then, if suddenly it turned out to be illegal, the server can send new coordinates and teleport the player back. Conversely, if the game is slow and clumsy (for example, turn-based), then it is more profitable to double-check each user's sneeze before displaying the action on the screen for him and everyone else.
There are even hybrid, so-called arbitration systems, when clients check clients and vote for the fact that someone is a cheater, and the server has nothing to do with it, it simply reacts to an out of sync, confirmed statistically. But this is difficult to do, and is only useful for heavily loaded servers to offload them.
In your case, as I understand it, a high load is not planned. So you can do the same as always when developing sites. Namely - never trust the client. It can send any kind of data. And you need to check and recheck them constantly in order to beat both cheating and banal errors in the code on the client.
As for the fact that a player can change some data coming from the server, this should not concern other players. Yes, the player will be able to draw himself a million dollars and move himself behind the wall by changing the coordinates locally. But on the server it should be ignored. That is, the server should consider that the player could not get there, and block all attempts to act in that area. How to calculate - it already depends on the game, on the logic of the gameplay. For example, the player had too little time to overcome such a distance (we consider the way around the wall).
If we are talking about purely technical protection against code changes on the client, then the best thing you can do is to wrap all the code in an anonymous function. It will be like a global space for other functions and variables, but it cannot be accessed through the console.

(function() {
  let x = 50;
  let y = 50;
  // и т.д. всё, как обычно, только в обертке
})();

However, this method will not stop real advanced hackers, of course. Most users - yes, but a few will be able to get around this by directly changing the network packets that come to the browser. That is why it is necessary to validate all data entering the server so that it cannot be faked.