Flutter for OpenHarmony 实战_消消乐游戏匹配算法与动画系统

Flutter for OpenHarmony 实战：消消乐游戏匹配算法与动画系统

欢迎加入开源鸿蒙跨平台社区： 开源鸿蒙跨平台开发者社区

前言

消消乐游戏的核心在于高效的匹配算法和流畅的动画效果。本文将详细介绍三连匹配检测算法、交换动画系统、重力填充机制、连锁反应处理以及分数计算系统。

一、匹配检测算法

1.1 棋盘数据结构

lateList<List<int>>board;staticconstint rows=8;staticconstint cols=8;staticconstint gemTypes=6;

使用8x8的二维数组表示棋盘，每个单元格存储0-5的整数代表不同的宝石。

1.2 水平匹配检测

boolcheckMatch(int row,int col){finalgem=board[row][col];if(col>=2&&board[row][col-1]==gem&&board[row][col-2]==gem){returntrue;}returnfalse;}

检查当前单元格及其左侧两个单元格是否相同，形成水平三连。

1.3 垂直匹配检测

if(row>=2&&board[row-1][col]==gem&&board[row-2][col]==gem){returntrue;}

检查当前单元格及其上方两个单元格是否相同，形成垂直三连。

1.4 全局匹配查找

Set<String>findMatches(){Set<String>matches={};for(int row=0;row<rows;row++){for(int col=0;col<cols;col++){// 检查水平匹配if(col>=2&&board[row][col]==board[row][col-1]&&board[row][col]==board[row][col-2]){matches.add('$row,$col');matches.add('$row,${col-1}');matches.add('$row,${col-2}');}// 检查垂直匹配if(row>=2&&board[row][col]==board[row-1][col]&&board[row][col]==board[row-2][col]){matches.add('$row,$col');matches.add('${row-1},$col');matches.add('${row-2},$col');}}}returnmatches;}

遍历整个棋盘，找出所有形成三连的宝石位置，使用Set避免重复。

二、交换系统

2.1 交换处理

voidswapGems(int row1,int col1,int row2,int col2){setState((){int temp=board[row1][col1];board[row1][col1]=board[row2][col2];board[row2][col2]=temp;});finalmatches=findMatches();if(matches.isEmpty){// 没有匹配，交换回来Future.delayed(constDuration(milliseconds:300),(){setState((){temp=board[row1][col1];board[row1][col1]=board[row2][col2];board[row2][col2]=temp;});});}else{// 有匹配，消除宝石removeMatches(matches);}}

先执行交换，然后检查是否有匹配。如果没有匹配，延迟300毫秒后交换回来；如果有匹配，消除宝石。

2.2 相邻检测

boolareAdjacent(int row1,int col1,int row2,int col2){return(row1==row2&&(col1-col2).abs()==1)||(col1==col2&&(row1-row2).abs()==1);}

只能交换相邻的宝石（水平或垂直相邻）。

三、消除系统

3.1 移除匹配

voidremoveMatches(Set<String>matches){setState((){for(Stringmatchinmatches){finalparts=match.split(',');finalrow=int.parse(parts[0]);finalcol=int.parse(parts[1]);board[row][col]=-1;// -1表示空score+=10;}});// 触发重力填充Future.delayed(constDuration(milliseconds:300),(){applyGravity();});}

将匹配的宝石标记为-1（空），增加分数，然后触发重力填充。

3.2 分数计算

int score=0;score+=matches.length*10;

每个消除的宝石得10分。

四、重力填充系统

4.1 重力应用

voidapplyGravity(){setState((){for(int col=0;col<cols;col++){int emptyRow=rows-1;for(int row=rows-1;row>=0;row--){if(board[row][col]!=-1){if(row!=emptyRow){board[emptyRow][col]=board[row][col];board[row][col]=-1;}emptyRow--;}}}});// 填充新宝石Future.delayed(constDuration(milliseconds:300),(){fillEmpty();});}

从下往上遍历每列，将非空宝石移到最下方的空位置。

4.2 填充空位

voidfillEmpty(){setState((){finalrandom=Random();for(int row=0;row<rows;row++){for(int col=0;col<cols;col++){if(board[row][col]==-1){board[row][col]=random.nextInt(gemTypes);}}}});// 检查连锁反应Future.delayed(constDuration(milliseconds:300),(){finalnewMatches=findMatches();if(newMatches.isNotEmpty){removeMatches(newMatches);}});}

用随机宝石填充所有空位，然后检查是否有新的匹配，实现连锁反应。

五、CustomPainter绘制

5.1 宝石绘制

for(int row=0;row<rows;row++){for(int col=0;col<cols;col++){if(board[row][col]!=-1){finalrect=Rect.fromLTWH(col*cellSize,row*cellSize,cellSize-2,cellSize-2,);finalpaint=Paint()..color=_getGemColor(board[row][col])..style=PaintingStyle.fill;canvas.drawRRect(RRect.fromRectAndRadius(rect,constRadius.circular(5)),paint,);}}}

使用圆角矩形绘制宝石，2像素间隙增强视觉层次。

5.2 颜色映射

Color_getGemColor(int type){switch(type){case0:returnColors.red;case1:returnColors.blue;case2:returnColors.green;case3:returnColors.yellow;case4:returnColors.orange;case5:returnColors.purple;default:returnColors.grey;}}

6种宝石使用不同颜色，易于区分。

六、交互控制

6.1 点击选择

void_handleTap(int row,int col){if(selectedRow==null){selectedRow=row;selectedCol=col;}else{if(areAdjacent(selectedRow!,selectedCol!,row,col)){swapGems(selectedRow!,selectedCol!,row,col);}selectedRow=null;selectedCol=null;}setState((){});}

第一次点击选择宝石，第二次点击交换。如果第二次点击的不是相邻宝石，则重新选择。

6.2 选中高亮

if(row==selectedRow&&col==selectedCol){finalhighlightPaint=Paint()..color=Colors.white.withValues(alpha:0.5)..style=PaintingStyle.stroke..strokeWidth=3;canvas.drawRRect(RRect.fromRectAndRadius(rect,constRadius.circular(5)),highlightPaint,);}

选中的宝石显示白色半透明边框。

总结

本文详细介绍了消消乐游戏的匹配算法和动画系统。从匹配检测到交换逻辑，从重力填充到连锁反应，每个技术点都直接影响游戏的可玩性和趣味性。通过这些技术的综合应用，实现了既简单又具有策略性的消消乐游戏体验。