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。基本的说明就先写这么多，以后慢慢把各部分代码加上注释，发在这里，大家不要着急啊。

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

python编程做联机游戏大全单机_如何将一款单机双人的游戏做成联机版？
看情况啦.没玩过题主说的游戏不过目测:单机双人双人分别用同一键盘不同键位输入? 无鼠标输入? 题主又提到有源码,随意想了想,依据源码质量和抽象程度有以下几种可能方案:搭建信道传输键盘输入及窗口图像( ...
JS几种数组遍历方式以及性能分析对比
前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
html js涨幅率怎么计算,JS加速线指标的计算公式及买卖分析
在趋势指标中,有一种JS加速线指标,这个指标可以帮助我们确定股价运行的快慢.那究竟什么是JS加速线指标?该指标在实战运用中怎么样进行买卖?下面赢家学院的主编老师就来为大家进行相关的介绍. 一.概述 J ...
单机中国象棋（Java版）
好长时间没有碰java了,在网络上找到一个纯java写的单机版中国象棋,感兴趣的研究了一下,结果发现了几个错误:1.没有胜负结果的判定,老将死掉后还可以继续下棋:2.老将的活动范围没有仅限在田字格内. ...
Reveal.js一个用来做WEB演示文稿的框架
reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件 ...
ResponsiveSlides.js——小于1k的轻量级幻灯片演示插件
图片切换效果 ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin). ...
基于EGE的双人象棋
#include <graphics.h> #include <string.h> #include "resource.h" #include <t ...
Kafka单机部署学习演示案例
Kafka 单机部署演示前置准备虚拟机配置: 内存:3G 处理器:1 核数:1 (一)kafka 安装去kafka官网下载稳定版本到Linux服务器中进行解压安装.下载链接,我这里使用的是2.7 ...
canvas+js实现简单的双人坦克对战小游戏
相信有很多人对坦克大战的游戏模仿很有兴趣,在实现经典的坦克大战之前,我先写了个双人的坦克对战,实现了基本的对战功能.下面就开始介绍游戏的编写. 首先创建一个基本的html文件,添加canvas标签以实 ...
JS实现五子棋单人双人简易游戏(下)
目录一.简介二.游戏实现效果如下三.以下为源码 1.HTML 2.CSS 3.JS 一.简介此版包括了单人模式(人机模式)和双人模式只需要双人模式的可以看这篇:JS实现双人五子棋简易游戏(上 ...

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

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

最新文章

热门文章