js实现的单机双人象棋演示及其分析

http://www.blueidea.com/bbs/NewsDetail.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8&DaysPrune=5&lp=1&id=1723499

作者:桃花岛

本程序实现的功能为本地二人对弈中国象棋,实现语言为javascript+VML,在windows 2000 pro+IE 6sp1的环境下测试通过。
程序默认的起始颜色为红色,只有执红色一方可以先走棋,双方轮流下棋,老将被吃则认为输棋,棋局结束,可以通过刷新页面重新开始。
下棋的时候,点击要走的棋子,将显示当前可走位置(小矩形)和可吃位置(加上红色框标记),然后点击对应位置即可走棋。如果要改选其他棋子,直接点击即可。

程序的演示地址:
http://island.vip14.dig86.com/chess/chess.htm


设计概述:
在一个复杂的、有界面、有交互的程序中,将控制模块与表现模块区分,分别编写是很有效的做法。这样能够使对界面、运算等的操作集中统一,便于修改与测试。
在整体设计上,本程序采用了将判断可行位置算法下放的做法。传统的象棋程序一般先取得欲移动棋子类型,然后由统一的算法判断目标位置是否可行。本程序把判断目标位置是否合法的方法下放到棋子,控制模块在判断当前走法合法性的时候,取得这个棋子对象,并且调用此对象的canGo方法来判断目标位置是否可行,这种做法比较有利于让程序充分体现面向对象特性。
棋盘单独作为一个模块实现,它具有一定规模,且实现了一个针对性比较强的功能,因此将它与其他模块隔离,单独编写。这个模块的主要事件集中在图形化效果的表现,同时也应当主意结构的层次性和合理性,并且应当向外界提供所生成棋盘的引用,让控制模块可以将棋子挂接在这个根元素上。
棋子本质为div对象,包含了一个图标文件,并且具有附加属性,如:颜色、种类、位置等。各种棋子有不少相似属性,但是具体差别还是不小,比如各棋子的判断可行位置走法。因此,先编写一个具有普遍性的棋子模块,拥有棋子的基本属性:坐标、图标、当前是否被攻击等情况,然后分别对于每种棋子,创建单独的模块。这个过程中采用了一种“伪继承”技术:在单独的棋子模块中,创建了一个通用的棋子变量,并且对它附加了一个canGo方法,然后,把这个棋子变量作为自己的创建结果返回出去。
为什么称这个为“伪继承”呢?很明显,js并不支持继承,而且,继承的实现方法并非如此。但是,我们做了继承所做的事情,即为父类型的对象添加了属性、方法,因此扩展了它的属性和方法,并且,最后将扩展完成的对象当作自己构造出来的对象返回出去,使得结果对象除了具有父对象的属性、方法,还拥有自己特有的属性及方法,因此,我们可以说这是某种形式的继承。
在程序中建立了一个全局二维数组situation用于保存棋子列表,各棋子对象存放其自身坐标等信息,还定义了各常量用于标记棋子颜色、种类等通用信息。
程序中所使用的资源文件有棋子图标及标记可走位置的图标。棋盘为VML代码绘制,各棋子分别置于单个div中,由一个外部的HTC文件控制其行为。这个HTC做了这样的事情:在点击当前棋子所在的div时,HTC中的check函数对当前点击对象进行处理,决定应当走棋或者其他操作。
在点击棋子时,将根据遍历棋盘坐标代入该棋子canGo方法的结果,取得可以移动的位置。如果这些位置当前没有棋子,则认为是可走位置,在对应位置产生一个Blank对象,放置一个提示图标。Blank对象同样是棋子模块的伪继承,它没有canGo方法,只保存了基本属性,专门用于标志可走位置。如果这些位置当前存在棋子,并且棋子的颜色与自身不同,则认为是可吃位置,将对应棋子加上红色边框标记,同时将其beAttack属性设为真。这样,走棋的时候即可据此判断。
走棋后,程序需要清除以前那些过期的标记,这是通过一个遍历实现的,从棋盘中检索到灰色对象,即认为它是标记,直接清除。另外,吃子的实现比较复杂,反复尝试replaceChild方法以后放弃了,因为遇到意想不到的问题,所以通过遍历检索来取代被吃棋子。这个步骤似乎可能有比较简便的实现方法,希望高手指教。

附记:很久以前,在51js论坛看见幻宇前辈的js版星际,就产生做这个象棋的念头,然后花一个小时参考美洲豹的VML教程写了棋盘,却因为各种原因搁置了。这次重新捡起来,花了一天半时间写了其他所有部分,测试了一会,没发现bug,先发布出来,给大家玩玩。有兴趣的朋友可以继续做,做成能够联机的版本,不是很难。此外,我暂时有一个部分没有设计,就是老将见面的判断,有空补上,hoho。基本的说明就先写这么多,以后慢慢把各部分代码加上注释,发在这里,大家不要着急啊。

阅读更多
个人分类: Web Others
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭