Building an Interactive TikTok Live Game with Js

Motivation

A not-that-used feature of TikTok is its live streams, where we can interact with streamers through chat, likes, and gifts, making the experience more engaging. But what if we could not only interact with streamers but also play games?

There are live streams where viewers can directly interact with the games themselves, after discovering this format I thought it would be fun to develop a game like that, and that's what we'll talk about.

The game we'll create is tug of war, but with a cute and exciting twist... I would like to express my heartfelt thanks in advance to @BrunaUmgelter for her incredible work on the game's artwork.

Gameplay Mechanics

Our game will feature 2 teams, red and blue, represented by 2 characters, players will join these teams, and their likes will be converted into strength for their team every turn (1 second), and the team with more strength will make our character pull the other toward a big drop into a small pool.

But don't worry; they are excellent swimmers. Upon winning, the character will celebrate with their respective grandstand.

Architecture

We will work on three fronts:

• Our server, which will listen to the live stream and provide this data through a websocket.
• Our game logic file, which will listen to our server, waiting for events from live stream interactions.
• Our game interface.

Setting Up the Server (server.js)

With the server, it will be possible to connect to live streams through the tiktok-live-connector package and subsequently provide this data to our game via a websocket:

Implementing Game Logic (game.js)

The game.js file is where all the game logic is concentrated. Firstly, it listens to events coming from our server.js, and based on these events, it performs actions such as assigning players to teams, increasing team strengths, determining the stronger team, executing the character pulling action, determining the winning team, and manipulating elements of our interface.
Once connected to a live you must comment '#1' to join blue team or '#2' to join red team.

Listening to events, assigning players to teams, and computing likes:

Manipulating the interface to move characters, handle defeats, victories, and celebrations:

Building the User Interface (index.html)

Our interface includes all the visual elements that will be manipulated such as the characters, the pool, the surroundings, and the grandstands:

Result

For those who want to test and/or contribute to the project, here is the GitHub link: https://github.com/northoniserhardt/tiktok-live-game

Next Steps

For the continuation of the project, some interesting points could include:

• Adding photos of the team's players to the crowd in the grandstand.
• Keeping track of team victories.
• Display a ranking with photos of viewers who contributed the most strength through likes.

Conclusion

I would like to thank everyone who has read this far and once again, @BrunaUmgelter for her collaboration. Please feel free to send questions, suggestions, and critiques.
Big hugs.