JS实现五子棋（一）目标分析

微信关注 [可回收BUG]

最近很久不写js了，突然决定做一个五子棋的小游戏重温一下js的魅力，做完之后觉得有必要在这里做个记录，分享一下，重点记录一下实现的思路，设计过程。
先剧透一下
，计划分几个阶段进行更新

目标分析
外观分析及绘制
内部数据结构-控制及判定
人机对战分析及实现

废话不多说，代码先上为敬
https://github.com/a74946443/chess

一、目标分析与构成设计

js内一切皆对象，虽然不像其他那些面向对象语言有专门的对象机制，比如抽象、继承，但是用js却可以完全实现我们熟悉的面向对象开发方式和方法，本次的五子棋就采用面向对象的方式进行分析、开发。

在实际的设计之前，首先要考虑做的是什么，明确目标，然后试着想象或者画出预期效果，有了一个大致的构思之后再开始设计分析。

我计划初期做web版单机双人对战五子棋，再考虑人机对战，预期效果实现单台电脑上运行，两人轮流落子，先在一条直线上连续摆出5颗相同颜色的棋子的一方获胜（不考虑复杂规则，如禁手等）。

强势输出脑中的效果草图，就像这个样子

嗯～ -_-!!，大概是这个样子，意思传达到了就好

对象分析

最直观的，一定要有对战双方的玩家，那么玩家具有哪些属性呢，比如玩家的名称，所执棋子（黑方、白方），玩家类型（人、机器，如果考虑实现人机对战则可以加入这个类型），落子步数等等。

除了玩家，还必须有棋子和棋盘，棋子就会有颜色属性，每局开始时会确定所属玩家这一属性；棋盘则具有棋盘尺寸，格子的数量等等，我在这里假设棋盘是一个智能的有生命的棋盘，可以清空棋盘中的棋子、可以在棋盘中绘制一颗棋子等动作等。那么到这里可能有老铁想问，玩家不是也有动作嘛，比如下棋落子，悔棋、认输等，这样分析和设计完全没有问题，只是有不同的目标和设计实现方法。

目前已经大致定义了三类实体对象，玩家、棋子和棋盘，但是仅仅有实体对象还不足以完成一次完整的五子棋对战，还缺少了很重要的一项，就是游戏规则，这里就不描述详细的术语定义和规则了，只列举游戏的基本规则，双方轮流落子，实质就是每落一子后立即变更当前回合的控制权至对手方。输赢判定，即当前棋子落下后，如果棋盘上存在一条直线上连续5个相同颜色的棋子，即判定执此颜色棋子的一方胜利。

逻辑分析

从这里分析，为了方便实现轮流落子，引入一个虚拟的逻辑对象“控制者”，控制者像是一个中介，代替玩家下棋，每下一步棋，就换一个颜色继续下棋，于是我把落子和控制切换的动作赋予了控制者。

那么规则要如何判定呢，是通过事件绑定，下棋落子即为一个事件，事件触发布局检测，判定胜负，布局检测没有必要检测过多的位置，能够取胜的棋子摆法只有垂直、水平，左上至右下，右下至左上共4条线路。

当棋子落在图中圆圈的位置时，触发落子事件，检测A，B，C，D四个方向的布局是否达到胜利的条件。每一条线路又被落子分为两份A1、A2，B1、B2，C1、C2，D1、D2，检测时分别向两个方向检测最多4个单元，算上落子刚好5个单元。

至此对目标有了一个相对细致的分析和逻辑了。

这里为了更加方便的展示，使用思维导图软件将对象以及对象的成员属性/方法大致描绘出来，方便对想法做修改/更正。

到这里基本的分析就完成了，按这个思路，下一步将根据分析的情况，就可以将实体对象的图形或信息在页面上绘制出来了。

预知后事如何，且听下回分解！

微信关注 [可回收BUG]