Hello, everyone. I am Karsong.

Mid-Autumn Festival at home boring, want to do some fun. After much deliberation, I decided to make a tank battle with barrage control.

The specific logic is:

  1. Listen to the barrage of water friends in the broadcast room

  2. Extract valid commands from the barrage

  3. Convert commands to keyboard keys to enter in tank Battle

  4. Live tank battle game screen

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

Let’s look at the technical details.

Listen to the barrage of water friends

In this step I use puppeteer to listen for the DOMNodeInserted event in my webcast.

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

When triggered, nodes belonging to the barrage are screened out according to the class name.

$(‘.chat-item.danmaku-item’).dataset(); $(‘.chat-item.danmaku-item’).dataset();

Instruction to identify

After capturing the content of the bullet screen, some additional processing is needed, such as:

  • 12345 means up, down, left, right, and need to identify the barrage with these numbers

  • An odd number of nickname lengths for the water buddy’s barrage controls player 1’s tank, and an even number controls player 2’s tank

  • Deal with multiple rounds firing at the same time

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

The instruction that occurs the most times after 200ms is the final instruction.

Demonic tank battle

Next I started looking for open source tank battles, which had the most stars: Battle-City

At first I thought the author was implementing the game on canvas, but when I saw the file names, I knew there was more to it than that:

React made the entire game!

Bullet is React component, scene switch is route switch, state management for Redux-Saga.

I have to say that when written down, the authors of redux-Saga got it right.

Project to project communication

In order to transfer the instructions identified in the bullet capture project of station B to The Tank War in real time, the Websocket protocol is needed.

In this case, I chose the socket. IO library.

It is worth mentioning that you need to set cORS: true in the socket. IO configuration of the server to solve the cross-domain problem.

In Tank Battle, received commands are sent as keyboard events:

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);
}
Copy the code

conclusion

There are few technical difficulties in the process. The only bad thing is that the live stream has a delay of around 5 seconds, so there is a delay from firing the barrage to operating the tank.

With a five-second delay, the computer, which was already a little retarded, was a godsend.

To reduce the frustration, I decided to pit players against each other.

So we’re all on the same starting line.

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

I am not to say each water friend of live broadcast room, I say myself, really enough boring……

Welcome to join the Human high quality front-end framework research group, Band fly