PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

With the continuous update of Flutter, support for the Web side is gradually improved. Recently, I tried the development of Flutter Web side. I wrote a crazy game 😂 : Find Troy.

Online trial address

Click on the access

The rules of the game

Rules are very simple, divided into Troy mode and Spring Festival mode, each level contains a palace grid with an element in each grid. In Troy mode, only one grid is Troy, the real gold nuggets, and the rest are Tony. In Spring Festival mode, only one grid is inverted fu, and the rest are upright Fu. All you have to do is find and click on the correct Troy or inverted fu character. There are 7 levels from 33 to 9*9, and all levels are completed.

Click the upper switch button to switch to the Spring Festival mode

implementation

The key logic

There is no complex logic in the game. N-grid cells are arranged in GridView, and the number is NN. Random(). NextInt function is used in each level to generate a Random number in NN, which is used to record the subscript of the unique different grid. Subscripts are regenerated each time a level is completed.

void setRandomNum() {
  randomNum = Random().nextInt(row * row);
}
Copy the code

When the user clicks on a grid, it determines whether the currently clicked grid subscript is one of the recorded random subscripts and continues to the next level if it is the same. Record the time upload score until the last level is completed.

If (row == maxRow && _name. IsNotEmpty) {easyLoad.show (status: status) if (index == randomNum) {if (row == maxRow && _name. 'loading... '); // The last level is completed, and the result is uploaded}}Copy the code
Data management

Data recording in the game is completed by using BMob platform, and data uploading and query are completed by using mini_BMOB plug-in. This plug-in encapsulates the Flutter end of REST API of BMOB platform, enabling Android, iOS, Web and desktop terminals to use the same generation to manage data.

Results to upload

GradeTable gradeTable = GradeTable( name: _name, grade: seconds, mode: troyFlg ? Troy mode: "Spring Festival mode "); bool succes = await gradeTable.install();Copy the code

Ranking data query

BmobWhereBuilder where = BmobWhereBuilder(); where.whereBasic("mode").equals(troyFlg ? Troy mode: "Spring Festival mode "); where.order(['grade']); BmobSetResponse<GradeTable> bmobSetResponse = await BmobQueryHelper.query( GradeTable(), (json) => GradeTable().fromJson(json), where: where);Copy the code

Set up a nickname

In order to display your results on the leaderboard, you need to enter your nickname when entering for the first time

BmobUserTable _user = BmobUserTable(
    username: _textEditingController.text.trim(),
    password: '');
bool success = await _user.install();
Copy the code

All right, ready to clock out for vacation ~