How to use station B barrage to control the game

Hi everyone, I'm Kasong.

The Mid-Autumn Festival is boring at home, I want to have fun all the time. Thought to want to make a decision Tankedaizhan control with a barrage of .

The specific logic is:

1. Monitor the barrage of water friends in the live broadcast room
2. Extract the effective instructions from the barrage
3. Convert instructions into keyboard keys to input tank battle
4. Live tank battle game screen

In this way, the complete logic from the operation of display is realized. All water friends in the live broadcast room can participate in the game. The following is the actual effect:

Let's take a look at the technical details.

Monitor the barrage of water friends

In this step, I use puppeteer DOMNodeInserted event in my live room.

DOMNodeInserted event is triggered when a node is inserted into another node as a child node

When triggered, filter out the nodes belonging to the barrage based on the class name.

It has to be said that the barrage data of station B is really easy to capture, and they are all stored in $('.chat-item.danmaku-item').dataset() .

Command recognition

After grabbing the content of the barrage, some additional processing is required, such as:

• 12345 represents up and down, left and right , you need to identify the barrage with these numbers
• The barrage of the odd-numbered nicknames controls the player 1’s tank , and the even number controls the player 2’s tank
• Handle the situation where multiple people send barrage at the same time

My approach is to set a time interval (200ms) and count the number of various instructions received within this time.

The command with the most occurrences after the expiration of 200ms is regarded as the final command.

Demon Change Tank Battle

Then I started looking for open source Battle City, this warehouse star Up: Battle-City

At first I thought the author was using canvas implement the game, but when I saw these file names, I knew it was not that simple:

The whole game is actually made by React !

The bullet is the React component, the scene switch is the route switch, and the Redux-Saga state management.

I have to say that when this project is written down, the Redux-Saga state management program must have understood it.

Communication between projects

In order to transfer the instructions identified in the B station barrage capture project tank websocket protocol needs to be used.

Here I chose the socket.io library.

cors: true socket.io configuration of the server (that is, the barrage capture project) to solve the cross-domain problem.

In the tank , the received command is structured as keyboard event sent out:

const fireKeyEvent = (evtType: string, keyChar: string) => {
  var KeyboardEventInit = {key: keyChar, code: keyChar, location:0, repeat:false, isComposing:false};
  var evtObj = new KeyboardEvent(evtType, KeyboardEventInit);
  document.dispatchEvent(evtObj);
}

Summarize

There are no technical difficulties in the whole process. The only pitfall is that the live broadcast has a delay of about 5 seconds, so there is a delay from the launch of the barrage to the operation of the tank.

In the case of a 5-second delay, the originally mentally handicapped computer is simply a god.

In order to reduce the frustration of the players, I decided to let the players play against each other.

In this way, everyone is on the same starting line.

Finally, in a barrage, spent a peaceful Mid-Autumn Festival night.

I’m not talking about the friends in the live broadcast room, I’m talking about myself, it’s really boring...

Welcome to join the human high-quality front-end framework research group , lead the flight