Technology

Introducing JaPong

I created an online multiplayer real-time game.

JaPong is an online Pong. You can play JaPong at https://yuji.page/japong. In this article, I will explain the fundamental design of JaPong with UML diagrams.

Use Cases

I assume people who want to kill time and have fun are potential players of JaPong. Depending on their situation, they might want to play JaPong with a CPU, random people online, or her fried. I ranked those sub-use cases in terms of the implementation complexity to focus on fulfilling one use case at a time.

It is the easiest to let people play Pong with a CPU. All I have to do is navigate them to https://yuji.page/pong, a single-player version of Pong that I have already created in early 2021.

To let people play Pong with random strangers, we need to connect them in one way or the other. As I will describe in the following sections, I have chosen to create virtual rooms on the server-side and have the players connect to the room with their browsers. It is a big jump from the standalone game, so I ranked this use case as the second most challenging implementation goal.

The third in the ranking is to let people play with their friends. We need another layer on top of a simple room management system to match them in the same room.

Finally, I intentionally excluded the socializing functions from the scope of JaPong so that I could focus on developing the core features.

Functional Components

JaPong is a client-server system, where the server manages rooms and their game state, and players send the game instance commands and receive the updated state of the game.

Classes

Server Classes

The interesting part of this diagram is the room management component. The room management class has many game rooms with a game instance and two web sockets to communicate with the clients. The game management system is almost identical to that of vanilla Pong.

Client Classes

The interesting part of this diagram is the user input component. I defined a class called command buffer, which has a command dictionary and a transmitter. A command dictionary is a dictionary of commands that a player input at a snapshot of time. For example, if both the left arrow key and the right arrow key are pressed down simultaneously, the dictionary will have true for both left and right keys.

Transmitter interface lets the CommandBuffer class send the up-to-date command dictionary to somewhere by any means. I had SocketIOTransmitter implement Transmitter interface. If I will change the means of client-server communication in the future, all I have to do is define another class implementing Transmitter interface and replace SocketIOTransmitter.

Sequences

The diagrams above show the lifecycle of a game room. When two people come into a room, the countdown starts. They play the game until one of them wins the game point. At the end of the game, the server announces the end of the game, sending the final scores and disconnects the clients.

Room Management

As of JaPong server version 0.2.1, it manages the game rooms in a naive way. It manages an array of rooms. When a client connects to the server, it is assigned to an available room with the lowest index in the array. If one of the clients in a room disconnects, the game gets terminated.

Deployment

Currently, I host everything on a single virtual machine in the us-central1-a region of Google Cloud Platform. First, the user visits my blog page https://yuji.page/japong, which has a JaPong client and an HTML canvas to draw the board. Next, the client connects to the room management component of the JaPong server to enter an available room. Finally, the player communicates with the game management component of the JaPong server to send commands and receive the current board information.

Summary

I have created and deployed JaPong, an online multiplayer real-time game. Although it works without any severe problem, there are things that I want to improve in the future. Some of which are implementing friend matching and reducing the network latency. I will continue working on this project and write articles about it, so stay tuned!