These days I am trying to implement a simple multiplayer game with 2 players. The game logic is on the server side, which means, the creation and moving of the players. I also want to implement balls which are bouncing around the canvas. How can I implement this? On the server side or client side? I think it's better to create them on the server, but I have tried this and the creation is ok but afterwards when I send the position of my balls to clients, each ball has same position and when the server tries to move the balls they're not moving e.g changing the position. The worst part is that I can't render them. Anyone had already experienced this kind of problem and has solved it? How can I solve this problem of bouncing of the balls ?
1 Answers
Hope it is not too late for the question. Building a multiplayer game is actually a very big topic. You've got misunderstandings in a lot of concepts in your question.
Firstly, it is recommended to have game logic in the server side and only the server can decide the real position and movement of the balls. This is called a authoritative server. Then you render the balls on the client side, which is usually just a browser page. You can use Canvas API or WebGL to implement that. If it is just 2D game, Canvas API will be enough. This means you will need to do the same creation, update and delete entity operations on both server and client sides. You will probably need to share the same ball model between the server and the client. Since you are using javascript in both sides this wouldn't be an issue.
The most important part for a basic multiplayer game is the communication between server and client. Whenever you create a ball on the server, you need to send the ball information to all the clients. Then you need to create the same ball on the client side. And after that you need to update all the ball information on the server and send to the clients at a fixed interval. Once you receive the update information you can change that information on the client so that your balls can "move". Rendering them is easy. You just clear the screen and draw them on the new position.
The bouncing of the balls is related to collision detection. You can search Collision Detection or entity hittest for more detail information.
