做游戏开发这些年换过不少引擎也写过不少Demo但心里始终留着一个情结不管用什么引擎第一个完整的实战作品绕不开的永远是那几个经典类型——贪吃蛇、俄罗斯方块、再就是五子棋。这三样东西规则简单、逻辑闭环清晰但真要在一个新引擎里落地得漂亮几乎能把你对这个引擎的理解深度全部逼出来。今天要聊的就是用开维游戏引擎完整实现一局五子棋的整个过程。这个项目标题叫“开维游戏引擎实例五子棋”听起来不起眼其实信息量很大。它意味着你不只是在写一个游戏而是拿五子棋当试金石去摸透开维引擎的渲染管线、输入事件、坐标体系、资源加载和逻辑循环。五子棋这东西胜负规则一句话就能讲明白但棋盘渲染怎么适配窗口缩放、鼠标点击怎么换算到交叉点、落子状态怎么管理、AI怎么写得让人既觉得有挑战又不至于无敌这些坑一个一个踩下来你对“游戏引擎到底帮你干了什么、还有什么事必须自己扛”会有一个特别清醒的认识。这篇文章不打算只讲原理我会把每个环节的代码思路、坐标算法、状态设计、避坑经验全摊开讲。不管你用的是开维引擎还是其他类似架构的2D引擎核心思路都是通用的。如果你是刚接触引擎开发的新手跟着走一遍五子棋能跑起来那一刻你对“游戏循环输入响应数据驱动”这套东西的理解会上一个台阶。1. 为什么五子棋是引擎项目的黄金起点设计思路拆解1.1 五子棋项目到底在训练什么能力很多人觉得五子棋不如动作游戏炫酷不如RPG有内容深度但作为引擎练手项目它的性价比极高。首先它的规则模型非常干净一个15×15的棋盘两种棋子状态落子即判定胜负。没有物理系统、没有角色动画、没有复杂AI寻路你可以把全部精力集中在“如何把引擎的每一条管线用对”上。但干净不代表简单。五子棋涉及的能力点恰恰是游戏开发最核心的几块棋盘渲染你要决定用引擎的图片组件、绘制API还是动态网格来实现棋盘和棋子这背后是对引擎渲染体系的理解。鼠标交互点击位置需要准确映射到棋盘交叉点考验的是坐标换算和输入事件处理能力。回合状态管理黑棋白棋轮流落子、禁手处理、悔棋回滚考验的是逻辑层的状态设计能力。胜负判定四方向五连检测这是最典型的实时判断逻辑。AI对战哪怕是简单AI也涉及评分函数、搜索策略、博弈思路。这一套组合拳打下来你对一个引擎的评价就不再停留在“界面好不好看”“文档全不全”这种表层印象而是能真正说出“这个引擎的输入系统有没有帮我解决坐标转换”“它的渲染批次合并适不适合频繁绘制小物件”这种非常有价值的技术判断。1.2 三个层次的项目架构方案做五子棋之前先别急着写代码把项目拆成三层后面会省很多事。表现层负责所有看得见的东西棋盘底图、交叉点、棋子、落子动画、胜负提示。逻辑层负责游戏规则落子合法性、回合切换、五连检测、悔棋记录。数据层负责状态存储二维数组棋盘、当前行棋方、历史记录栈。这三层对应到开维引擎里的写法我建议的表现方案是场景里挂一个棋盘节点棋盘交叉点坐标在初始化时一次性算好存成数组棋子作为动态创建的精灵节点放入场景容器。逻辑层不放渲染代码只做状态判断。数据层用引擎的全局数据模块或者直接用一个单例类维护。这三个层分得越清楚后面写AI对战的时候就越舒服。AI需要读棋盘数据来判断局势只需要从数据层拿数组完全不依赖表现层怎么画。悔棋功能也一样数据层的历史栈弹出一次表现层同步删掉那个棋子节点即可。如果你贪图省事把渲染和逻辑混在一个类里一旦加上AI或悔棋代码僵硬到你根本不想维护。1.3 为什么选15路棋盘而不是19路五子棋常见的棋盘规格主要有13路和15路正式比赛通常用15路所以我最终选了15×15。这个选择的理由是15路棋盘在视觉上有足够的“展开感”不会像9路那样一眼看到底又不会像围棋19路那样产生大量无意义的空旷位置。从数据量来看225个交叉点也完全在轻松处理的范围内遍历一次棋盘做判定或者评分性能开销可以忽略不计。开维引擎里如果做19路其实也能跑但棋子的视觉大小要相应缩小点击判定区域变密集误触概率会上升。对于新手来说15路是手感最均衡的规格。2. 棋盘渲染与坐标体系从窗口像素到交叉点映射2.1 棋盘布局计算让15路棋盘铺满窗口不缩水这一步是整个项目的地基地基没打好后面所有交互和渲染全都会跟着歪。先设定基础数据BOARD_SIZE 15 // 15路棋盘15条横线、15条竖线 CELL_SIZE 40 // 相邻交叉点间距单位像素 MARGIN 30 // 棋盘边缘留白给交叉点坐标编号腾出空间棋盘总像素尺寸 MARGIN * 2 CELL_SIZE * (BOARD_SIZE - 1) 30 * 2 40 * 14 60 560 620像素。之所以每个方向要留MARGIN是因为最外侧的交叉点不能贴到窗口边缘。如果棋盘直接贴着窗口边界画不仅视野上难受鼠标点击边缘交叉点时也容易点出边界外。MARGIN留出来以后整块棋盘的布局中心要和窗口中心对齐我一般在引擎的场景初始化回调里取一下当前窗口尺寸然后计算一个偏移量把棋盘节点定位到居中位置。开维引擎里场景根节点一般有setPosition或者transform相关接口直接对棋盘容器设置位置即可。关键点在于不要在渲染回调里反复重新定位棋盘初始化时算一次就够了后续窗口如果支持缩放才需要重新计算。2.2 交叉点坐标预计算提前算好别在渲染时现算这是我在实战里养成的习惯棋盘交叉点坐标永远提前算好存进数组运行中不重复计算。棋盘坐标为(row, col)row表示第几行col表示第几列范围都是0到14。对应的屏幕坐标screenX MARGIN col * CELL_SIZE screenY MARGIN row * CELL_SIZE这个公式看起来简单但最容易踩的坑是你以为坐标换算是在渲染时才需要结果渲染回调里临时调用两次函数、再叠加窗口内偏移不知不觉间就因为少加了某个偏移量导致棋盘画歪了。我的做法是在场景初始化阶段就把225个交叉点全部算好分别存到两个数组pointX[row][col]和pointY[row][col]里渲染和碰撞检测都直接从数组取性能好还不容易出错。2.3 棋盘线、星位和坐标标识的绘制顺序画棋盘有个典型的顺序问题先画底板、再画网格线、再画星位最后画坐标编号。网格线是15条横线加15条竖线每条线从第一个交叉点画到最后一个交叉点。用引擎的绘制线段接口或者用一张棋盘底图都可以。如果用底图法注意底图上的网格必须和代码里计算出的CELL_SIZE严格一致否则点击判定区域和视觉网格产生偏移这也是一个高频坑。我个人的建议是用代码绘制网格不要用美术底图。因为底图只要被窗口缩放处理一下网格线就可能出现半像素模糊或整体偏移代码绘制反而更可控。星位就是棋盘上那五个小点分别在(3,3)、(3,11)、(7,7)、(11,3)、(11,11)这个数据来自棋盘规格别记错。坐标编号是给行和列标上0到14的数字方便玩家沟通。如果你觉得编号影响视觉整洁也可以不做但做了以后会显得项目完成度更高。棋子渲染方面最简单的方式是创建圆形精灵贴图黑棋白棋各一张。如果没有合适的贴图资源用引擎的绘制圆形接口也行——黑棋填充黑色、白棋填充白色加一圈灰色描边视觉上反而比贴图更干净。3. 从一次点击到一次落子输入事件与坐标换算实操3.1 鼠标事件绑定别绑到单个棋子上刚接触引擎开发的朋友最容易犯的错是试图把点击事件绑定到每个棋子上。棋子还没落下来你绑定谁去所以正确的做法一定是把鼠标点击事件绑定到棋盘容器或者场景根节点上然后在事件回调里做统一的坐标判定。开维引擎的通用做法是注册一个全局点击监听或者给棋盘节点挂一个点击事件组件。事件回调里会给你一组屏幕坐标或者节点坐标系坐标这一步要小心不同引擎给到的事件坐标参考系不同。我的建议是先确认引擎给的是“引擎窗口坐标系”还是“节点本地坐标系”如果是窗口坐标系需要减去棋盘容器在窗口中的位置偏移再进入换算公式。这里产生的一切莫名奇妙的偏移问题百分之八十都是坐标系参考混乱导致的。3.2 屏幕坐标转交叉点四舍五入的细节假设事件给到的是棋盘容器的本地坐标(mouseX, mouseY)那么换算到行列col round((mouseX - MARGIN) / CELL_SIZE) row round((mouseY - MARGIN) / CELL_SIZE)注意这里的round不是floor。因为玩家点击的位置只要落在某个交叉点相邻的半格范围内都应该视为想点那个交叉点。举个例子第5列的交叉点x坐标为MARGIN 5 * CELL_SIZE那么落在MARGIN 4.6 * CELL_SIZE到MARGIN 5.4 * CELL_SIZE之间的点击都应该映射到第5列四舍五入正好符合这个直觉。换算完之后一定要做边界检查if row 0 || row BOARD_SIZE || col 0 || col BOARD_SIZE: return // 点在棋盘外不处理这个检查看似多余实际非常重要。玩家手滑点到棋盘外引擎不会报错但如果你不拦截后面数组越界的问题或者棋子画到窗口外的问题就会接踵而至。3.3 落子合法性判断与棋子节点创建拿到row和col之后先检查当前格子是否为空if board[row][col] ! EMPTY: return // 已经有棋子不能重复落然后把board[row][col]设为当前行棋方的颜色值黑1白2接着在场景里创建一个棋子节点位置设为之前预计算的交叉点坐标pointX[row][col]和pointY[row][col]。这里有一个显示层级的问题棋子节点在渲染树上必须放在棋盘线之上。如果棋盘是代码绘制的通常棋盘线属于背景节点棋子树属于前景节点天然隔开。如果放在同一个节点下要确保棋子的绘制顺序在网格线之后否则会出现棋子上盖着线这种非常不专业的视觉效果。3.4 回合切换、防止连点和悔棋落子之后立即切换行棋方用一个currentPlayer变量保存黑棋初始为1。回合切换代码就一行currentPlayer (currentPlayer BLACK) ? WHITE : BLACK但这里必须防一手连点。鼠标点击事件在快速连点下可能在一帧内触发两次如果第一次落子后还没切换到对方第二次点击会直接用同色棋再落一颗。解决办法是在每次落子后先切换currentPlayer再允许下一次点击逻辑继续。也可以用一个isProcessing标记在旗子放置动画播放期间拒绝任何点击。悔棋的实现我用的是历史栈。每次落子时把{row, col, player}压入一个数组。悔棋操作从栈顶弹出最近一次落子把对应格子的board值恢复为EMPTY同时销毁那个棋子节点并把currentPlayer切回上一步的行棋方。如果做了AI对战悔棋还要考虑把AI的落子也一起回滚通常一次悔棋是回滚两步你的一步加AI的一步这才是玩家预期的“回到我上一步落子前”的状态。4. 胜负判定与对局流程五连检测、状态机与终局处理4.1 四方向五连检测算法五子棋的胜负判定核心是当前落下的这颗棋子是否在水平、垂直、两条对角线四个方向上形成连续五颗同色棋。实现方法有很多最简单也最稳妥的是四个方向逐一累加。以水平方向为例从当前落子点向左数连续同色棋的数量再向右数连续同色棋的数量加起来减一因为当前点被数了两次如果大于等于5则获胜。count 1 // 向左 for step 1; col - step 0 board[row][col - step] color; step: count // 向右 for step 1; col step BOARD_SIZE board[row][col step] color; step: count if count 5: return WIN垂直方向把row做加减主对角线(1,1)方向让row和col同时加减副对角线(1,-1)方向让row加、col减。四个方向一组合就是完整的判定函数。有一个性能点值得说并不需要每次落子后遍历整个棋盘只需要检查刚落下的那一颗棋子的四个方向即可。这个局部判断法比全盘扫描快得多而且代码逻辑也更清楚。225个格子的棋盘全力扫描其实也慢不到哪去但局部判断是一种好的思维习惯。4.2 禁手规则先讲概念再做取舍如果你做的是面向普通玩家的休闲五子棋禁手规则可做可不做。禁手是针对黑棋的限制规则因为黑棋先手优势太大所以规定黑棋不能下三三、四四和长连。但在引擎练手项目里我建议先不做禁手把基础判定跑通了再回头加也不迟。不做禁手的原因是规则校验本身不难但输赢提示要跟着改AI的评分逻辑也要想办法避开禁手点否则AI经常往禁手点上落子玩家会觉得很出戏。作为引擎项目先把基础对局做到位禁手作为进阶迭代更合理。4.3 对局状态机让逻辑流程变清晰五子棋虽然简单但依然可以用状态机来管理对局流程。状态分为INIT、PLAYING、END三个。INIT阶段显示棋盘、等待玩家点击“开始”一旦进入PLAYING才允许落子每次落子后调用胜负判定如果判定获胜或棋盘已满平局切换到END状态。进入END后要做几件事停止接受落子输入、弹出胜负提示、销毁或者隐藏所有高亮效果。然后是“再来一局”按钮的响应逻辑这要把棋盘数组清空、历史栈清空、所有棋子节点销毁、currentPlayer重置为黑棋。如果你图省事直接把场景重载一次也行但重载场景会连带加载资源的时间不够优雅。手动重置更专业。4.4 平局与特殊局面处理225个格子全部填满但没人连成五颗这种情况极少见但必须处理。每次落子后除了判定胜负还要检查当前棋盘上的空位数量如果空位为0且无人获胜就是平局。还有个细节是长连的处理当一方连成六颗甚至更多时规则上依然是赢棋。刚才给出的五连检测逻辑里用的是count 5天然支持长连判胜这一点不用额外处理。5. AI对战从随机落子到评分制下棋5.1 第一版AI防守优先的查漏补缺AI的入门级实现是随机落子加防守封堵。随机落子很好理解在所有空格子里随机选一个。但纯随机太弱了玩家下几盘就会觉得无聊所以要加上防守逻辑。防守逻辑的核心是扫描在每次AI落子前遍历棋盘上所有空位针对每个空位模拟“如果玩家在这里落子能形成多大的威胁”。威胁分为几档四连差一子可杀棋、三连差一子需封堵方向、二连差一子弱威胁。AI优先寻找玩家最危险的那一步棋然后直接落子封堵。这个版本虽然“没有智商”但已经足够让新手体会到“电脑好像知道我下一步要干嘛”的效果。实现大约只要一两百行非常适合作为AI迭代的地基。5.2 第二版AI基于四个方向的评分表贪心想让AI有点进攻性必须引入评分函数。这里的思路是给每个空位打分分数代表“如果AI在这个位置落子对局势的增益有多大”。此外还要给“如果玩家在这个位置落子”也打一个分AI最后选择两份得分总和最高的位置。评分逻辑可以这样设计对每个空位沿水平、垂直、主对角、副对角四个方向分别统计连续同色棋数量以及两端是否被堵住。然后对照一张评分表连续1颗且两端通畅10分连续2颗且一端通畅100分连续2颗且两端通畅200分连续3颗且一端通畅1000分连续3颗且两端通畅5000分连续4颗且一端通畅50000分连续4颗且两端通畅1000000分AI进攻时按这张表给每个空位算分防守时用同样的表评估玩家落子后的收益两者相加得到最终得分取最高分落子。这种做法的好处是简单直观算力消耗也极低遍历一次棋盘就能完成一回合决策肉眼看不到任何卡顿。评分表里数值跨度拉开是因为要让“差一步成五”的威胁远远压过“两头通畅的三连”之类的普通机会。你体会一下这个数值设计的思路以后做任何评估函数都用得上。5.3 搜深度、随机性和难度调节评分表贪心AI有个硬伤只看一步缺乏长远规划。要使它更强可以引入极小化极大搜索在AI评分基础上向前推演2到4步。但作为引擎练手项目我不建议一上来就上搜索算法先把评分表AI调顺再考虑深度搜索。难度调节方面不一定要动AI算法本身。最简单的做法是AI决策前先用随机数决定是否“故意放水”。比如简单难度下AI有50%概率不在最优解落子而是随机选一个次优位置中等难度这个概率是20%困难难度直接走最优解。再配合一个落子延时比如AI思考0.5秒再落子会让人感觉更自然也避免“电脑秒下”的压迫感。5.4 人机对战中的回合控制细节人机模式里玩家默认执黑AI执白。玩家点击落子后立即执行胜负判定如果玩家未胜则启动AI回合。AI回合不能在同一帧里立刻落子要等一个延时。这个延时用引擎的定时器或者帧计数来实现延时期间要锁住玩家的输入否则玩家会在AI落子前连续落子把回合顺序打乱。等AI落子完成后同样执行胜负判定然后解除输入锁回到玩家回合。这里最常见的错误是忘记在AI回合期间禁用输入导致玩家和AI在同一帧里各落一子整个状态全乱。踩过这个坑的同学应该不在少数。6. 常见问题与排查技巧实录6.1 现象点击位置和落子位置对不上这是五子棋项目里最高频的Bug九个原因里面有八个出在坐标系没对齐。排查步骤依次是先打印出鼠标事件的原始坐标再打印棋盘容器在窗口中的坐标算一下差值看看事件给的是窗口坐标还是节点坐标。如果事件给的是窗口坐标但你直接拿它减了MARGIN少了“棋盘容器相对窗口的位置偏移”这一项结果自然会偏。最简单的定位方法是点击棋盘正中央的交叉点(7,7)如果是坐标偏移问题打印出的行列值往往会是(6,7)或(8,7)差异正好是一个格子。6.2 现象棋子画出来是歪的或者边缘被截断棋子显示异常先确认棋子节点的父节点是不是棋盘容器。如果你把棋子加到了场景根节点而棋盘的MARGIN偏移只应用在了棋盘容器上棋子的坐标自然和棋盘交叉点对不上。另一个可能是棋子贴图资源中心点和锚点不对。开维引擎中精灵节点的锚点通常默认为中心但如果你加载的是整张棋盘底图而不是单独的棋子图就需要重新设置锚点或调整位置。6.3 现象胜利判定偶发失灵五连检测最隐蔽的坑是方向漏检。写检测时方向组合容易漏掉副对角线因为row和col的变化方向不是同号。我建议写完之后做一次自动化验证在一个空的棋盘数组里人为构造一条斜着的五连然后调用判定函数确保返回胜利。这个测试占不了几分钟但能省掉你以后跟玩家反复解释“明明连成五个了为什么不判赢”的巨大口舌。6.4 现象AI落子后输入卡死AI落子后输入无法恢复通常是因为AI回合的输入锁在某个分支里没有释放。特别是AI发现无路可走或棋盘已满时可能提前return导致输入锁没有重置。排查方式很简单在AI落子函数的每个return前都加上锁释放逻辑或者用带析构语义的作用域机制来管理输入锁确保无论函数走哪条分支都能释放。6.5 现象悔棋后棋盘状态和视觉不同步悔棋时你弹出了历史栈里的数据把board数组恢复为EMPTY但忘了销毁棋子节点或者销毁节点时索引搞错就会出现“数据上这格已经空了画面上还有颗棋子”的情况。我的建议是悔棋操作只通过一个专门函数处理函数里同时做三件事——改board数组、销毁对应棋子节点、重置currentPlayer。不要在一个事件回调里东写一行西写一行地操作这三件事否则很容易漏。7. 实战心得与后续扩展方向真正把五子棋在开维引擎里完整跑起来之后我最大的感触是一个“简单”的棋类游戏恰恰最能逼着你把引擎的每个基础模块都拉出来遛一遍。渲染坐标、事件映射、场景节点管理、定时器、状态控制、资源生命周期全部在这个项目里有了一次真实的串练。有几个小技巧分享一下。棋子上场的时候给一个由小变大的缓动动画其实就几行代码但视觉手感提升非常明显。判断胜负时把那五颗棋子的颜色做一次高亮闪烁比弹一个生硬的提示框好用得多。还有就是棋盘渲染时如果引擎支持九宫格拉伸棋盘底板资源可以做得干净一点窗口宽高比变化后视觉依然稳定。扩展方向上想做联网对战可以先从“同屏双人”过渡到“局域网帧同步”把交互坐标数据互换那套逻辑模拟一遍后面再接服务端。想做AI更强可以在现有评分表之上加极小化极大搜索并配合α-β剪枝再引入开局库。想做复盘功能历史栈里记录的数据已经足够把它导出成回合列表再回放即可。根据项目实践下来的经验我给后来者一个中肯的建议别急着追求花哨功能先把单机人人对战做到“手感对、判定准、界面干净”再一步一步往AI和联网扩展。五子棋这个项目说到底是引擎能力的磨刀石每一轮迭代都能让下个项目少踩一堆坑这才是它真正的价值所在。 
长河君 · 2026/10/8 12:49:42 · 阅读 1.2k 开维引擎实战：用五子棋拆解游戏开发全流程
做游戏开发这些年换过不少引擎也写过不少Demo但心里始终留着一个情结不管用什么引擎第一个完整的实战作品绕不开的永远是那几个经典类型——贪吃蛇、俄罗斯方块、再就是五子棋。这三样东西规则简单、逻辑闭环清晰但真要在一个新引擎里落地得漂亮几乎能把你对这个引擎的理解深度全部逼出来。今天要聊的就是用开维游戏引擎完整实现一局五子棋的整个过程。这个项目标题叫“开维游戏引擎实例五子棋”听起来不起眼其实信息量很大。它意味着你不只是在写一个游戏而是拿五子棋当试金石去摸透开维引擎的渲染管线、输入事件、坐标体系、资源加载和逻辑循环。五子棋这东西胜负规则一句话就能讲明白但棋盘渲染怎么适配窗口缩放、鼠标点击怎么换算到交叉点、落子状态怎么管理、AI怎么写得让人既觉得有挑战又不至于无敌这些坑一个一个踩下来你对“游戏引擎到底帮你干了什么、还有什么事必须自己扛”会有一个特别清醒的认识。这篇文章不打算只讲原理我会把每个环节的代码思路、坐标算法、状态设计、避坑经验全摊开讲。不管你用的是开维引擎还是其他类似架构的2D引擎核心思路都是通用的。如果你是刚接触引擎开发的新手跟着走一遍五子棋能跑起来那一刻你对“游戏循环输入响应数据驱动”这套东西的理解会上一个台阶。1. 为什么五子棋是引擎项目的黄金起点设计思路拆解1.1 五子棋项目到底在训练什么能力很多人觉得五子棋不如动作游戏炫酷不如RPG有内容深度但作为引擎练手项目它的性价比极高。首先它的规则模型非常干净一个15×15的棋盘两种棋子状态落子即判定胜负。没有物理系统、没有角色动画、没有复杂AI寻路你可以把全部精力集中在“如何把引擎的每一条管线用对”上。但干净不代表简单。五子棋涉及的能力点恰恰是游戏开发最核心的几块棋盘渲染你要决定用引擎的图片组件、绘制API还是动态网格来实现棋盘和棋子这背后是对引擎渲染体系的理解。鼠标交互点击位置需要准确映射到棋盘交叉点考验的是坐标换算和输入事件处理能力。回合状态管理黑棋白棋轮流落子、禁手处理、悔棋回滚考验的是逻辑层的状态设计能力。胜负判定四方向五连检测这是最典型的实时判断逻辑。AI对战哪怕是简单AI也涉及评分函数、搜索策略、博弈思路。这一套组合拳打下来你对一个引擎的评价就不再停留在“界面好不好看”“文档全不全”这种表层印象而是能真正说出“这个引擎的输入系统有没有帮我解决坐标转换”“它的渲染批次合并适不适合频繁绘制小物件”这种非常有价值的技术判断。1.2 三个层次的项目架构方案做五子棋之前先别急着写代码把项目拆成三层后面会省很多事。表现层负责所有看得见的东西棋盘底图、交叉点、棋子、落子动画、胜负提示。逻辑层负责游戏规则落子合法性、回合切换、五连检测、悔棋记录。数据层负责状态存储二维数组棋盘、当前行棋方、历史记录栈。这三层对应到开维引擎里的写法我建议的表现方案是场景里挂一个棋盘节点棋盘交叉点坐标在初始化时一次性算好存成数组棋子作为动态创建的精灵节点放入场景容器。逻辑层不放渲染代码只做状态判断。数据层用引擎的全局数据模块或者直接用一个单例类维护。这三个层分得越清楚后面写AI对战的时候就越舒服。AI需要读棋盘数据来判断局势只需要从数据层拿数组完全不依赖表现层怎么画。悔棋功能也一样数据层的历史栈弹出一次表现层同步删掉那个棋子节点即可。如果你贪图省事把渲染和逻辑混在一个类里一旦加上AI或悔棋代码僵硬到你根本不想维护。1.3 为什么选15路棋盘而不是19路五子棋常见的棋盘规格主要有13路和15路正式比赛通常用15路所以我最终选了15×15。这个选择的理由是15路棋盘在视觉上有足够的“展开感”不会像9路那样一眼看到底又不会像围棋19路那样产生大量无意义的空旷位置。从数据量来看225个交叉点也完全在轻松处理的范围内遍历一次棋盘做判定或者评分性能开销可以忽略不计。开维引擎里如果做19路其实也能跑但棋子的视觉大小要相应缩小点击判定区域变密集误触概率会上升。对于新手来说15路是手感最均衡的规格。2. 棋盘渲染与坐标体系从窗口像素到交叉点映射2.1 棋盘布局计算让15路棋盘铺满窗口不缩水这一步是整个项目的地基地基没打好后面所有交互和渲染全都会跟着歪。先设定基础数据BOARD_SIZE 15 // 15路棋盘15条横线、15条竖线 CELL_SIZE 40 // 相邻交叉点间距单位像素 MARGIN 30 // 棋盘边缘留白给交叉点坐标编号腾出空间棋盘总像素尺寸 MARGIN * 2 CELL_SIZE * (BOARD_SIZE - 1) 30 * 2 40 * 14 60 560 620像素。之所以每个方向要留MARGIN是因为最外侧的交叉点不能贴到窗口边缘。如果棋盘直接贴着窗口边界画不仅视野上难受鼠标点击边缘交叉点时也容易点出边界外。MARGIN留出来以后整块棋盘的布局中心要和窗口中心对齐我一般在引擎的场景初始化回调里取一下当前窗口尺寸然后计算一个偏移量把棋盘节点定位到居中位置。开维引擎里场景根节点一般有setPosition或者transform相关接口直接对棋盘容器设置位置即可。关键点在于不要在渲染回调里反复重新定位棋盘初始化时算一次就够了后续窗口如果支持缩放才需要重新计算。2.2 交叉点坐标预计算提前算好别在渲染时现算这是我在实战里养成的习惯棋盘交叉点坐标永远提前算好存进数组运行中不重复计算。棋盘坐标为(row, col)row表示第几行col表示第几列范围都是0到14。对应的屏幕坐标screenX MARGIN col * CELL_SIZE screenY MARGIN row * CELL_SIZE这个公式看起来简单但最容易踩的坑是你以为坐标换算是在渲染时才需要结果渲染回调里临时调用两次函数、再叠加窗口内偏移不知不觉间就因为少加了某个偏移量导致棋盘画歪了。我的做法是在场景初始化阶段就把225个交叉点全部算好分别存到两个数组pointX[row][col]和pointY[row][col]里渲染和碰撞检测都直接从数组取性能好还不容易出错。2.3 棋盘线、星位和坐标标识的绘制顺序画棋盘有个典型的顺序问题先画底板、再画网格线、再画星位最后画坐标编号。网格线是15条横线加15条竖线每条线从第一个交叉点画到最后一个交叉点。用引擎的绘制线段接口或者用一张棋盘底图都可以。如果用底图法注意底图上的网格必须和代码里计算出的CELL_SIZE严格一致否则点击判定区域和视觉网格产生偏移这也是一个高频坑。我个人的建议是用代码绘制网格不要用美术底图。因为底图只要被窗口缩放处理一下网格线就可能出现半像素模糊或整体偏移代码绘制反而更可控。星位就是棋盘上那五个小点分别在(3,3)、(3,11)、(7,7)、(11,3)、(11,11)这个数据来自棋盘规格别记错。坐标编号是给行和列标上0到14的数字方便玩家沟通。如果你觉得编号影响视觉整洁也可以不做但做了以后会显得项目完成度更高。棋子渲染方面最简单的方式是创建圆形精灵贴图黑棋白棋各一张。如果没有合适的贴图资源用引擎的绘制圆形接口也行——黑棋填充黑色、白棋填充白色加一圈灰色描边视觉上反而比贴图更干净。3. 从一次点击到一次落子输入事件与坐标换算实操3.1 鼠标事件绑定别绑到单个棋子上刚接触引擎开发的朋友最容易犯的错是试图把点击事件绑定到每个棋子上。棋子还没落下来你绑定谁去所以正确的做法一定是把鼠标点击事件绑定到棋盘容器或者场景根节点上然后在事件回调里做统一的坐标判定。开维引擎的通用做法是注册一个全局点击监听或者给棋盘节点挂一个点击事件组件。事件回调里会给你一组屏幕坐标或者节点坐标系坐标这一步要小心不同引擎给到的事件坐标参考系不同。我的建议是先确认引擎给的是“引擎窗口坐标系”还是“节点本地坐标系”如果是窗口坐标系需要减去棋盘容器在窗口中的位置偏移再进入换算公式。这里产生的一切莫名奇妙的偏移问题百分之八十都是坐标系参考混乱导致的。3.2 屏幕坐标转交叉点四舍五入的细节假设事件给到的是棋盘容器的本地坐标(mouseX, mouseY)那么换算到行列col round((mouseX - MARGIN) / CELL_SIZE) row round((mouseY - MARGIN) / CELL_SIZE)注意这里的round不是floor。因为玩家点击的位置只要落在某个交叉点相邻的半格范围内都应该视为想点那个交叉点。举个例子第5列的交叉点x坐标为MARGIN 5 * CELL_SIZE那么落在MARGIN 4.6 * CELL_SIZE到MARGIN 5.4 * CELL_SIZE之间的点击都应该映射到第5列四舍五入正好符合这个直觉。换算完之后一定要做边界检查if row 0 || row BOARD_SIZE || col 0 || col BOARD_SIZE: return // 点在棋盘外不处理这个检查看似多余实际非常重要。玩家手滑点到棋盘外引擎不会报错但如果你不拦截后面数组越界的问题或者棋子画到窗口外的问题就会接踵而至。3.3 落子合法性判断与棋子节点创建拿到row和col之后先检查当前格子是否为空if board[row][col] ! EMPTY: return // 已经有棋子不能重复落然后把board[row][col]设为当前行棋方的颜色值黑1白2接着在场景里创建一个棋子节点位置设为之前预计算的交叉点坐标pointX[row][col]和pointY[row][col]。这里有一个显示层级的问题棋子节点在渲染树上必须放在棋盘线之上。如果棋盘是代码绘制的通常棋盘线属于背景节点棋子树属于前景节点天然隔开。如果放在同一个节点下要确保棋子的绘制顺序在网格线之后否则会出现棋子上盖着线这种非常不专业的视觉效果。3.4 回合切换、防止连点和悔棋落子之后立即切换行棋方用一个currentPlayer变量保存黑棋初始为1。回合切换代码就一行currentPlayer (currentPlayer BLACK) ? WHITE : BLACK但这里必须防一手连点。鼠标点击事件在快速连点下可能在一帧内触发两次如果第一次落子后还没切换到对方第二次点击会直接用同色棋再落一颗。解决办法是在每次落子后先切换currentPlayer再允许下一次点击逻辑继续。也可以用一个isProcessing标记在旗子放置动画播放期间拒绝任何点击。悔棋的实现我用的是历史栈。每次落子时把{row, col, player}压入一个数组。悔棋操作从栈顶弹出最近一次落子把对应格子的board值恢复为EMPTY同时销毁那个棋子节点并把currentPlayer切回上一步的行棋方。如果做了AI对战悔棋还要考虑把AI的落子也一起回滚通常一次悔棋是回滚两步你的一步加AI的一步这才是玩家预期的“回到我上一步落子前”的状态。4. 胜负判定与对局流程五连检测、状态机与终局处理4.1 四方向五连检测算法五子棋的胜负判定核心是当前落下的这颗棋子是否在水平、垂直、两条对角线四个方向上形成连续五颗同色棋。实现方法有很多最简单也最稳妥的是四个方向逐一累加。以水平方向为例从当前落子点向左数连续同色棋的数量再向右数连续同色棋的数量加起来减一因为当前点被数了两次如果大于等于5则获胜。count 1 // 向左 for step 1; col - step 0 board[row][col - step] color; step: count // 向右 for step 1; col step BOARD_SIZE board[row][col step] color; step: count if count 5: return WIN垂直方向把row做加减主对角线(1,1)方向让row和col同时加减副对角线(1,-1)方向让row加、col减。四个方向一组合就是完整的判定函数。有一个性能点值得说并不需要每次落子后遍历整个棋盘只需要检查刚落下的那一颗棋子的四个方向即可。这个局部判断法比全盘扫描快得多而且代码逻辑也更清楚。225个格子的棋盘全力扫描其实也慢不到哪去但局部判断是一种好的思维习惯。4.2 禁手规则先讲概念再做取舍如果你做的是面向普通玩家的休闲五子棋禁手规则可做可不做。禁手是针对黑棋的限制规则因为黑棋先手优势太大所以规定黑棋不能下三三、四四和长连。但在引擎练手项目里我建议先不做禁手把基础判定跑通了再回头加也不迟。不做禁手的原因是规则校验本身不难但输赢提示要跟着改AI的评分逻辑也要想办法避开禁手点否则AI经常往禁手点上落子玩家会觉得很出戏。作为引擎项目先把基础对局做到位禁手作为进阶迭代更合理。4.3 对局状态机让逻辑流程变清晰五子棋虽然简单但依然可以用状态机来管理对局流程。状态分为INIT、PLAYING、END三个。INIT阶段显示棋盘、等待玩家点击“开始”一旦进入PLAYING才允许落子每次落子后调用胜负判定如果判定获胜或棋盘已满平局切换到END状态。进入END后要做几件事停止接受落子输入、弹出胜负提示、销毁或者隐藏所有高亮效果。然后是“再来一局”按钮的响应逻辑这要把棋盘数组清空、历史栈清空、所有棋子节点销毁、currentPlayer重置为黑棋。如果你图省事直接把场景重载一次也行但重载场景会连带加载资源的时间不够优雅。手动重置更专业。4.4 平局与特殊局面处理225个格子全部填满但没人连成五颗这种情况极少见但必须处理。每次落子后除了判定胜负还要检查当前棋盘上的空位数量如果空位为0且无人获胜就是平局。还有个细节是长连的处理当一方连成六颗甚至更多时规则上依然是赢棋。刚才给出的五连检测逻辑里用的是count 5天然支持长连判胜这一点不用额外处理。5. AI对战从随机落子到评分制下棋5.1 第一版AI防守优先的查漏补缺AI的入门级实现是随机落子加防守封堵。随机落子很好理解在所有空格子里随机选一个。但纯随机太弱了玩家下几盘就会觉得无聊所以要加上防守逻辑。防守逻辑的核心是扫描在每次AI落子前遍历棋盘上所有空位针对每个空位模拟“如果玩家在这里落子能形成多大的威胁”。威胁分为几档四连差一子可杀棋、三连差一子需封堵方向、二连差一子弱威胁。AI优先寻找玩家最危险的那一步棋然后直接落子封堵。这个版本虽然“没有智商”但已经足够让新手体会到“电脑好像知道我下一步要干嘛”的效果。实现大约只要一两百行非常适合作为AI迭代的地基。5.2 第二版AI基于四个方向的评分表贪心想让AI有点进攻性必须引入评分函数。这里的思路是给每个空位打分分数代表“如果AI在这个位置落子对局势的增益有多大”。此外还要给“如果玩家在这个位置落子”也打一个分AI最后选择两份得分总和最高的位置。评分逻辑可以这样设计对每个空位沿水平、垂直、主对角、副对角四个方向分别统计连续同色棋数量以及两端是否被堵住。然后对照一张评分表连续1颗且两端通畅10分连续2颗且一端通畅100分连续2颗且两端通畅200分连续3颗且一端通畅1000分连续3颗且两端通畅5000分连续4颗且一端通畅50000分连续4颗且两端通畅1000000分AI进攻时按这张表给每个空位算分防守时用同样的表评估玩家落子后的收益两者相加得到最终得分取最高分落子。这种做法的好处是简单直观算力消耗也极低遍历一次棋盘就能完成一回合决策肉眼看不到任何卡顿。评分表里数值跨度拉开是因为要让“差一步成五”的威胁远远压过“两头通畅的三连”之类的普通机会。你体会一下这个数值设计的思路以后做任何评估函数都用得上。5.3 搜深度、随机性和难度调节评分表贪心AI有个硬伤只看一步缺乏长远规划。要使它更强可以引入极小化极大搜索在AI评分基础上向前推演2到4步。但作为引擎练手项目我不建议一上来就上搜索算法先把评分表AI调顺再考虑深度搜索。难度调节方面不一定要动AI算法本身。最简单的做法是AI决策前先用随机数决定是否“故意放水”。比如简单难度下AI有50%概率不在最优解落子而是随机选一个次优位置中等难度这个概率是20%困难难度直接走最优解。再配合一个落子延时比如AI思考0.5秒再落子会让人感觉更自然也避免“电脑秒下”的压迫感。5.4 人机对战中的回合控制细节人机模式里玩家默认执黑AI执白。玩家点击落子后立即执行胜负判定如果玩家未胜则启动AI回合。AI回合不能在同一帧里立刻落子要等一个延时。这个延时用引擎的定时器或者帧计数来实现延时期间要锁住玩家的输入否则玩家会在AI落子前连续落子把回合顺序打乱。等AI落子完成后同样执行胜负判定然后解除输入锁回到玩家回合。这里最常见的错误是忘记在AI回合期间禁用输入导致玩家和AI在同一帧里各落一子整个状态全乱。踩过这个坑的同学应该不在少数。6. 常见问题与排查技巧实录6.1 现象点击位置和落子位置对不上这是五子棋项目里最高频的Bug九个原因里面有八个出在坐标系没对齐。排查步骤依次是先打印出鼠标事件的原始坐标再打印棋盘容器在窗口中的坐标算一下差值看看事件给的是窗口坐标还是节点坐标。如果事件给的是窗口坐标但你直接拿它减了MARGIN少了“棋盘容器相对窗口的位置偏移”这一项结果自然会偏。最简单的定位方法是点击棋盘正中央的交叉点(7,7)如果是坐标偏移问题打印出的行列值往往会是(6,7)或(8,7)差异正好是一个格子。6.2 现象棋子画出来是歪的或者边缘被截断棋子显示异常先确认棋子节点的父节点是不是棋盘容器。如果你把棋子加到了场景根节点而棋盘的MARGIN偏移只应用在了棋盘容器上棋子的坐标自然和棋盘交叉点对不上。另一个可能是棋子贴图资源中心点和锚点不对。开维引擎中精灵节点的锚点通常默认为中心但如果你加载的是整张棋盘底图而不是单独的棋子图就需要重新设置锚点或调整位置。6.3 现象胜利判定偶发失灵五连检测最隐蔽的坑是方向漏检。写检测时方向组合容易漏掉副对角线因为row和col的变化方向不是同号。我建议写完之后做一次自动化验证在一个空的棋盘数组里人为构造一条斜着的五连然后调用判定函数确保返回胜利。这个测试占不了几分钟但能省掉你以后跟玩家反复解释“明明连成五个了为什么不判赢”的巨大口舌。6.4 现象AI落子后输入卡死AI落子后输入无法恢复通常是因为AI回合的输入锁在某个分支里没有释放。特别是AI发现无路可走或棋盘已满时可能提前return导致输入锁没有重置。排查方式很简单在AI落子函数的每个return前都加上锁释放逻辑或者用带析构语义的作用域机制来管理输入锁确保无论函数走哪条分支都能释放。6.5 现象悔棋后棋盘状态和视觉不同步悔棋时你弹出了历史栈里的数据把board数组恢复为EMPTY但忘了销毁棋子节点或者销毁节点时索引搞错就会出现“数据上这格已经空了画面上还有颗棋子”的情况。我的建议是悔棋操作只通过一个专门函数处理函数里同时做三件事——改board数组、销毁对应棋子节点、重置currentPlayer。不要在一个事件回调里东写一行西写一行地操作这三件事否则很容易漏。7. 实战心得与后续扩展方向真正把五子棋在开维引擎里完整跑起来之后我最大的感触是一个“简单”的棋类游戏恰恰最能逼着你把引擎的每个基础模块都拉出来遛一遍。渲染坐标、事件映射、场景节点管理、定时器、状态控制、资源生命周期全部在这个项目里有了一次真实的串练。有几个小技巧分享一下。棋子上场的时候给一个由小变大的缓动动画其实就几行代码但视觉手感提升非常明显。判断胜负时把那五颗棋子的颜色做一次高亮闪烁比弹一个生硬的提示框好用得多。还有就是棋盘渲染时如果引擎支持九宫格拉伸棋盘底板资源可以做得干净一点窗口宽高比变化后视觉依然稳定。扩展方向上想做联网对战可以先从“同屏双人”过渡到“局域网帧同步”把交互坐标数据互换那套逻辑模拟一遍后面再接服务端。想做AI更强可以在现有评分表之上加极小化极大搜索并配合α-β剪枝再引入开局库。想做复盘功能历史栈里记录的数据已经足够把它导出成回合列表再回放即可。根据项目实践下来的经验我给后来者一个中肯的建议别急着追求花哨功能先把单机人人对战做到“手感对、判定准、界面干净”再一步一步往AI和联网扩展。五子棋这个项目说到底是引擎能力的磨刀石每一轮迭代都能让下个项目少踩一堆坑这才是它真正的价值所在。