蛙蛙推荐:动手做个网页游戏-五子棋

声明:

五子棋的算法和思路是来源自园友二十四画生的一个帖子,地址如下,在此感谢。

http://www.cnblogs.com/esshs/archive/2005/04/01/129824.html

我只是在算法上稍加改进,并从c#代码移植到javascript和html上。

摘要:

五子棋是中国的传统休闲益智小游戏,规则不是太复杂,我们可以通过写一个五子棋来锻炼编码的思路和风格,提高基本功能力。上次花很大功夫写的正则解析引擎也是这个目的,但关注度比较低,希望这个小五子棋游戏能得到稍微多一些的关注,这次也没有用高深的技术,熟悉html,javascript和jquery就可以了。

大家来找错-自己写个正则引擎

 

思路

首先从高层进行设计,分成棋盘界面类,棋子管理类,AI类,五子棋规则类,界面帮助类等几个模块,模块间要有明确的分层关系,高层模块调用低层模块,模块之间的调用关系也要明确,降低耦合,模块对外暴露的接口在同一个抽象层次上,

StoneRule主要负责检查当前棋局的状态,是否出现了某方赢棋,黑子出现禁手,平局等状态,ChessboardState枚举表示棋局的各种状态。 由于正规五子棋的禁手规则判断比较复杂,我这里判断三三禁手,四四禁手和长连禁手规则比较简单,只要形成两个或者两个以上的活三,活四就算禁手,不考虑太深层次的规则,如看起来是活三,其实对方可以堵的情况。所以也许和正规的规则有些出入,但一般选手使用是不影响的。

StoneAI可以根据当前棋局和电脑的颜色来自动计算出电脑下一步该走哪儿,内部有一个Check方法来给棋盘上每一个没下子的空位进行评分,评分最高的就是电脑要走的下一步棋的位置。评分这个规则在二十四画生的博客里有介绍,大概意思就是假设这个空位放上电脑方的棋子后,电脑方连成的最大棋子数是多少,连成的棋子越多,评分越高,这属于进攻措施。然后再假如电脑不在这个空位放子的话,对方放子的话,对方连成的最大棋子数是多少,连成的棋子数越高,评分越高,这属于防守措施。 我在评分的时候加了改进,如果放子后连成3个,需要两边都有空位才给加分,否则两边已经堵上了,即使电脑走了这个子也不可能连成五个,而连成4个子的话,至少要有一边有空位,否则最终也连不成5个。

Chessboard表示一个棋盘,主要是UI表现层,有画棋盘,在某点上画棋子,移除某点上的棋子(撤销或悔棋),重置等操作,这些都是用jquery操作Dom完成的。

UIHelper是界面辅助类,比如向用户显示信息,捕捉用户的开始游戏按钮和棋盘的点击事件等。

StoneManager类是整体的驱动类,由它来操控协调其它的类一起工作,init()用来初始化棋盘,Start()开始一个新的回合,以及处理人下子和电脑自动下子。

从上面可以看出每个类都有自己明确的职责,而且调用关系也很明显。

流程

开局:浏览器打开的时候执行StoneManager.Init()去初始化棋局和绘制棋盘, 用户点击开始游戏按钮后,进行开始状态,默认是人先手,电脑后手,先手永远是黑子,这是既定规则,开始后棋盘要Reset,把已有的棋子清空。

 

人落子:人点击棋盘后,UIHelper类会捕捉到,并执行StoneManager的PersonDownStone方法,人落完子后,检查棋局状态,是否赢棋或者出现禁手,平局等。然后是电脑落子,StoneManager会调用StoneAI类去询问下一步该在哪儿落子,然后去落子,落完子后也要重新检查棋盘状态。

 

赢棋:当检查棋盘出现某方赢棋后,StoneManager会调用UIHelper通知用户某方赢棋,并调用Chessboard.Reset重新开局。

 

以下是游戏的在线演示,欢迎大家试用,点击下面的“运行代码”按钮。

有人说有360浏览器和TT浏览器打不开,我提供了一个本地压缩包下载:fivestones.zip

 

posted @ 2010-07-25 16:21 蛙蛙王子 Views(2551) Comments(19) Edit 收藏

 回复 引用 查看   
#1楼[楼主]2010-07-25 17:08 | 蛙蛙王子      
得,引入了一个BUG,防守的时候出现错误,马上修改
 回复 引用 查看   
#2楼2010-07-25 17:14 | John Liu      
做的不错,不过好像用了cavas对象吧,只能在firefox里看。
 回复 引用 查看   
#3楼[楼主]2010-07-25 17:15 | 蛙蛙王子      
@John Liu
没有用,只是一个div而已,在IE下测试通过了,IE下如果第一次不显示棋盘,F5刷新一下,等图片加载上来就可以玩了。

 回复 引用 查看   
#4楼2010-07-25 17:28 | Justin      
推荐++
 回复 引用 查看   
#5楼[楼主]2010-07-25 17:30 | 蛙蛙王子      
貌似是处理对方活四的时候给的分给少了
 回复 引用 查看   
#6楼2010-07-25 18:09 | 司马多情      

不可谓不悲剧。

 回复 引用 查看   
#7楼[楼主]2010-07-25 18:15 | 蛙蛙王子      
@司马多情
你这个太杯具了,你是白的还是黑的呀,判断输赢不应该出这么低级的错吧。

 回复 引用 查看   
#8楼[楼主]2010-07-25 18:18 | 蛙蛙王子      
有些地方确实还有问题,晚饭回来增加悔棋功能和调试功能。
 回复 引用 查看   
#9楼2010-07-25 18:48 | 司马多情      
@蛙蛙王子
我是白字。默认就是白字啊。我还以为电脑玩不过我,赖皮呢。

 回复 引用 查看   
#10楼2010-07-25 20:32 | 飞林沙      
我记得五子棋是可穷尽的,就是人最多也就和电脑下平手
 回复 引用 查看   
#11楼[楼主]2010-07-25 20:38 | 蛙蛙王子      
@司马多情
你这问题能重现吗?默认不是白子,默认是黑子,一局之后交换先后手,你的问题我从来没遇到过。

 回复 引用 查看   
#12楼[楼主]2010-07-25 20:43 | 蛙蛙王子      
@飞林沙
沙总也做一个,和我的对战一下呀。

 回复 引用 查看   
#13楼2010-07-25 21:46 | 司马多情      
@蛙蛙王子
我说我默认的是白子,我每次都是点击开始游戏,所以都是电脑先手,我前几把都是被电脑追着打,后来一把我抓住一个机会,追着电脑打,结果就出现这个情况了。电脑真赖皮!哇嘎嘎。

 回复 引用 查看   
#14楼2010-07-25 21:52 | 司马多情      
而且算法应该有些问题,有时候很明显的该防守的地方电脑都没有防守。我往往很容易就在后手的情况下赢了。
 回复 引用 查看   
#15楼2010-07-25 21:59 | Fs.song      
我的是白棋,明明是我赢了结果,杯具了!唉!人生就像茶几,上面摆满杯具!

 回复 引用 查看   
#16楼[楼主]2010-07-25 22:26 | 蛙蛙王子      
@Fs.song
奇怪了,你们怎么都会出现这个问题呀,我都没出现呀,我正在写调试工具,过几天再更新一版。你连成5个的时候啥都没提示吗?

 回复 引用 查看   
#17楼2010-07-26 08:42 | 潇湘隐者      
学习了,膜拜一下
 回复 引用 查看   
#18楼2010-07-26 10:29 | xoyozo      
呵呵 趣味五子棋
 回复 引用 查看   
#19楼2010-07-31 17:39 | 大海啊      
扯蛋吧,我就下赢了电脑