JavaScript中国象棋程序(0)- 界面设计

javascript admin 35000 0 评论

“JavaScript中国象棋程序” 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序。希望通过这个系列,我们对博弈程序的算法有一定的了解。同时,我们也将构建出一个不错的中国象棋程序。

程序的最终效果点击这里查看

在进入正题之前,本节是一些闲聊。如果你急切想进入正题,请跳过本节。

我学习中国象棋程序的历程

最初是买了本书《C/C++中国象棋程序入门与提高》。这是本好书,写得细致、透彻,我很愉快地读完了前6章,毫无压力。这6章讲解了局面表示、走法生成、局面评估、基本搜索算法等内容。遗憾的是,第7章我读不下去了。第7章是在讲解,如何使用VC6.0设计图形用户界面。天啊,我是一个web程序员,我只想了解一下象棋程序的设计思想以及算法,我实在不想去使用陈旧的VC6.0来学习windows GUI编程啊。
幸运的是,我在这本书最后一页的参考文献里,发现了象棋百科全书网。在这家网站的github仓库,发现了一个JavaScript版本的中国象棋软件,而且性能还不错。使用HTML + JavaScript来设计界面,自然是简单了很多啊,这样就能集中精力去学习象棋程序的算法了。

为什么选择JavaScript

本教程之所以选择JavaScript,讲解JavaScript版本的中国象棋程序,我有以下几个理由吧:
1、这个JavaScript版本的中国象棋程序,性能还不错。
2、界面设计简单,可以把主要精力用在对算法的学习上。
3、不用搭建环境。只要有文本编辑器(比如notepad++)和浏览器(最好是chrome吧),就足够了。
4、程序用到的都是很基础的JavaScript语法,应该没有语法方面的障碍。

项目初衷

曾经读到过一个教程手把手教你构建 C 语言编译器,我觉得很有意思。于是我就仿照这它的格式,写下了这个中国象棋程序教程。本教程的绝大部分思想都来自《C/C++中国象棋程序入门与提高》和象棋百科全书网象棋百科全书网上面还有很多不错的文章,让我受益匪浅。
如果你想了解原版的程序,请前往象棋百科全书网的github下载,这里面有很多个版本,我们使用的是JavaScript版。

这个教程难学吗?

1、至少前4节是不难的吧,都是一些基本的东西。
2、第5节介绍了Alpha-Beta搜素,这个算法很重要,是后面几节教程的基础。
3、如果搞明白了Alpha-Beta搜索算法,随后的3节应该也不算难吧,都是在Alpha-Beta算法的基础上进行优化。

最后,非常感谢象棋百科全书网的前辈以及《C/C++中国象棋程序入门与提高》的作者。
祝你学得愉快。

这一节我们设计图形界面,显示初始化棋局。当点击某棋子时,弹窗提示所点击的具体棋子。效果如下:

934105-20170221151846929-1961232006

 

1.1、棋盘表示

中国象棋有10行9列,很自然地想到可以用10×9矩阵表示棋盘。事实上,我们使用16×16矩阵来表示一个扩充了的虚拟棋盘。

934105-20170221152542195-1722498827

如上图所示,灰色部分为真实棋盘,置于虚拟棋盘之中。这么做可以快速判断棋子是否走出边界。例如象沿田字走,如果走到真实棋盘之外的虚拟棋盘中,说明走法不合法。

容易想到使用二维数组表示16×16矩阵,这样棋盘上的一个位置需要两个变量表示。一个走法包括起点和终点,就需要四个变量。如果使用长度为256的一维数组表示,一个位置只需一个变量,这就可以减少计算量。因此用一维数组表示16×16矩阵。

一维矩阵和二维矩阵之间的转换也很简单:

其中,sq & 15是通过位运算取余,与sq % 16结果相同(可参考篇文章)。

再使用一个辅助数组,标识虚拟棋盘中,哪些位置属于真实棋盘:

要判断某位置是否在真实棋盘,可使用函数:

1.2、棋子表示

使用整数表示棋子:

1.4、棋盘前端设计思路

由于棋盘有90个交叉点,我们把棋盘划分为的90个小正方形区域,交叉点是小正方形的中心。每个区域都会定义一个img标签。

934105-20170221154619898-632109959

上图使用红色方框,标识出了4个小正方形区域。

这些img标签有两个作用:

(1)、显示棋子图片

如果某个区域存在棋子,就会显示相应的棋子图片;否则,显示一张透明图片(也就是oo.gif)。

(2)、响应点击事件

每个img标签都会绑定onmousedown事件。点击不同的img标签时,会传递不同的参数给响应函数,这样就知道点击的具体是哪个区域了。

1.5、核心代码说明

本节的代码可以在 Github 下载,也可以直接clone

git clone -b step-1 https://github.com/Royhoo/write-a-chinesechess-program

程序中定义了两个对象:Board和Position。Board表示一个棋盘,主要功能是初始化棋局,显示棋盘、棋子,响应棋盘上的点击事件。Position存储了一维棋局数组,并定义了很多对该数组进行操作的方法。

Board对象实例化的代码位于index.html中。

通过prototype属性,我们为这两个对象添加了很多的属性和方法。

Board的主要属性和方法:

(1)、pos

这是Position对象的一个实例。

(2)、flushBoard()

刷新棋盘,也就是重新显示棋盘上的棋子。

(3)、drawSquare(sq)

显示sq位置的棋子图片。如果该位置没棋子,则显示一张透明的图片。

(4)、clickSquare(sq_)

点击棋盘的响应函数。点击棋盘(棋子或者空位置),就会调用该函数。sq_是点击的位置。

Position的主要属性和方法:

(1)、squares

这就是一维棋局数组。

(2)、fromFen(fen)

通过FEN串初始化棋局,也就是将参数fen表示的棋局,转化为一维棋局数组squares表示的棋局。

(3)、addPiece(sq, pc)

将棋子pc添加进棋局中的sp位置。

转载请注明: 飞嗨_分享互联网 » JavaScript中国象棋程序(0)- 界面设计

赞 (0) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽

高效,专业,符合SEO

联系我们