Makzan / I share what I learned

Things to know to get started HTML5 game with socket

We want to build an HTML5/JS game that connect players with socket.

Here is what we need to get started:

1. Web socket or library

2. HTML5 based game scene (a playground for interaction)

3. Showing other players into your game scene.

Let’s get into them.

1. Socket library

If we are getting started as first time, using could be a good choice to make things easier. By running their tutorial to setup both client (browser) and server (nodeJS)

2. A game scene

We need to decide what game it is. Basically there are game objects for user to interact with. Player may be controlling a space ship to avoid meteor or to shoot enemies with your energy balls. Or it is throwing balls to random baskets. Player interacts with game objects in the designed scene.

3. Showing other players in your game scene

This is where we need the socket to connect different clients to the same server.

We need to decide how we interact with other players. It is a spectrum. In one side, we can have other players appears in the same game world and directly interact with all the same game objects. In the other side, each player may be playing independently and they see each other’s game score in real time. In the middle, it could be individual game world for each player, but they affects others in some ways. For example, in Tetris game, when a player clears two or more rows, it adds two random rows to the opponent.

Published on 2017-10-05. More articles like this:
- Game Development

Previous <- A rear fingerprint sensor may trigger accidental purchases.
Next -> Coding Rails app with iPad and Cloud9

📬 Subscribe to Makzan’s Weekly Dispatch

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content:

What to expect: If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.