《基于HTML5的棋牌游戏毕设论文.doc》由会员分享，可在线阅读，更多相关《基于HTML5的棋牌游戏毕设论文.doc（49页珍藏版）》请在三一办公上搜索。
1、 编 号： 审定成绩： 重庆邮电大学毕业设计（论文）设计（论文）题目：基于HTML5的棋牌游戏学 院 名 称 ：学 生 姓 名 ：专 业 ：班 级 ：学 号 ：指 导 教 师 ：）答辩组 负责人 ：填表时间： 2015 年 6 月重庆邮电大学教务处制摘 要如今社会是当之无愧的网络生活，也正是计算机的蓬勃发展让我们的生活更进一步。无处不见的科技，让我们生活无论是精神方面还是物质方面都能得到满足。而网络游戏更是丰富了我们的精神生活，随着电脑的出现，我们也拥有了更多乐趣，从一开始的扫雷，直到如今的各种大型网络游戏，电脑游戏也逐渐成为生活中不可缺少的娱乐方式。在电脑游戏中，单机游戏则是可以不用联网则能
2、玩耍，如今基于HTML5开发的游戏也多为单机游戏。本文则是通过象棋游戏来实现基于HTML5的游戏开发的基本过程与方法。文中基于HTML5的棋牌游戏则是将以前的娱乐生活移到的网络上，在网页上也能玩象棋游戏。通过HTML5的各种标签和功能来实现象棋游戏，例如通过canvas标签实现游戏部件操作。此象棋游戏能通过鼠标对棋子的控制实现游戏过程，可以选点击按钮开始游戏，能实现真实象棋游戏过程中的功能，吃子、悔棋、胜负判断等。其中行棋判断以及具体实现的方式例如行棋规则、游戏策略则是由JavaScript编写实现，最后通过CSS来修饰游戏界面文字的风格和游戏部件的布局等。在Dreamweaver上编写、修改
3、和运行游戏进行测试，最后，通过在不同的浏览器上进行在修改和测试，将象棋游戏所需要的功能完善。【关键词】 网页游戏 HTML5 象棋 JavaScriptABSTRACTToday, the society is a well deserved network life, it is the booming computer to make our life more further. There the technology can be seed everywhere, so that we live whether the spirit or material aspects can be
4、 satisfied. And network games is to enrich our spiritual life, with the advent of the computer, we also have the more fun, from the beginning of the mine, until now all kinds of large-scale online games, computer games has gradually become indispensable in the life of entertainment. In computer game
5、s, the stand-alone game can play without Internet, and now the games development based on the HTML5 almost are stand-alone games.This paper is to realize the basic process and method of game development based on HTML5 by chess game.In the paper, the chess game based on HTML5 is a way to move the pre
6、vious entertainment of life onto the network, and can also play chess game on the web page.Through the various tags and functions of the HTML5 to achieve chess games, such as achieving operate the game parts by canvas tags . This chess game can through the mouse control of the pieces to achieve game
7、 process, can be selected, click on the button to start the game, can achieve real chess game in the process of function, eat, undo, determine the outcome of the other. The chess to the judgment and the concrete realization of the way such as chess rules, game strategy is by JavaScript prepared to a
8、chieve, finally through the CSS to modify the layout of the game interface text style and game components and so on.Write, modify, and run games on Dreamweaver, and finally, by modifying and testing on the different browsers, the game needs to be perfected.【Key words】 web games HTML5 Chinese chess J
9、avaScript目 录前 言1第一章 HTML5概述2第一节 HTML5的发展历史2一、HTML5的演变2二、HTML5的革新2第二节 HTML5的优势3一、HTML5的新标签3二、HTML5的新功能4第三节 本章小结4第二章 基于HTML5的游戏6第一节 准备工作6一、什么游戏6二、绘制部件6第二节 JavaScript、CSS特性6一、JavaScript6二、CSS7第三节 HTML5游戏8第四节 本章小结8第三章 基于HTML5的象棋游戏开发9第一节 中国象棋游戏9一、中国象棋9二、 象棋规则10第二节 开发工具11第三节 象棋游戏部件的绘制12第四节 页面布局调整和信息定义13第五
10、节 本章小结13第四章 功能性JavaScript和主页14第一节 象棋AI14第二节 bill脚本15第三节 play脚本15第四节 common脚本16第五节 页面生成17第六节 本章小结17第五章 测试19第一节 测试的目的和意义19第二节 测试内容19一、界面测试19二、按钮测试21三、功能测试21第三节 本章小结22结 论23致 谢24参考文献25附 录26一、英文原文：26二、英文翻译：32三、工程设计图纸：36四、源程序：371、HTML5按钮主要代码：372、CSS主要代码373、AI脚本主要代码384、common脚本信息定义代码395、bill脚本写入棋谱代码416、pla
11、y脚本定义代码42 前 言HTML5是HTML的第5次重大修改，在不断的改进中，于2014年10月29日定制完成，相比前几个版本的超文本标记语言，HTML5对我们来说无疑是全新的。HTML5的新增元素让她在网页的功能性上更加全面和完善。而正因为如此，HTML5在基于以前的超文本标记语言有何新颖之处，又会为网络世界带来何种改变，在文中，我用基于HTML5的象棋游戏有所阐述。在日新月异的科技生活中，无论是虚拟世界观的网络游戏，还是在现实生活中就地取材的意趣游戏，电脑游戏已然成为人们不可或缺的娱乐方式。而网络上的象棋游戏则是将生活中已有的娱乐方式展现到电脑上的其中之一。相交玩游戏的不同方式，网页游戏
12、则是其中之一，而做网页游戏有用Flash，或是HTML4加XML等。基于HTML5的游戏相比之下则是更有优势，在全新的标准之下，能实现Flash的视觉效果，又不要Flash游戏所需要的大量内存，在功能性上更加全面，而不会想HTML4加XML游戏那般局限。尽管HTML5给我们带来的好处在我们浏览网页时似乎并没有很直观的感受，但是网页上更加绚丽的图片效果，一些网页细微的界面改变，一些潜在的功能变化，无疑是HTML5带来的好处。第一章 HTML5概述第一节 HTML5的发展历史一、HTML5的演变随着计算机行业的发展，各种计算机技术也是日新月异的变化着，人工智能技术，感知型无人机，新型机器人等等，在
13、不断的革新。而作为万维网的核心语言，超文本标记语言（HTML）也完成了第五次重大修改，即HTML51。而我们平时浏览的集文字图片动画为一体的网页也是由HTML编写的，通过连接完成网页之间的跳转和切换。最初的超文本标记语言与1993年首次以英特网草案的形式发布出来，在20世纪90年代中，HTML经过了大幅发展，从HTML2.0版到3.2版和4.0版，直至1999年的4.01版后，在业界普遍认知中，HTML的发展已穷途末路2。在Web标准的焦点转移到XML（可扩展标记语言）和XHTML（可扩展超文本标记语言）上时，HTML5草案前身名为Web Applications 1.0，于2004年被WHA
14、TWG（Web Hypertext Application Technology Working Group）提出。于2006年WHATEG与W3C正式合作，在2007年被W3C接纳，并成立了新的HTML工作团队，而在双方经过8年来不懈努力，在2014年10月29日，HTML标准规范终于最终制定完成，并公开发布。二、 HTML5的革新相比HTML4而言，HTML5取消了等标签，相关功能融合在CSS中，利于整体处理。又结合了XHTML的header，aside，footer，dialog等标签3，让处理对象语义清晰，分布明确，而非全部使用div，这些更改赋予了网页更好意义和结构。新标准适用了一些
15、全新的表单输入对象，使网页更容易管理，对搜索引擎更为友好。新增的视频标签音频标签则是将多媒体对象从object和嵌入式标签中解放出来，更为合理。而HTML5的新功能中，canvas对象，本地数据库，和API（Application Programming Interface,应用程序编程接口）更是让网页更加出彩，浏览器不需要依借Flash和Sliverlight则能直接显示图片和动画，能加速交互式搜索，缓存和索引，更能实现浏览器内的编辑和GUI（Graphical User Interface，称图形用户界面）功能4。第二节 HTML5的优势一、 HTML5的新标签上一节中列举的各种标签，丰富
16、了HTML5的功能，如在旧的标准中，人们喜欢用来标记页眉区域，这样一来在大量的网页代码中，显得较为拖沓，而HTML5则是直接使用标签，减少了不必要的复杂度，化繁为简。在本节将详解几种新增的标签。1、和多媒体标签 （网站导航块）和（定义页脚）,这种标签有利于搜索引擎的索引整理，有利于SEO（Search Engine Optimization，搜索引擎优化），能更好的帮助小屏幕装置使用。除此之外还为浏览器提供了新的功能，如和标签分别定义定义视频和音频，如此一来，网页则是不需要Flash插件则能直接播放视频音频，但是，和标签只有部分高版本的浏览器支持。在多媒体方面的标签除了和之外还有定义多媒体资源
17、和，为诸如 和 元素之类的媒介规定外部文本轨道即字幕或其他可显示文本，则是定义嵌入类容，如插件，再有则是和标签的存在，也让视频音频从标签中解放出来。2、标签标签定义图形，比如如表和其他图像。在网页中则是可以通过JavaScript在矩形画布中绘制路径、图形、文字以及添加图像。通过canvas API能处理PNG和JEPG类型的图形，而这两种类型的图形也体现了canvas的像素性。在HTML4中无法绘制的对角线能在canvas中实现，再有则是在video中抓取的帧能通过canvas显示出来，用户单击canvas则能播放该帧视频，由此一来，便是浏览器用原生功能实现了播放视屏插件的功能，如此一来我们
18、便不再需要插件来播放视频，带来的好处则是避免了插件带来的广告和特殊环境下对插件的封锁。而从某种意义上讲，标签的出现让Flash逐渐退出舞台5。3、表单标签定义选项列表，规定用于表单的密钥对生成器字段定义不同类型的输出，比如脚本的输出。相交于输出，输入类型的元素也更多元化，如能允许本地日期、时间、数字、颜色等的选择。二、HTML5的新功能除去上节中讲到的新增标签，HTML5还有新增的功能让HTML5更有优势。本地数据库，这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。实现了脱机浏览Web应用程序的缓存，而应用程序缓存则是能让我们离线浏览，让已缓存资源加载的更快，不需要
19、重复下载浏览过的资源，只下载更新或已更改资源，从而减少服务器的负载。HTML5支持内联SVG (Scalable Vector Graphics，指可伸缩矢量图形)，是相交canvas API绘制图形的另一种图形功能，而且是处理矢量图形。SVG图形有矢量图的特性，在放大缩小的情况下不会改变图片的质量且不会损失。且SVG图片可通过文本编辑器进行处理，可被搜索、索引、或压缩，可伸缩，能高质量打印。由此一来，便能实现图像搜索功能。除此之外还有地理定位，web worker ，HTML5服务器发送事件等功能。HTML5 Geolocation API 用于获得用户的地理位置，而因为保护隐私，该定位功能
20、则是需要用户同意。web worker则是在后台运行的JavaScript，生成多个线程，保证页面及时响应，不会影响页面功能。而HTML5服务器发送事件功能则是能让网页自动获得服务器的更新，而不需要像以前一样时时询问服务器以求更新，如此一来我们便能直接看到已更新的微博、新闻等。第三节 本章小结 本章讲述了HTML5从HTML1.0版本到如今最新标准的历程，以及HTML5在相关方面的优势。而从中可见的是，HTML在多年来体现了其生存力，尽管在一段时期曾次于XML和XHTML，但正是这样将XML和XHTML等的优势融合为一体成就了HTML5。将陈旧拖沓的标签出去，创新新的标签，引进新的功能，将网页
21、的浏览完善，减少插件的使用，多用浏览器的原生功能，如此用户体验则是更为完美快捷。尽管HTML5的部分功能或是标签并非所有浏览器所有操作系统都能实现，尽管对于新标准各个公司并没有那么热情，但是HTML5的优势在那里，其可移植性，适应性等等将会为我们网上生活带来更加精彩的一面。游戏作为现在生活中不可或缺的一部分，而且的种类也是非常多，而HTML5在游戏开发方面也有其特点，下一章则是从游戏方面体现HTML5的优势。第二章 基于HTML5的游戏第一节 准备工作一、什么游戏无论是基于HTML5游戏开发，或是Java还是C+等，在准备做之前，都会想到要做一个什么样的游戏。是一个人物众多，世界观完善的大型游
22、戏，还是一个类似推箱子一样的小游戏，对于游戏而言，其游戏规则则是十分重要的。无论什么游戏，只要游戏规则完善了，才能明确这是一个什么游戏，从而继续接下来的工作。二、绘制部件在游戏中，各种直接面向我们的，则是游戏中的元素，就推箱子而言，推箱子的背景，人物，箱子，都需要事先绘制，或是象棋游戏中棋盘或是棋子，无论是HTML5游戏或是.net游戏等都不能忽略。尽管矢量图不会失真，但是难以表现色彩层次丰富的逼真图像效果，体现游戏的精彩，位图为首选。在HTML5中，通过canvas API绘制图形是能精确至像素，再则因为游戏中各种游戏部件会出现层叠，PNG格式的图片能满足要求。PNG格式的图片能色彩绚丽，又
23、能保持背景透明。而基于HTML5的游戏开发中，对与游戏内容的操作也可以通过canvas部件来回图形，同时canvas也能将所需要处理对象的控制精确的像素。第二节 JavaScript、CSS特性一、JavaScriptJavaScript是一种直译式网络脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型6。在HTML5中，很多特殊功能需要JavaScript来完善，为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的，而生成js文件。JavaScript简单且能基于对象，或是自己创建对象。它本身是一种采用
24、事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。由此一来则可以通过JavaScript用鼠标进行事件触发来控制游戏部件，从而进行一些基础的游戏操作。JavaScript也不仅仅是有事件触发功能，在游戏中所需要的各种特殊功能，或是特定游戏规则，某种特定的效果，也或者是其他的需要完善的功能等，都可以通过JavaScript编程来完成。而因为JavaScript本身的组成部分B OM（浏览器对象模型，描述与浏览器进行交互的方法和接口）可以内置在网页内，也可以
25、写成单独的js文件利于网页结构和行为的分离使网页结构更加明确。二、CSSCSS即层叠样式表，是HTML5将网页布局调整功能集合为一个文件样式的计算机语言7。相较于以前的HTML版本来说的，CSS将网页中需要排版调整的对象集中在一起，更加方便，从宏观上讲能更加直观的调整整个布局，而从微观上讲CSS能将网页中的对象排版精确到像素。再有则是CSS支持更多的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS在调整布局方面的优势由此可见，CSS与JavaScript的一样可以分离于主代码，让主题代码显得更加直观，而CSS的单独布局则让
26、后期修改显得更加方便。也可以直接写入网页，或是直接嵌入到需要调整的对象中去。除了CSS对于布局的掌控能力，CSS也将传统的网页布局格式变得更加精简。CSS将大量的布局设置，字体样式、颜色、大小集合为一体，由于CSS文件可以让站内所有网页使用，代码的精简让网页重构难度降低，自然而然让网页的访问速度变得更加快速。也正是因为代码的精简，让网页中的主要内容变得更加突出，有利于搜索引擎的抓取。而这些优势在开发大型游戏时，尽管结构庞大而复杂，但是在全观范围内，修改布局则是变得更加方便，因为CSS的外联让网页浏览速度变得快速，由此一来，用户对于游戏的体验则是更加完美，快速。还有则是，CSS包括的几乎所有的字
27、体样式，和其初步的交互设计让用户能体验更加绚丽更加人性化操作的游戏内容。第三节 HTML5游戏在2014年，一款名为围住神经猫在朋友圈火了起来，除去游戏本身的趣味性，而该游戏的可移植性，让该游戏如此火速的传播。这款游戏是一款基于HTML5开发的游戏，游戏本身开发的过程花费时间不可谓不短，只仅仅一个半小时，这也从侧面体现HTML5的易掌握性。通过基于HTML5的小游戏与其他基于Flash的游戏而言，HTML5的游戏在不同平台的存活性很高，在功能相同的情况下不会像Flash一样占用更多内存，而HTML5在对操作对象上也能精确控制。在微信朋友圈人气火爆也体现了HTML5的游戏在公众服务平台的传播优势
28、，对于开发者来说，快速的开发过程给予了更多的纠错时间，其游戏本身的移植性在推广上汲取了更多的利益，而HTML5游戏无需下载直接可玩则是能让更多的用户尽快的体验游戏。尽管优势可人，但是，在浏览器上，HTML5的游戏还是不能避免自己代码的泄露8，也就是说HTML5的游戏很容易产生“山寨货”，各种平台上的移植性也容易携带病毒。第四节 本章小结在本章介绍了做HTML5游戏的基本思路和所需要的基本功能，和游戏开发所需要HTML5的部分技术支持9。相较于其他的游戏编程，HTML5游戏的功能性和主页面基本分开，能在很大程度上减少后期代码修改的麻烦。CSS文件统筹页面的布局风格修改，有利于游戏整体风格的把握，
29、在导入图片对象方面，基于HTML5的游戏对于浏览器的原植性，利于游戏的平台生存兼容和传播。更有JavaScript的功能性修改与调节，能将游戏本身的乐趣更大程度的表现出来，且JavaScript功能的完整性与HTML5的新标签与新功能的结合，将会为我们带来更好的游戏体验。HTML5的游戏除了围住神经猫之外，还有很多其他的游戏，像割绳子，全民寻找房祖名等等，在熟悉了HTML5之后，做好了开发游戏的准备，自己慢慢动手也能做出HTML5游戏。第三章 基于HTML5的象棋游戏开发第一节 中国象棋游戏一、中国象棋中国象棋游戏，众所周知，是汉族棋类益智游戏，在古代，象棋被列为士大夫们的修身之艺，现在则被视
30、为是怡神益智的一种有益身心的活动。象棋的棋盘绘制，在方形的平面上，有九条平行的竖线和十条平行的横线相交组成，共有九十个交叉点，棋子就摆在交叉点上。中间部分，也就是棋盘的第五，第六两横线之间末画竖线的空白地带称为“河界”。两端的中间，也就是两端第四条到第六条竖线之间的正方形部位，以斜交叉线构成“米”字方格的地方，叫作“九宫”（它恰好有九个交叉点），绘制如图3.1。而棋子分红黑两组，功32个，红黑双方各16个。红棋子：帅一个，车、红棋子：帅一个，车、马、炮、相、仕各两个，兵五个。黑棋子：将一个，车、马、炮、象、士各两个，卒五个。各个棋子的行走规则如下：帅（将），红方为“帅”，黑方为“将”。帅和将是
31、棋中的首脑，是双方竭力争夺的目标。它只能在九宫之内活动，可上可下，可左可右，每次走动只能按竖线或横线走动一格。帅与将不能在同一直线上直接对面，否则走方判负。仕（士），红方为仕，黑方为士。它也只能在九宫内走动。它的行棋路径只能是九宫内的斜线。士一次只能走一个斜格。象（相），红方为“相”，黑方为“象”。它的走法是每次循对角线走两格，俗称“象飞田”。相（象）的活动范围限于“河界”以内的本方阵地，不能过河，且如果它走的“田”字中央有一个棋子，就不能走，俗称“塞象眼”。车，车在象棋中威力最大，无论横线、竖线均可行走，只要无子阻拦，步数不受限制。俗称“车行直路”。因此，一车可以控制十七个点，故有“一车十子
32、寒”之称。炮，炮在不吃子的时候，走动与车完全相同，但炮在吃子时，必须跳过一个棋子，我方的和敌方的都可以，俗称“炮打隔子”、“翻山”。马，走动的方法是一直一斜，即先横着或直着走一格，然后再斜着走一个对角线，俗称“马走日”。马一次可走的选择点可以达到四周的八个点，故有“八面威风”之说。如果在要去的方向有别的棋子挡住，马就无法走过去，俗称“蹩马腿”。兵（卒），红方为“兵”，黑方为“卒”。兵（卒）只能向前走，不能后退，在未过河前，不能横走。过河以后可左、右移动，但也只能一次一步，即使这样，兵（卒）的威力也大大增强，故有“过河的卒子顶半个车”之说。 图3.1中国象棋棋盘二、 象棋规则1、行棋规则对局开始
33、前，双方棋子在棋盘上的摆法如图3.2。对局时，由执红棋的一方先走，双方轮流走一步，。轮到走棋的一方，将某个棋子从一个交点走到另一个交叉点，或者吃掉对方的棋子而占领其交叉点，都算走了着。双方各走一着，称为一个回合。走一着棋时，如果己方棋子能够走到的位置有对方棋子，则能吃掉对方的棋子，并占据该位置。一方的棋子攻击对方的帅（将），并在下一着要把它吃掉，称为“照将”，或简称“将”。“照将”不必声明。被“照将”的一方必须立即“应将”，即用自己的着法去化解被“将”的状态。如果被“照将”而无法“应将”，就算被“将死。图3.2 中国象棋棋子摆法2、 胜负规则赢：己方的帅（将）被对方棋子将死或吃掉。己方无子可走
34、（被困毙）。己方对对方“长将”或“长捉”己方发出认输请求；有步时要求的，己方走棋超出步时限制。有时间要求的，超过规定时间。违反比赛规则。出现下列情况之一，为和棋：双方均无可能取胜的简单局势。一方提议作和，另一方表示同意。双方走棋出现循环反复三次，符合“棋例”中“不变作和”的有关规定。符合自然限着的回合规定，即在连续60个回合中（也可根据比赛等级酌减），双方都没有吃过一个棋子。第二节 开发工具在接下来的过程中，绘制游戏部件必不可少，而图形处理工具多之又多，像Photoshop、coreldraw、illustrator等。但是，考虑到对游戏部件的控制，和canvas标签处理的像素图，Photos
35、hop是一个不错的工具。可以通过Photoshop处理背景图案的风格，单个棋子的处理。而Photoshop能将游戏部件的细节处理得很好。由于HTML5本身是一种超文本标记语言，在一定程度上，简单的HTML5代码可以由记事本编写，若是代码内容过多，加上记事本没有标签提示等功能则会过于繁杂。我选用了同是Adobe旗下的Dreamweaver。利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。在编写主页面时，可以通过“拆分”实现代码和页面内容的对改。第三节 象棋游戏部件的绘制将中国象棋做成网页游戏，其基本部件不可少，而其中需要绘制为图片的则有象棋游戏的背景即棋盘，和棋子，均为P
36、NG格式。我通过Photoshop绘制了游戏中所需要的部件10，尽管AI等其他软件也可绘制，但是HTML5的游戏以像素图为主，自此PNG格式的图片能输出透明的背景。其中各个部件如图所示，分别为棋盘(图3.3)，黑方如图3.4所示依次为：将、车、马、炮、仕、相、兵；红方如图3.5所示依次为：帅、车、马、炮、士、象、卒。 图3.3 棋盘 图3.4 黑方棋子 图3.5 红方棋子第四节 页面布局调整和信息定义在页面中，通过CSS整体布局，较为容易的将象棋游戏棋盘靠左，上边距设为，反馈的字体样式为，颜色，较于棋盘靠右。棋盘下方的按钮基于棋盘浮动，且居中，由此一来增加了画面美感，且删减按钮不会影响布局。在
37、主页面中，只需要将完整的JavaScript和CSS文件嵌入页面代码中，则可实现整个功能，且页面代码清晰明了。其中，#billList margin-top:20px定义了棋盘在页面中位置，.move_info float:left;margin-top:20px定义了AI着棋步法的反馈的布局等。在程序代码编写中，为使整个游戏的代码流畅易整理，我用AI.js定义了实现象棋游戏的电脑端棋手，bill.js定义了棋谱，play.js中规范了各种行棋规则，在common.js中，进行了图片载入，棋盘布置等等。其中还有关键元素的定义，如pace定义行棋步奏，map定义棋谱位置,mans定义棋子等。第五
38、节 本章小结本章节讲述了象棋游戏实现所需要的主要部件，象棋游戏的规则和部件绘制。例如单个棋子的走法，例如相走“田”，马走“日”等，例如吃子规则，赢棋规则等。主要运用的开发工具，还有整个程序中关键信息的定义介绍。第四章 功能性JavaScript和主页第一节 象棋AI要实现象棋游戏的人机对战，采用了AI算法11。AI是指人工智能，是对人的意识，信息，思维过程的模拟。游戏中的AI模拟会使玩家体验更真实的游戏体验。在此象棋游戏中，主要思路是，在游戏初始搜索历史表中的棋谱寻求走法，如没有棋谱，则在游戏中不断迭代搜索走法，将可以获胜的方式存入历史表。具体实现如下：人工智能初始化AI.init = fun
39、ction(pace)var bill = AI.historyBill | com.gambit;此中是开局库，在开始之前搜索棋谱（即后面的bill.js），通过for循环搜索棋谱（bill），通过JavaScript中的slice方法选取电脑端该行棋的步奏，通过push方法将行棋步奏加入棋谱。剪枝算法与迭代算法实现的搜索。如若棋谱库里没有，基于象棋行棋规则的人工智能开始运作，并统计搜索用时，向页面反馈统计。在每一步行棋中不断加深搜索着法，而在每次搜索的走法中，若是遇到己方将会被吃的情况下，便撤销这种走法，而这正是AlphaBeta剪枝算法，剪枝算法在节点遍历中，不必扩展无用节点，有利于节省
40、AI搜索用时12。在AI递归回根中，若是己方将被吃则非最佳着棋法，反之则是最佳着法，记入历史表.在不断循环中，剪枝算法为顺序算法，若没有最佳着法则会继续搜索，会花费不少时间，在此中运用了迭代算法。迭代算法相较于剪枝算法，能顺着剪枝算法的最佳着法继续搜索，提高了效率，且，迭代算法中能定时，在限定时间内能结束搜索13。在搜索结束后，通过push方法取得对手棋子位置，再获得搜索出来的着法通过push方法生成己方棋子坐标。如此一来，通过在行棋步奏中对着法利用value方法对着法进行评分，而在行棋过程中若是对方着法高于己方，则撤销己方着法，再搜索最佳着法，并将此着法返回历史表。 其中，通过定义的move
41、生成走法，moves中的值则是AlphaBeta返回。当然，在AI行棋的过程中同样需要调用paly脚本中的行棋规则。第二节 bill脚本在象棋AI中，需要在棋谱列表中搜索以寻找最佳着法,如果棋子步数为store中的数，则通过clearInterval停止通过setInterval调用函数获得着法，否则bill.timer = setInterval(bill.init(),300)在定时300毫秒中不断调用函数。利用JavaScript中的com组件调用数据从而通过bill.setBillList(com.arr2Clone(com.initMap)写入棋谱列表。其中写入获得行棋对象需要用到J
42、avaScript中document.createElement方法，而该方法的作用则是将对象写入新内容。在将着法写入棋谱列表时，将数组中的字符串通过split方法，将坐标字符串以空格为基准分割成为单独的坐标数字，然后写入棋谱列表。第三节 play脚本此脚本中主要体现了在游戏过程中的主要行棋方式规则和判断，体现了游戏的主要步奏和逻辑和一些细节处理。在脚本中定义了在屏幕上显示的主要变量和判断，像棋盘（map）、操作棋子（nowManKey）行棋步数（pace）、是否能行该步棋（isPlay）、是否先手（isOffensive）、吃子（pane.isShow）、犯规（isFoul）、悔棋（regr
43、et）等。定义了游戏初始，通过鼠标事件触发游戏开始。在定义完基本对象之后，要对网页内对象的控制必须通过鼠标点击完成交互，通过addEventListener方法实现在鼠标点击时触发棋盘内容。悔棋功能，则是通过初始化棋子再获得pace，获得点击着点坐标，通过pop方法将已走着法坐标删除，再通过parseInt返回值，将已有棋谱中的新坐标替换为以前的坐标，从而达到悔棋的功能。在通过鼠标点击时，获得点击点的坐标，在行棋过程中除了点击着点还有就是点击棋子了，在点击棋子的时候能有选中棋子和吃子两种情况，在选中棋子之后通过alpha方法来调整棋子的透明度以区别其选中与否，在此我选了0.6的值将棋子设置为6
44、0%的透明度，而吃子情况则是alpha=1（完全透明），在选中情况事件触发，则通过调用规则来确定下一步的行棋范围。这样一来，即是不清楚象棋的规则也能知道每个棋子的可能的落点。点击着点，吃子则是在棋子落能在该位置，且能吃掉该位置的棋子，再获得该位置的坐标，将该位置的块的alpha值设为1以隐藏该块，若是落点不符合行棋规则，则提示错误。再将棋子落于该坐标，象棋AI吃子方式的判断也一致。第四节 common脚本在此脚本中主要包括了每种类别的棋子的行棋规则，通过canvas对画布大小的定制，以及一些按钮选项等，通过window对象定义全局。通过stype定义了棋盘样式为宽325像素高402像素大小，以
45、及所用部件的图片。再通过loadImages来导入棋盘、棋子等图片。此中分别用j0,x0、x1,s0、s1，c0、c1,m0、m1,p0、p1,z0、z1、z2、z3、z4来代表红方的一个将、两个相、两个仕、两个车、两个马炮、五个兵。J0,X0、X1，S、S1，C0、C1，M0、M1，P0、P1，Z0、Z1、Z2、Z3、Z4代表黑方的一个帅、两个相、两个仕、两个车、两个马炮、五个卒。通过数组定义了初始时各个棋子的位置，如图4.1。 图4.1初始棋子分布表再有就是将所用到的方法和类进行调用，这样能将几个看似分看的脚本结合在一起以实现其全部功能。在鼠标点击页面按钮时，事件触发通过confirm弹出提示窗分别提示是否开始该难度的游戏（如图4.2所示）。图4.2 提示窗口在AI的搜索中，为了更好地体现其功能，在生成着法的时候，需要通过将棋谱具体定位，精确其坐标，判断棋子的走法“退”、“进”、“平”。AI中，体现AI智能程度的评分也依次对棋子的走法权重以体现每一步的价值。然后还需要将每种棋子的行棋规则，如车，根据其行棋规则，则是通过对棋盘上下左右四个方向分别检索，判断可以行棋的落点。以在棋盘中找到可行棋的位置并作出红点提示，炮亦是如此。而不同的棋子因本身行棋规则的不同，方式也不一样，如卒在纵坐标未过河的情况下则是只能将坐标
