1. 项目概述从零到一用C#实现一个经典的连连看游戏最近在整理硬盘时翻出了一个几年前用C#写的连连看游戏项目。这个项目虽然不大但麻雀虽小五脏俱全从游戏逻辑、UI绘制到性能优化完整地走了一遍游戏开发的核心流程。很多朋友尤其是刚接触C#桌面开发或游戏逻辑的朋友都对这个看似简单实则暗藏玄机的游戏实现很感兴趣。今天我就把这个项目的源码和实现细节彻底拆开揉碎了讲一讲希望能给想自己动手做一个经典小游戏的朋友们提供一份清晰的“地图”。这个C#连连看游戏本质上是一个基于Windows窗体的桌面应用程序。它的核心目标很简单在一个布满各种图案的网格中玩家需要找到两个相同的图案并且用不超过两个拐角的直线将它们连接起来连接成功后这对图案就会消除直到清空整个棋盘。听起来规则简单但实现起来你需要处理几个关键模块棋盘的初始化与布局、图案的随机生成与无解重排、连接路径的合法性判断核心算法、用户交互与图形绘制以及游戏状态的管理。对于初学者而言这是一个绝佳的练手项目能让你在实践中掌握事件驱动编程、二维数组操作、递归或迭代算法以及GDI绘图等实用技能。2. 游戏核心逻辑与数据结构设计2.1 棋盘模型的抽象与表示游戏的一切都始于棋盘。在代码里我们如何表示这个布满图案的棋盘呢最直观也是最常用的方法就是使用一个二维整型数组。数组的每个元素map[row, col]代表棋盘对应位置上的图案类型用一个整数ID来表示比如0代表空白1代表红桃2代表方块等等。private int[,] gameMap; // 例如gameMap new int[8, 10]; 表示8行10列的棋盘初始化棋盘时我们需要生成可消除的图案对。一个经典的策略是首先确定棋盘上总共需要放置多少种不同的图案比如8种然后确保每种图案的数量是偶数因为要成对消除。接着将这些图案ID随机地“撒”到棋盘的每个格子上。这里有一个关键点为了确保游戏可解我们生成的初始布局必须是“有解”的。一个简单的做法是先按顺序成对地填充整个数组然后再对这个二维数组进行一次彻底的随机洗牌Fisher-Yates Shuffle算法在二维上的应用。这样做可以保证初始状态绝对有解因为本质上你只是把一堆成对的图案打乱了位置。注意直接完全随机生成可能会导致大量“死局”即无解状态虽然玩家可以点击“重排”按钮但初始体验不好。因此采用“成对生成再洗牌”是最稳妥的方案。2.2 连接算法连连看的“灵魂”这是整个项目的核心难点。如何判断两个选中的图案是否可以连接规则是用一条由直线段组成的折线连接折线最多只能有两个拐点即三段直线且线段穿过的格子必须全部是空白即gameMap值为0。算法思路广度优先搜索BFS思想我们可以把问题转化为寻找一条从起点A到终点B的路径这条路径只能由水平或垂直的直线段组成并且转折点不能超过两个。一个高效且清晰的实现方式是分层判断零拐点直线连接首先检查A和B是否在同一行或同一列。如果是则检查它们之间的所有格子是否都为空。这只需要一个简单的循环即可完成。一个拐点L型连接如果零拐点不成立则尝试找一个拐点C使得A到C是直线且路径畅通同时C到B也是直线且路径畅通。这个拐点C的可能位置实际上是A点的同行/同列与B点的同列/同行的交点。最多只有两个这样的候选点C1和C2。我们只需要分别检查这两个交点是否满足上述两个直线路径畅通的条件。两个拐点Z型或U型连接如果以上都不行则尝试找两个拐点。这可以转化为寻找一个中间点C使得A到C满足一个拐点或直线连接同时C到B也满足一个拐点或直线连接。但更直接的实现是检查从A点出发沿着四个方向上、下、左、右走到棋盘边缘或障碍物所经过的每个“可达点”。然后对于每一个从A点水平或垂直方向可达的点我们再检查从这个点到B点能否进行一个拐点或直线连接。如果存在这样的点则A和B可以通过两个拐点连接。在我的实现中我采用了第三种思路的变体使用了一种清晰的“分步扫描”方法代码可读性更好public bool CanConnect(Point p1, Point p2) { // 1. 如果两点不是同一种图案直接返回false if (gameMap[p1.X, p1.Y] ! gameMap[p2.X, p2.Y]) return false; // 2. 检查零拐点连接 if (CheckDirectLink(p1, p2)) return true; // 3. 检查一个拐点连接 if (CheckOneCornerLink(p1, p2)) return true; // 4. 检查两个拐点连接 if (CheckTwoCornerLink(p1, p2)) return true; return false; }其中CheckTwoCornerLink的实现就是分别从p1向水平和垂直两个方向“扩展”收集所有直线可达的点存入两个列表水平可达点列表、垂直可达点列表。然后遍历这些可达点只要其中任何一个点能与p2实现“零拐点”或“一个拐点”连接那么p1和p2就能通过两个拐点连接。这个方法逻辑清晰避免了深度的递归或复杂的循环嵌套。2.3 游戏状态与流程控制游戏需要管理一系列状态等待玩家第一次点击、等待玩家第二次点击、成功消除后的效果播放、判断游戏是否结束等。我使用一个简单的状态机结合C#的事件驱动模型来处理。GameStatus枚举定义了Idle空闲等待第一次点击、FirstSelected已选中第一个图案、Animating播放消除动画、GameOver等状态。棋盘点击事件在棋盘的鼠标点击事件处理函数中根据当前GameStatus来决定行为。如果是Idle状态点击有效图案则高亮它并进入FirstSelected状态。如果是FirstSelected状态再次点击如果是同一个图案则取消选中回到Idle。如果是另一个有效图案则调用CanConnect进行判断。如果可以连接则进入Animating状态播放连接线绘制和图案消失的动画动画结束后清除这两个格子并检查棋盘是否已空游戏胜利或是否已无解需要提示重排。如果不能连接则给一个错误提示音效或视觉反馈并回到Idle状态或保持第一个选中状态取决于设计。这种基于事件和状态的管理使得游戏逻辑流非常清晰易于调试和扩展。3. 用户界面与图形绘制实战3.1 使用GDI进行自定义绘制C#的Windows窗体程序绘制游戏界面的首选是GDI。我们需要在窗体的Paint事件中或者在一个PictureBox控件的Paint事件中根据gameMap数组的数据将每个格子绘制成相应的图案。绘制核心步骤计算布局根据棋盘的行数、列数以及绘制区域的大小计算出每个格子的宽度和高度cellWidth,cellHeight。绘制网格背景通常用DrawRectangle和FillRectangle绘制每个格子的边框和背景色。背景色可以根据格子是否被选中、是否为空等状态变化。绘制图案图案的来源可以是图片资源将每种图案做成小的PNG图片存放在资源文件或磁盘上。绘制时使用Graphics.DrawImage方法将图片缩放绘制到对应的格子矩形内。这是效果最好的方式。矢量绘制使用Graphics的DrawEllipse,DrawRectangle,DrawString等方法直接绘制简单图形。这种方式灵活但不适合复杂图案。图标字体使用包含图标的字体如FontAwesome通过DrawString绘制字符来实现。这种方式清晰且易于缩放。绘制连接线当两个图案成功连接时我们需要在它们之间画出一条高亮的线。这需要根据CanConnect算法返回的实际路径点起点、拐点、终点来绘制。使用Graphics.DrawLines方法并设置一个醒目的笔刷如红色、带箭头、虚线等可以增强视觉效果。绘制动画消除时的动画比如图案缩放消失、爆炸粒子效果等。这需要通过一个计时器Timer来驱动。在Timer的Tick事件中更新动画的当前帧如缩放比例、透明度然后调用this.Invalidate()强制重绘界面从而形成动画。实操心得GDI绘制性能在元素不多时完全足够但要注意避免在Paint事件中进行耗时的计算或资源加载。所有图片资源应在窗体加载时一次性加载到内存Bitmap对象中。另外频繁调用Invalidate()重绘整个区域可能效率低下可以使用Invalidate(Rectangle)只重绘需要更新的局部区域这对性能有显著提升。3.2 交互体验优化细节鼠标悬停高亮在MouseMove事件中计算鼠标位于哪个棋格格子上然后高亮该格子的边框或背景给玩家明确的反馈。选中状态强化被选中的图案除了高亮还可以增加一个脉动的光圈动画或放大效果使其在棋盘上格外醒目。音效反馈为点击、成功消除、错误选择、游戏胜利等动作配上合适的音效能极大提升游戏沉浸感。可以使用System.Media.SoundPlayer播放简单的WAV文件。提示功能实现一个“提示”按钮其核心是遍历当前棋盘上所有未被消除的图案对利用CanConnect算法找到第一对可连接的图案然后高亮或闪烁显示它们。这个功能直接复用核心算法实现起来不难但对卡关的玩家是雪中送炭。重排洗牌功能当检测到棋盘已无解时提供重排功能。注意重排不是完全随机打乱而是应该保留所有现有图案只将它们的位置进行随机交换。这保证了重排后图案种类和数量不变但可能产生新的可解局面。实现上就是将当前gameMap中所有非零的元素收集到一个列表中打乱顺序再填回非零的位置。4. 核心代码模块拆解与实现4.1 棋盘初始化与洗牌算法以下是棋盘初始化的一个关键方法它确保了初始布局的可解性private void InitializeMap(int rows, int cols, int iconTypeCount) { gameMap new int[rows, cols]; int totalCells rows * cols; // 确保格子总数是偶数并且每种图案至少有一对 int pairsPerType (totalCells / 2) / iconTypeCount; Listint iconList new Listint(); // 1. 生成成对的图案ID列表 for (int i 1; i iconTypeCount; i) // 假设ID从1开始 { for (int j 0; j pairsPerType * 2; j) // 每种图案添加偶数个 { iconList.Add(i); } } // 如果格子数不能整除补充一些随机图案对直到填满 Random rand new Random(); while (iconList.Count totalCells) { int randomIcon rand.Next(1, iconTypeCount 1); iconList.Add(randomIcon); iconList.Add(randomIcon); // 成对补充 } // 2. 将列表随机洗牌 ShuffleList(iconList, rand); // 3. 按行优先顺序填充二维数组 int index 0; for (int r 0; r rows; r) { for (int c 0; c cols; c) { gameMap[r, c] iconList[index]; } } } // Fisher-Yates 洗牌算法 private void ShuffleListT(ListT list, Random rand) { int n list.Count; for (int i n - 1; i 0; i--) { int j rand.Next(0, i 1); T temp list[i]; list[i] list[j]; list[j] temp; } }4.2 两拐点连接判断的详细实现这里重点展示CheckTwoCornerLink方法这是算法中最复杂的一部分private bool CheckTwoCornerLink(Point a, Point b) { // 收集点A水平方向可达的所有空点 ListPoint horizontalPointsFromA new ListPoint(); // 向左扫描 for (int col a.Y - 1; col 0; col--) { if (gameMap[a.X, col] 0) horizontalPointsFromA.Add(new Point(a.X, col)); else break; // 遇到障碍物停止 } // 向右扫描 for (int col a.Y 1; col totalCols; col) { if (gameMap[a.X, col] 0) horizontalPointsFromA.Add(new Point(a.X, col)); else break; } // 收集点A垂直方向可达的所有空点 ListPoint verticalPointsFromA new ListPoint(); // 向上扫描 for (int row a.X - 1; row 0; row--) { if (gameMap[row, a.Y] 0) verticalPointsFromA.Add(new Point(row, a.Y)); else break; } // 向下扫描 for (int row a.X 1; row totalRows; row) { if (gameMap[row, a.Y] 0) verticalPointsFromA.Add(new Point(row, a.Y)); else break; } // 检查从A水平可达的点是否能与B实现单拐点或直连 foreach (Point hPoint in horizontalPointsFromA) { if (CheckDirectLink(hPoint, b) || CheckOneCornerLink(hPoint, b)) { // 记录路径用于绘制 [a - hPoint - ... - b] return true; } } // 检查从A垂直可达的点是否能与B实现单拐点或直连 foreach (Point vPoint in verticalPointsFromA) { if (CheckDirectLink(vPoint, b) || CheckOneCornerLink(vPoint, b)) { // 记录路径用于绘制 [a - vPoint - ... - b] return true; } } return false; }这个方法的核心思想是如果A和B能通过两个拐点连接那么必然存在一个中间点C这个点C既在A的直线上水平或垂直方向可达又能与B用不超过一个拐点的线连接。我们只需要枚举所有这样的候选点C即可。4.3 游戏主循环与绘制逻辑在窗体的Paint事件或自定义控件的OnPaint方法中我们根据游戏当前状态绘制一切private void GamePanel_Paint(object sender, PaintEventArgs e) { Graphics g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; // 抗锯齿让线条和图形更平滑 g.Clear(Color.WhiteSmoke); // 清空背景 // 1. 绘制棋盘网格和图案 for (int row 0; row totalRows; row) { for (int col 0; col totalCols; col) { Rectangle cellRect GetCellRectangle(row, col); // 计算格子矩形区域 // 绘制格子背景 Brush bgBrush Brushes.White; if (selectedFirst.X row selectedFirst.Y col) bgBrush Brushes.LightSkyBlue; // 选中状态高亮 else if (hoveredCell.X row hoveredCell.Y col) bgBrush Brushes.LightYellow; // 悬停状态高亮 g.FillRectangle(bgBrush, cellRect); g.DrawRectangle(Pens.LightGray, cellRect); // 绘制图案非空时 int iconId gameMap[row, col]; if (iconId 0 iconImages ! null iconId iconImages.Length) { // iconImages是预加载好的Bitmap数组 g.DrawImage(iconImages[iconId - 1], cellRect); } } } // 2. 如果正在显示连接线则绘制它 if (currentLinkPath ! null currentLinkPath.Count 1) { using (Pen linkPen new Pen(Color.Red, 4)) { linkPen.StartCap LineCap.Round; linkPen.EndCap LineCap.Round; g.DrawLines(linkPen, currentLinkPath.ToArray()); } } // 3. 绘制游戏状态文字如分数、倒计时等 using (Font statusFont new Font(微软雅黑, 12)) { g.DrawString($分数: {score}, statusFont, Brushes.Black, new PointF(10, 10)); } }5. 开发中遇到的典型问题与解决方案5.1 性能问题画面卡顿与闪烁在早期版本中当棋盘较大如10x14且频繁触发重绘时会感觉到明显的闪烁和卡顿。问题根源直接绘制到窗体窗体本身在重绘时会先擦除背景再绘制新内容这个擦除-绘制的间隙导致了闪烁。频繁全局重绘任何小改动都调用this.Invalidate()导致整个游戏区域被重绘效率低下。资源加载在绘制时进行在Paint事件里动态加载或处理图片。解决方案双缓冲这是解决闪烁问题的标准答案。在C#中可以设置窗体的DoubleBuffered属性为true或者使用BufferedGraphics类。更简单的方法是将绘制内容画在一个Bitmap内存位图上然后在Paint事件中一次性将这个位图绘制到窗体上。局部重绘只重绘发生变化的区域。例如只有两个格子消除时计算这两个格子以及连接线所在的矩形区域调用Invalidate(Rectangle)只重绘这个区域。预加载资源所有图案图片、字体等在窗体加载Load事件时初始化好存储在类的成员变量中Paint事件中直接使用。5.2 算法逻辑错误连接判断遗漏或误判在实现CheckTwoCornerLink时最初版本漏掉了从A点垂直方向可达点的判断导致某些本应可连的情况被判定为不可连。排查过程我编写了一个简单的测试用例手动设置一个特定的无解棋盘然后让程序自动寻找所有可连的对。将程序找到的可连对与我人工判断的结果进行对比很快就发现了遗漏的情况。通过添加日志打印出算法每一步扫描到的“可达点”发现垂直方向的点没有被纳入后续判断。教训对于复杂的算法单元测试至关重要。即使是一个小游戏为核心算法如CanConnect编写测试用例用多种边界情况如相邻、同行最远、同列最远、典型的单拐点、双拐点案例进行验证能极大提高代码的可靠性。5.3 游戏体验细节选中与取消选中的逻辑玩家体验在于细节。最初的设计是点击第一个图案选中再点击任何其他位置包括空白处都会取消选中。这导致玩家很容易误操作取消。优化方案点击空白处取消当前选中。点击另一个不可连的图案给予一个明显的错误反馈比如图案抖动一下、播放错误音效但保持第一个图案的选中状态。这样玩家可以立即尝试点击其他图案而不需要重新点击第一个。点击同一个已选中的图案取消选中。这种设计更符合直觉减少了不必要的重复操作。5.4 无解状态检测与处理如何判断当前棋盘已经无解一个笨办法是遍历棋盘上所有剩余的图案对调用CanConnect方法如果所有组合都返回false则判定为无解。但这是一个O(n²)的操作在棋盘较大时比如还剩几十个图案会比较耗时。优化思路不必在每次消除后都进行全盘检测。可以设置一个阈值例如当玩家超过30秒没有进行任何消除操作时再触发一次无解检测。或者在“提示”功能被触发时如果提示功能遍历了所有组合都找不到可连的一对那自然就是无解状态此时可以主动提示玩家洗牌。异步处理即使要执行全盘检测也应将其放在一个后台线程如Task.Run中执行避免阻塞UI线程导致界面卡死。检测完成后再通过Invoke方法回到UI线程更新状态或弹出提示。6. 项目扩展与进阶思考完成基础版本后这个项目还有很多可以打磨和扩展的方向关卡设计引入不同的棋盘布局非矩形有障碍物、限制游戏时间计时模式、设定目标分数等。图案多样性支持从文件夹动态加载图片作为图案让玩家可以自定义主题如宠物照片、动漫人物。特效升级将GDI绘图升级到更强大的游戏框架如Unity用于更复杂的2D/3D效果或Monogame实现更炫酷的消除动画、粒子特效、光影效果。网络对战改造为双人对战模式。这涉及到网络通信如使用Socket或SignalR、游戏状态同步、回合制逻辑等更复杂的架构。算法优化对于极大棋盘的无解判断可以研究更优的算法。有论文将连连看棋盘建模为图论问题利用“哈密顿路径”等概念进行快速判定这是一个有趣的算法深入方向。代码重构采用MVC或MVVM模式将游戏逻辑、数据模型和UI视图分离使代码更清晰易于测试和维护。例如将GameMap和连接算法封装成一个独立的GameEngine类窗体只负责显示和用户输入。这个C#连连看项目就像一把钥匙打开了一扇通往桌面应用开发、游戏逻辑设计和算法实践的大门。它涉及的每一个知识点都不算深奥但将它们有机地组合起来解决一个具体而有趣的问题正是编程入门后迈向熟练的关键一步。希望这份详细的拆解能帮助你不仅复现出一个游戏更能理解其背后的设计思路和实现技巧。
函数入门与学习笔记实践)
