下五子棋是什么点击和滑动的区别

来源：蜘蛛抓取(WebSpider) 时间：2016-09-04 03:51 标签： 五子棋是什么

线上地址– pc上使用谷歌浏览器比較友好@～@

代码仓库– 欢迎对此仓库进行扩展或star啦 @～@

以上兵马未动，粮草先行看官可以先体验下小游戏并且粗略了解下相关的知识点后（熟悉者可跳过，欢迎留言改进哈）再往下读。

秉承着会就分享不会就折腾的宗旨。自己利用周末的时间（-）将五子棋是什么小游戏梳理了一波整理成一个教程，放出来给大伙指点指点下面进入正题:

五子棋是什么的规则有点点复杂，我这里就简化并改写成下面这几條:

  1. 对局双方各执一色棋子
  2. 黑先、白后或者白先、黑后，交替下子每次只能下一子。
  3. 横线、竖线或者斜线上有连续五个同一色的棋子則游戏结束。

正式比赛的规则看官可以到这里了解。本博文的案例是以上面列出来的四条规则为基础来实现五子棋是什么小游戏的。

為了方便管理、扩展功能和编写代码我这里使用了es6的class语法，面向对象的思想来实现首先，自己定义一个类Gobang如下：

上面的Gobang类中，包含叻一个constructor和init方法其中constructor方法是类默认的方法，通过new命令生成对象实例时候自动调用该方法。一个类必须有一个constructor方法如果没有显式定义，┅个空的constructor方法会默认添加然后就是init方法了，这里我是整个类的初始化的入口方法

项目骨架代码在仓库中对应的位置是。

棋盘我们可鉯分为两种，一种是视觉上的棋盘另外一个是逻辑上的棋盘，你是看不见的如下截图:

首先，我们实现20*20的物理上的棋盘并且配上一些樣式。当然为了高可配置，我们使用上面代码骨架上的options进行传值:

然后就进行物理棋盘的绘制了,这里是使用canvas的相关知识点控制画笔更改著笔点并画线条:

接着就是逻辑的棋盘的记录了。这里我使用了二维数组去记录棋盘点的位置比如(0,0)点对应的数组下标是[0][0];然后(1,2)点对应的下标昰[1][2]…以此类推。这里在记录好点之后也为他们进行赋值为0，表示此处没有落子如果有落子，记录为1（黑子）或2（白子）具体逻辑棋盤代码如下:

绘制棋盘代码在仓库中对应的位置是。

绘制棋子这个简单在标题中表明了是使用canvas的相关知识点，棋子是使用canvas来绘制的具体鼡的canvas的知识点有arc和createRadialGradient方法。前者是绘制一个圆后者是为这个圆添加颜色渐变效果，使得棋子看起来更加有质感当然，这里需要绘制黑白兩种颜色的棋子需要有个flag来进行标识是否是黑色/白色，代码中有介绍

绘制棋子代码在仓库中对应的位置是。

在上一节中只是讲解了怎么去绘制棋子。接下来我们要将绘制好的棋子放到要下在棋盘的相关点击位置并且实现黑白两棋的交替下棋，也就是实现人人对战啦

首先，我们在初始化入口那里先初始化下棋子的角色（是黑棋还是白棋）获取单元格的宽度。

接下来就可以实行点击棋盘位置的计算叻获取相关的逻辑棋盘的坐标点，之后在这个坐标点进行棋子的绘制:

落子实现人人对战代码在仓库中对应的位置是

在双方下棋中，允許对方或者自己对已经下的棋子进行调整也就是悔棋，恢复上一步的操作然后再重新下棋。实现悔棋功能的时候需要知道下棋的历史记录和当前的落子步数和角色。

对于历史的记录这里对每一步的落子都使用一个对象进行存储，并放到一个history的数组里面进行保存:

然后茬执行悔棋的时候将前一个记录的棋子的在棋盘上对应的ui给抹除掉就行了，不能将history中对应的位置移除哦因为是要用到撤销悔棋的啊。銷毁完棋子后要对物理棋盘上的ui进行修补，修补的情况一共有九种:

实现悔棋代码在仓库中对应的位置是

有允许悔棋，那么就有允许撤銷悔棋这样子才合理同悔棋功能，撤销悔棋是需要知道下棋的历史记录和当前的步骤和棋子角色的如下:

实现撤销悔棋代码在仓库中对應的位置是。

五子棋是什么的的结束也就是必须要决出胜利者或者是棋盘没有位置可以下棋了。这里考虑决出胜利为游戏结束的切入点上面也说到了如何才算是一方获胜–横线、竖线或者斜线上有连续五个同一色的棋子。那么我们就对这四种情况进行处理了我们在矩陣中记录当前点击的数组点中是否有连续的五个1（黑子）或者连续的五个2（白子）即可。如下截图的x轴获胜注意gif图右侧打印出来的数组內容:

四种获胜的情况和或者的提示相关的代码如下:

胜利提示/游戏结束代码在仓库中对应的位置是。

嗯～至此已经一步步讲解完如何开发┅个能够在pc上愉快玩耍的休闲小游戏-五子棋是什么了。当然很多的参数我都是设置在代码的options这里，其实为了更好的用户体验你可以将這些设置在ui层面供用户自行调节的；再者你可以在项目基础上实现其他功能，比如人机对战等如果有什么想法的话，欢迎下方留言或者湔往此代码仓库进行相关动能补充或者完善@～@

五子棋是什么不是很擅长朋友研究了会儿就搞定了！非常不错的游戏

建议可以由玩家自由选择棋盘数量，四块太少了

  • 启用“家人共享”后此 App 最多可供 6 名家庭成员使用。

更多来自此开发人员的 App

我要回帖

更多关于 五子棋是什么 的文章

 

随机推荐