[Mugeda HTML5 technical tutorial 16] Case Study: create a cross-screen interactive game

In this section, we will conduct a case study of a cross-screen interactive application. When this application is used for activities in a mall, it is a cross-screen game. The PC page is displayed on the large screen connected to the PC. Players Participating in the activity can use their mobile phones to scan the QR code on the PC page. After the connection is successful, game operations on mobile phones can synchronously control the game screen and results on the home screen. The game results are recorded in the rankings, and merchants regularly reward the top 10 players.

 

The game rules are similar to the previous case of elimination of love. The game itself is based on the original standalone game and further developed for cross-screen communication.

(1) game rules:

1. When starting the game, deji's logo machine appeared on any of the top lines;

2. During the game, the blocks are randomly dropped from top to bottom and all the boxes are filled. The same three stones cannot be placed in one column or row adjacent to each other;

3. Eliminate three squares and add 200 points at a time, and add 200 points to each multiple blocks. For example, eliminate four blocks and add 400 points at a time, and eliminate five blocks and add 400 points at a time, and so on. When the game ends, determine the logo position of deji and increase the reward score. The higher the position, the higher the reward score: 0, 200, 400, 600, 1000, and 1400.

 

(2) gameplay

As long as three identical stones are arranged in one column or row adjacent to each other, they will disappear, and the square blocks on the top will fall down and fall to the position of the square blocks that disappear.

The game may encounter a situation where there is no consumable situation. Therefore, the function of resetting a column is designed. When you click the reset button, a column is randomly selected from the series in the middle, the reset button can be used three times in the game.

Game animation demonstration: After opening the following link on the PC, click the QR code on the PC page instead of the QR Code. However, the PC-side QR code is dynamically generated.

Https://cn.mugeda.com/client/preview_css3.html? Id = 937df6e5

Design Concept:

This cross-screen game was transformed into a web game based on the previous analysis. All the game logic is still the original logic. Cross-screen communication interaction is designed as follows: both PC and mobile are two game animations, there are inputs and game logic on the mobile phone end, while no inputs on the PC end are the same as those on the mobile phone end. When there is an input on the mobile phone end (that is, swap the location of two adjacent blocks), the phone end will send the numbers of the two blocks to be exchanged to the PC end, the two sides can determine whether the exchanged result meets the condition for square elimination through their own logic. If the result meets the condition, the two sides will be replaced by the corresponding square. Otherwise, the two blocks will be replaced. The design adds a fault tolerance mechanism for communication: during each communication, the mobile phone end will add the checksum produced by all blocks at the end. After receiving the checksum, the PC end will use the checksum to compare it with its own, if they are inconsistent, it indicates an error. This operation is not performed and the mobile phone is notified to send an array of all its square locations. After receiving the array, the mobile phone side will reset all the blocks on the PC side.

Key points:

1. Each time the mobile phone moves the square, it initiates a communication to the PC end with the score and checksum.

For (var I = 0; I

{

Checksum + = stoneArray [I]. type;

}

Socket. send ('action', "" + clickNum + ", "+ clickTwoNum +" _ "+ totaltime + '_' + timeBonus + '_' + score + '_' + (moveSteps) + '_' + checksum );

After receiving the block movement event, the PC parses the corresponding parameters and performs the corresponding operations.

// Put the event data in the array for parsing.

If (msg. event = 'action '){

ActionArray. push ({data: msg. data, status: 1 });

}

// Parse and process the data

Var data = actionArray [actionIndex]. data. split ('_');

Totaltime = data [1];

TimeBonus = parseInt (data [2]);

Var mobileScore = parseInt (data [3]);

Var step = parseInt (data [4]);

Var mobileChecksum = parseInt (data [5]);

Var checksum = 0

For (var I = 0; I

{

Checksum + = stoneArray [I]. type;

}

If (checksum! = MobileChecksum)

{

// If the checksum is inconsistent, send a Data Synchronization request to the mobile phone. After receiving the request, the mobile phone sends an array containing all the square codes, replace all inconsistent squares in the callback function on the PC end.

}

Else

{

// The Checksum is consistent and the action of moving the square is processed normally.

Game. applyAction (data [0]);

ActionIndex ++;

}

For details, refer to [Mugeda HTML5 tutorial 14] Case Study: create a web game

[Mugeda HTML5 technical tutorial 12] create a cross-screen interactive application

To sum up, Due to space limitations, it is impossible to explain all the code in detail in case analysis, focusing on the design ideas and some key points. In this case, we can use the Mugeda animation to realize cross-screen applications. This case is a one-to-one cross-screen game, that is, only one player can play at the same time. Through Mugeda animation, you can also implement multiple-to-one cross-screen games, that is, multiple players can play at the same time. For example, if you are a big fish or a small fish game, you can play multiple player fish on the big screen at the same time.