【国际象棋】棋盘游戏-微信小程序开发流程详解

与中国象棋类似的，还有国际象棋，知道有人爱玩，于是凭着好奇心，网上研究了一下，跟中国象棋有相似之处，玩法是有些许不一样，不知道象棋最早出于谁之手呢，抽空做一做，最终完成，玩一玩看着还不错吧，这里给讲一讲它的实现过程。

可能在国内的有些同学没有玩过国际版的象棋，在此简要说明以下规则，以便了解：
：὇;皇后，不可越棋；：ᾓ;国王，限走一格，特殊走法，首次使用可与未使用过的车易位一次（向车方向走两格），若被吃掉就判断为败；：ὁ;丞相，斜着走，不可越棋；：Ἴ;骑士，斜着走一格，再前进一格；：Ὥ;马车，不可斜着走，不可越棋；：♟️卒兵，只能前进一格，首次使用可前进两格，斜着吃，可吃过路兵（左右两边的格子），当前进到对方底线时需要升变换为除王和兵之外的其它棋子；

准备开始做了，打开微信开发者工具，新建一个项目时，如下图

例如，项目名称为，依次选择
小程序不使用云服务使用JavaScript - 基础模板

这时，开发工具会自动创建生成一些文件，不用管它，

新建一个游戏页面，文件在，页面的布局大致如下

上面布局中，使用两个图片组件作为静动态背景，还有一个画布用于绘制

先看一下，要做出来的页面是这样的，看如下运行显示效果

再去修改一下主页（第一个页面），文件在，

在加载事件里添加一段代码，可实现自动跳转到游戏页面

同时打开新建的游戏页面逻辑代码，文件在，

看好了，接下来开始写游戏逻辑代码，

首先从页面初次渲染完成时开始写，获取到画布组件，并绑定触摸开始事件，看如下代码

画布组件获取到后，可以在上面绘制棋盘了，

在初始化棋盘方法里实现，生成棋盘图片数据，显示在页面上，代码如下

把图片弄到背景图片中，这样就可以了，看看显示的棋盘，运行效果如下

棋盘绘制好了，还差点什么呢，还要绘制所有棋子，

使用方法可画出所有的棋子，在棋盘之上布局，

然后，生成图片，弄到画布的下层，叠加起来，类似图层，看如下代码

上面用到绘制棋子的方法是，传入的参数是棋子和格子，可以从格子上绘制棋子

讲到这里，不得不说，这里实现用户选择棋子移动的逻辑要复杂一些，看看实现步骤，能否看懂全靠领悟，

从用户开始触摸发生的事件里，根据触摸坐标获取到的指定格子为，作为判断，看如下代码，

以上代码，全是判断逻辑，不要求新手能否看懂，只知道实现思路就好了，
理论上讲得思路是对的，已得到验证是可行的，可以参考一下，自己有能力实现就好

下棋规则的判断实现逻辑看似易懂，要通过代码实现就要复杂多了，实现过程需要有耐心，思路要清晰，一步一步来，相信自己，

上面已经讲出 “吃过路兵，兵升变，王车易位”的规则判断逻辑了，

还有其余的下棋规则，都是交给方法去处理的，看如下代码

从上面代码来看，几乎所有走棋判断都会用到预测棋子是否可移动的方法，
参数与是相对位置偏移量；参数是执行下一步的方法，是递归调用的；

很难理解的话就先放着，等到自己水平提升以后，有好奇心再回来研究弄清楚就好

国际象棋-特殊规则：吃过路兵

国际象棋-特殊规则：王车易位

其余的细节动图这里就不展示了，从编写实现难度上看，国际象棋是要比中国象棋的实现要复杂一些，原理上大同小异，

想要小程序项目源码请点这里查看，在资源一栏下可找到 国际象棋-小程序项目源码，请放心下载，值得研究学习，感谢支持！