基于HTML5的棋牌游戏毕业论文.doc

重庆邮电大学本科毕业设计（论文） 基于HTML5的棋牌游戏毕业论文目 录前 言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第五节 本章小结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、play脚本定义代码42 - 45 -前 言HTML5是HTML的第5次重大修改，在不断的改进中，于2014年10月29日定制完成，相比前几个版本的超文本标记语言，HTML5对我们来说无疑是全新的。HTML5的新增元素让她在网页的功能性上更加全面和完善。而正因为如此，HTML5在基于以前的超文本标记语言有何新颖之处，又会为网络世界带来何种改变，在文中，我用基于HTML5的象棋游戏有所阐述。在日新月异的科技生活中，无论是虚拟世界观的网络游戏，还是在现实生活中就地取材的意趣游戏，电脑游戏已然成为人们不可或缺的娱乐方式。而网络上的象棋游戏则是将生活中已有的娱乐方式展现到电脑上的其中之一。相交玩游戏的不同方式，网页游戏则是其中之一，而做网页游戏有用Flash，或是HTML4加XML等。基于HTML5的游戏相比之下则是更有优势，在全新的标准之下，能实现Flash的视觉效果，又不要Flash游戏所需要的大量内存，在功能性上更加全面，而不会想HTML4加XML游戏那般局限。尽管HTML5给我们带来的好处在我们浏览网页时似乎并没有很直观的感受，但是网页上更加绚丽的图片效果，一些网页细微的界面改变，一些潜在的功能变化，无疑是HTML5带来的好处。第一章 HTML5概述第1节 HTML5的发展历史一、HTML5的演变随着计算机行业的发展，各种计算机技术也是日新月异的变化着，人工智能技术，感知型无人机，新型机器人等等，在不断的革新。而作为万维网的核心语言，超文本标记语言（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年被WHATWG（Web Hypertext Application Technology Working Group）提出。于2006年WHATEG与W3C正式合作，在2007年被W3C接纳，并成立了新的HTML工作团队，而在双方经过8年来不懈努力，在2014年10月29日，HTML标准规范终于最终制定完成，并公开发布。2、 HTML5的革新相比HTML4而言，HTML5取消了等标签，相关功能融合在CSS中，利于整体处理。又结合了XHTML的header，aside，footer，dialog等标签3，让处理对象语义清晰，分布明确，而非全部使用div，这些更改赋予了网页更好意义和结构。新标准适用了一些全新的表单输入对象，使网页更容易管理，对搜索引擎更为友好。新增的视频标签音频标签则是将多媒体对象从object和嵌入式标签中解放出来，更为合理。而HTML5的新功能中，canvas对象，本地数据库，和API（Application Programming Interface,应用程序编程接口）更是让网页更加出彩，浏览器不需要依借Flash和Sliverlight则能直接显示图片和动画，能加速交互式搜索，缓存和索引，更能实现浏览器内的编辑和GUI（Graphical User Interface，称图形用户界面）功能4。第二节 HTML5的优势一、 HTML5的新标签上一节中列举的各种标签，丰富了HTML5的功能，如在旧的标准中，人们喜欢用来标记页眉区域，这样一来在大量的网页代码中，显得较为拖沓，而HTML5则是直接使用标签，减少了不必要的复杂度，化繁为简。在本节将详解几种新增的标签。1、和多媒体标签 （网站导航块）和（定义页脚）,这种标签有利于搜索引擎的索引整理，有利于SEO（Search Engine Optimization，搜索引擎优化），能更好的帮助小屏幕装置使用。除此之外还为浏览器提供了新的功能，如和标签分别定义定义视频和音频，如此一来，网页则是不需要Flash插件则能直接播放视频音频，但是，和标签只有部分高版本的浏览器支持。在多媒体方面的标签除了和之外还有定义多媒体资源和，为诸如 和 元素之类的媒介规定外部文本轨道即字幕或其他可显示文本，则是定义嵌入类容，如插件，再有则是和标签的存在，也让视频音频从标签中解放出来。2、标签标签定义图形，比如如表和其他图像。在网页中则是可以通过JavaScript在矩形画布中绘制路径、图形、文字以及添加图像。通过canvas API能处理PNG和JEPG类型的图形，而这两种类型的图形也体现了canvas的像素性。在HTML4中无法绘制的对角线能在canvas中实现，再有则是在video中抓取的帧能通过canvas显示出来，用户单击canvas则能播放该帧视频，由此一来，便是浏览器用原生功能实现了播放视屏插件的功能，如此一来我们便不再需要插件来播放视频，带来的好处则是避免了插件带来的广告和特殊环境下对插件的封锁。而从某种意义上讲，标签的出现让Flash逐渐退出舞台5。3、表单标签定义选项列表，规定用于表单的密钥对生成器字段定义不同类型的输出，比如脚本的输出。相交于输出，输入类型的元素也更多元化，如能允许本地日期、时间、数字、颜色等的选择。二、HTML5的新功能除去上节中讲到的新增标签，HTML5还有新增的功能让HTML5更有优势。本地数据库，这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。实现了脱机浏览Web应用程序的缓存，而应用程序缓存则是能让我们离线浏览，让已缓存资源加载的更快，不需要重复下载浏览过的资源，只下载更新或已更改资源，从而减少服务器的负载。HTML5支持内联SVG (Scalable Vector Graphics，指可伸缩矢量图形)，是相交canvas API绘制图形的另一种图形功能，而且是处理矢量图形。SVG图形有矢量图的特性，在放大缩小的情况下不会改变图片的质量且不会损失。且SVG图片可通过文本编辑器进行处理，可被搜索、索引、或压缩，可伸缩，能高质量打印。由此一来，便能实现图像搜索功能。除此之外还有地理定位，web worker ，HTML5服务器发送事件等功能。HTML5 Geolocation API 用于获得用户的地理位置，而因为保护隐私，该定位功能则是需要用户同意。web worker则是在后台运行的JavaScript，生成多个线程，保证页面及时响应，不会影响页面功能。而HTML5服务器发送事件功能则是能让网页自动获得服务器的更新，而不需要像以前一样时时询问服务器以求更新，如此一来我们便能直接看到已更新的微博、新闻等。第3节 本章小结 本章讲述了HTML5从HTML1.0版本到如今最新标准的历程，以及HTML5在相关方面的优势。而从中可见的是，HTML在多年来体现了其生存力，尽管在一段时期曾次于XML和XHTML，但正是这样将XML和XHTML等的优势融合为一体成就了HTML5。将陈旧拖沓的标签出去，创新新的标签，引进新的功能，将网页的浏览完善，减少插件的使用，多用浏览器的原生功能，如此用户体验则是更为完美快捷。尽管HTML5的部分功能或是标签并非所有浏览器所有操作系统都能实现，尽管对于新标准各个公司并没有那么热情，但是HTML5的优势在那里，其可移植性，适应性等等将会为我们网上生活带来更加精彩的一面。游戏作为现在生活中不可或缺的一部分，而且的种类也是非常多，而HTML5在游戏开发方面也有其特点，下一章则是从游戏方面体现HTML5的优势。第二章 基于HTML5的游戏第1节 准备工作一、什么游戏无论是基于HTML5游戏开发，或是Java还是C+等，在准备做之前，都会想到要做一个什么样的游戏。是一个人物众多，世界观完善的大型游戏，还是一个类似推箱子一样的小游戏，对于游戏而言，其游戏规则则是十分重要的。无论什么游戏，只要游戏规则完善了，才能明确这是一个什么游戏，从而继续接下来的工作。二、绘制部件在游戏中，各种直接面向我们的，则是游戏中的元素，就推箱子而言，推箱子的背景，人物，箱子，都需要事先绘制，或是象棋游戏中棋盘或是棋子，无论是HTML5游戏或是.net游戏等都不能忽略。尽管矢量图不会失真，但是难以表现色彩层次丰富的逼真图像效果，体现游戏的精彩，位图为首选。在HTML5中，通过canvas API绘制图形是能精确至像素，再则因为游戏中各种游戏部件会出现层叠，PNG格式的图片能满足要求。PNG格式的图片能色彩绚丽，又能保持背景透明。而基于HTML5的游戏开发中，对与游戏内容的操作也可以通过canvas部件来回图形，同时canvas也能将所需要处理对象的控制精确的像素。第二节 JavaScript、CSS特性一、JavaScriptJavaScript是一种直译式网络脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型6。在HTML5中，很多特殊功能需要JavaScript来完善，为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的，而生成js文件。JavaScript简单且能基于对象，或是自己创建对象。它本身是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。由此一来则可以通过JavaScript用鼠标进行事件触发来控制游戏部件，从而进行一些基础的游戏操作。JavaScript也不仅仅是有事件触发功能，在游戏中所需要的各种特殊功能，或是特定游戏规则，某种特定的效果，也或者是其他的需要完善的功能等，都可以通过JavaScript编程来完成。而因为JavaScript本身的组成部分B OM（浏览器对象模型，描述与浏览器进行交互的方法和接口）可以内置在网页内，也可以写成单独的js文件利于网页结构和行为的分离使网页结构更加明确。二、CSSCSS即层叠样式表，是HTML5将网页布局调整功能集合为一个文件样式的计算机语言7。相较于以前的HTML版本来说的，CSS将网页中需要排版调整的对象集中在一起，更加方便，从宏观上讲能更加直观的调整整个布局，而从微观上讲CSS能将网页中的对象排版精确到像素。再有则是CSS支持更多的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS在调整布局方面的优势由此可见，CSS与JavaScript的一样可以分离于主代码，让主题代码显得更加直观，而CSS的单独布局则让后期修改显得更加方便。也可以直接写入网页，或是直接嵌入到需要调整的对象中去。除了CSS对于布局的掌控能力，CSS也将传统的网页布局格式变得更加精简。CSS将大量的布局设置，字体样式、颜色、大小集合为一体，由于CSS文件可以让站内所有网页使用，代码的精简让网页重构难度降低，自然而然让网页的访问速度变得更加快速。也正是因为代码的精简，让网页中的主要内容变得更加突出，有利于搜索引擎的抓取。而这些优势在开发大型游戏时，尽管结构庞大而复杂，但是在全观范围内，修改布局则是变得更加方便，因为CSS的外联让网页浏览速度变得快速，由此一来，用户对于游戏的体验则是更加完美，快速。还有则是，CSS包括的几乎所有的字体样式，和其初步的交互设计让用户能体验更加绚丽更加人性化操作的游戏内容。第三节 HTML5游戏在2014年，一款名为围住神经猫在朋友圈火了起来，除去游戏本身的趣味性，而该游戏的可移植性，让该游戏如此火速的传播。这款游戏是一款基于HTML5开发的游戏，游戏本身开发的过程花费时间不可谓不短，只仅仅一个半小时，这也从侧面体现HTML5的易掌握性。通过基于HTML5的小游戏与其他基于Flash的游戏而言，HTML5的游戏在不同平台的存活性很高，在功能相同的情况下不会像Flash一样占用更多内存，而HTML5在对操作对象上也能精确控制。在微信朋友圈人气火爆也体现了HTML5的游戏在公众服务平台的传播优势，对于开发者来说，快速的开发过程给予了更多的纠错时间，其游戏本身的移植性在推广上汲取了更多的利益，而HTML5游戏无需下载直接可玩则是能让更多的用户尽快的体验游戏。尽管优势可人，但是，在浏览器上，HTML5的游戏还是不能避免自己代码的泄露8，也就是说HTML5的游戏很容易产生“山寨货”，各种平台上的移植性也容易携带病毒。第四节 本章小结在本章介绍了做HTML5游戏的基本思路和所需要的基本功能，和游戏开发所需要HTML5的部分技术支持9。相较于其他的游戏编程，HTML5游戏的功能性和主页面基本分开，能在很大程度上减少后期代码修改的麻烦。CSS文件统筹页面的布局风格修改，有利于游戏整体风格的把握，在导入图片对象方面，基于HTML5的游戏对于浏览器的原植性，利于游戏的平台生存兼容和传播。更有JavaScript的功能性修改与调节，能将游戏本身的乐趣更大程度的表现出来，且JavaScript功能的完整性与HTML5的新标签与新功能的结合，将会为我们带来更好的游戏体验。HTML5的游戏除了围住神经猫之外，还有很多其他的游戏，像割绳子，全民寻找房祖名等等，在熟悉了HTML5之后，做好了开发游戏的准备，自己慢慢动手也能做出HTML5游戏。第3章 基于HTML5的象棋游戏开发第一节 中国象棋游戏一、中国象棋中国象棋游戏，众所周知，是汉族棋类益智游戏，在古代，象棋被列为士大夫们的修身之艺，现在则被视为是怡神益智的一种有益身心的活动。象棋的棋盘绘制，在方形的平面上，有九条平行的竖线和十条平行的横线相交组成，共有九十个交叉点，棋子就摆在交叉点上。中间部分，也就是棋盘的第五，第六两横线之间末画竖线的空白地带称为“河界”。两端的中间，也就是两端第四条到第六条竖线之间的正方形部位，以斜交叉线构成“米”字方格的地方，叫作“九宫”（它恰好有九个交叉点），绘制如图3.1。而棋子分红黑两组，功32个，红黑双方各16个。红棋子：帅一个，车、红棋子：帅一个，车、马、炮、相、仕各两个，兵五个。黑棋子：将一个，车、马、炮、象、士各两个，卒五个。各个棋子的行走规则如下：帅（将），红方为“帅”，黑方为“将”。帅和将是棋中的首脑，是双方竭力争夺的目标。它只能在九宫之内活动，可上可下，可左可右，每次走动只能按竖线或横线走动一格。帅与将不能在同一直线上直接对面，否则走方判负。仕（士），红方为仕，黑方为士。它也只能在九宫内走动。它的行棋路径只能是九宫内的斜线。士一次只能走一个斜格。象（相），红方为“相”，黑方为“象”。它的走法是每次循对角线走两格，俗称“象飞田”。相（象）的活动范围限于“河界”以内的本方阵地，不能过河，且如果它走的“田”字中央有一个棋子，就不能走，俗称“塞象眼”。车，车在象棋中威力最大，无论横线、竖线均可行走，只要无子阻拦，步数不受限制。俗称“车行直路”。因此，一车可以控制十七个点，故有“一车十子寒”之称。炮，炮在不吃子的时候，走动与车完全相同，但炮在吃子时，必须跳过一个棋子，我方的和敌方的都可以，俗称“炮打隔子”、“翻山”。马，走动的方法是一直一斜，即先横着或直着走一格，然后再斜着走一个对角线，俗称“马走日”。马一次可走的选择点可以达到四周的八个点，故有“八面威风”之说。如果在要去的方向有别的棋子挡住，马就无法走过去，俗称“蹩马腿”。兵（卒），红方为“兵”，黑方为“卒”。兵（卒）只能向前走，不能后退，在未过河前，不能横走。过河以后可左、右移动，但也只能一次一步，即使这样，兵（卒）的威力也大大增强，故有“过河的卒子顶半个车”之说。 图3.1中国象棋棋盘2、 象棋规则1、行棋规则对局开始前，双方棋子在棋盘上的摆法如图3.2。对局时，由执红棋的一方先走，双方轮流走一步，。轮到走棋的一方，将某个棋子从一个交点走到另一个交叉点，或者吃掉对方的棋子而占领其交叉点，都算走了着。双方各走一着，称为一个回合。走一着棋时，如果己方棋子能够走到的位置有对方棋子，则能吃掉对方的棋子，并占据该位置。一方的棋子攻击对方的帅（将），并在下一着要把它吃掉，称为“照将”，或简称“将”。“照将”不必声明。被“照将”的一方必须立即“应将”，即用自己的着法去化解被“将”的状态。如果被“照将”而无法“应将”，就算被“将死。图3.2 中国象棋棋子摆法2、 胜负规则赢：己方的帅（将）被对方棋子将死或吃掉。己方无子可走（被困毙）。己方对对方“长将”或“长捉”己方发出认输请求；有步时要求的，己方走棋超出步时限制。有时间要求的，超过规定时间。违反比赛规则。出现下列情况之一，为和棋：双方均无可能取胜的简单局势。一方提议作和，另一方表示同意。双方走棋出现循环反复三次，符合“棋例”中“不变作和”的有关规定。符合自然限着的回合规定，即在连续60个回合中（也可根据比赛等级酌减），双方都没有吃过一个棋子。第2节 开发工具在接下来的过程中，绘制游戏部件必不可少，而图形处理工具多之又多，像Photoshop、coreldraw、illustrator等。但是，考虑到对游戏部件的控制，和canvas标签处理的像素图，Photoshop是一个不错的工具。可以通过Photoshop处理背景图案的风格，单个棋子的处理。而Photoshop能将游戏部件的细节处理得很好。由于HTML5本身是一种超文本标记语言，在一定程度上，简单的HTML5代码可以由记事本编写，若是代码内容过多，加上记事本没有标签提示等功能则会过于繁杂。我选用了同是Adobe旗下的Dreamweaver。利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。在编写主页面时，可以通过“拆分”实现代码和页面内容的对改。第3节 象棋游戏部件的绘制将中国象棋做成网页游戏，其基本部件不可少，而其中需要绘制为图片的则有象棋游戏的背景即棋盘，和棋子，均为PNG格式。我通过Photoshop绘制了游戏中所需要的部件10，尽管AI等其他软件也可绘制，但是HTML5的游戏以像素图为主，自此PNG格式的图片能输出透明的背景。其中各个部件如图所示，分别为棋盘(图3.3)，黑方如图3.4所示依次为：将、车、马、炮、仕、相、兵；红方如图3.5所示依次为：帅、车、马、炮、士、象、卒。 图3.3 棋盘 图3.4 黑方棋子 图3.5 红方棋子第4节 页面布局调整和信息定义在页面中，通过CSS整体布局，较为容易的将象棋游戏棋盘靠左，上边距设为，反馈的字体样式为，颜色，较于棋盘靠右。棋盘下方的按钮基于棋盘浮动，且居中，由此一来增加了画面美感，且删减按钮不会影响布局。在主页面中，只需要将完整的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定义棋子等。第五节 本章小结本章节讲述了象棋游戏实现所需要的主要部件，象棋游戏的规则和部件绘制。例如单个棋子的走法，例如相走“田”，马走“日”等，例如吃子规则，赢棋规则等。主要运用的开发工具，还有整个程序中关键信息的定义介绍。第4章 功能性JavaScript和主页第一节 象棋AI要实现象棋游戏的人机对战，采用了AI算法11。AI是指人工智能，是对人的意识，信息，思维过程的模拟。游戏中的AI模拟会使玩家体验更真实的游戏体验。在此象棋游戏中，主要思路是，在游戏初始搜索历史表中的棋谱寻求走法，如没有棋谱，则在游戏中不断迭代搜索走法，将可以获胜的方式存入历史表。具体实现如下：人工智能初始化AI.init = function(pace)var bill = AI.historyBill | com.gambit;此中是开局库，在开始之前搜索棋谱（即后面的bill.js），通过for循环搜索棋谱（bill），通过JavaScript中的slice方法选取电脑端该行棋的步奏，通过push方法将行棋步奏加入棋谱。剪枝算法与迭代算法实现的搜索。如若棋谱库里没有，基于象棋行棋规则的人工智能开始运作，并统计搜索用时，向页面反馈统计。在每一步行棋中不断加深搜索着法，而在每次搜索的走法中，若是遇到己方将会被吃的情况下，便撤销这种走法，而这正是AlphaBeta剪枝算法，剪枝算法在节点遍历中，不必扩展无用节点，有利于节省AI搜索用时12。在AI递归回根中，若是己方将被吃则非最佳着棋法，反之则是最佳着法，记入历史表.在不断循环中，剪枝算法为顺序算法，若没有最佳着法则会继续搜索，会花费不少时间，在此中运用了迭代算法。迭代算法相较于剪枝算法，能顺着剪枝算法的最佳着法继续搜索，提高了效率，且，迭代算法中能定时，在限定时间内能结束搜索13。在搜索结束后，通过push方法取得对手棋子位置，再获得搜索出来的着法通过push方法生成己方棋子坐标。如此一来，通过在行棋步奏中对着法利用value方法对着法进行评分，而在行棋过程中若是对方着法高于己方，则撤销己方着法，再搜索最佳着法，并将此着法返回历史表。 其中，通过定义的move生成走法，moves中的值则是AlphaBeta返回。当然，在AI行棋的过程中同样需要调用paly脚本中的行棋规则。第二节 bill脚本在象棋AI中，需要在棋谱列表中搜索以寻找最佳着法,如果棋子步数为store中的数，则通过clearInterval停止通过setInterval调用函数获得着法，否则bill.timer = setInterval(bill.init(),300)在定时300毫秒中不断调用函数。利用JavaScript中的com组件调用数据从而通过bill.setBillList(com.arr2Clone(com.initMap)写入棋谱列表。其中写入获得行棋对象需要用到JavaScript中document.createElement方法，而该方法的作用则是将对象写入新内容。在将着法写入棋谱列表时，将数组中的字符串通过split方法，将坐标字符串以空格为基准分割成为单独的坐标数字，然后写入棋谱列表。第三节 play脚本此脚本中主要体现了在游戏过程中的主要行棋方式规则和判断，体现了游戏的主要步奏和逻辑和一些细节处理。在脚本中定义了在屏幕上显示的主要变量和判断，像棋盘（map）、操作棋子（nowManKey）行棋步数（pace）、是否能行该步棋（isPlay）、是否先手（isOffensive）、吃子（pane.isShow）、犯规（isFoul）、悔棋（regret）等。定义了游戏初始，通过鼠标事件触发游戏开始。在定义完基本对象之后，要对网页内对象的控制必须通过鼠标点击完成交互，通过addEventListener方法实现在鼠标点击时触发棋盘内容。悔棋功能，则是通过初始化棋子再获得pace，获得点击着点坐标，通过pop方法将已走着法坐标删除，再通过parseInt返回值，将已有棋谱中的新坐标替换为以前的坐标，从而达到悔棋的功能。在通过鼠标点击时，获得点击点的坐标，在行棋过程中除了点击着点还有就是点击棋子了，在点击棋子的时候能有选中棋子和吃子两种情况，在选中棋子之后通过alpha方法来调整棋子的透明度以区别其选中与否，在此我选了0.6的值将棋子设置为60%的透明度，而吃子情况则是alpha=1（完全透明），在选中情况事件触发，则通过调用规则来确定下一步的行棋范围。这样一来，即是不清楚象棋的规则也能知道每个棋子的可能的落点。点击着点，吃子则是在棋子落能在该位置，且能吃掉该位置的棋子，再获得该位置的坐标，将该位置的块的alpha值设为1以隐藏该块，若是落点不符合行棋规则，则提示错误。再将棋子落于该坐标，象棋AI吃子方式的判断也一致。第四节 common脚本在此脚本中主要包括了每种类别的棋子的行棋规则，通过canvas对画布大小的定制，以及一些按钮选项等，通过window对象定义全局。通过stype定义了棋盘样式为宽325像素高402像素大小，以及所用部件的图片。再通过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智能程度的评分也依次对棋子的走法权重以体现每一步的价值。然后还需要将每种棋子的行棋规则，如车，根据其行棋规则，则是通过对棋盘上下左右四个方向分别检索，判断可以行棋的落点。以在棋盘中找到可行棋的位置并作出红点提示，炮亦是如此。而不同的棋子因本身行棋规则的不同，方式也不一样，如卒在纵坐标未过河的情况下则是只能将坐标点纵移，而仕则是需要通过坐标点的判断来确定行棋位置。第五节 页面生成在所有的主要功能都能实现的情况，生成游戏页面，在主页中如图4.3中所示，有标签添加必要的按钮，在页面中效果如图4.4所示。其中因为HTML5的新标签在地版本的浏览器中无法实现其功能，则直接提示错误。由于JavaScript实现的功能，将主页面的代码精简得很直观，有利于在试错过程中进行修改。当然，JavaScript也必须导入到页面，方式如图4.4。图4.3 按钮代码图4.4 按钮 图4.4导入脚本 第六节 本章小结在本章具体的实现了基于HTML5的象棋游戏，通过基于象棋规则AI实现了人机对战，辅以随机数来达到AI的随机性，再加上各种脚本的补充，让实物象棋跃然与网页14。在实现过程中，将整体象棋游戏的主要划分成几个区块，更方便我们实现其功能。利用bill.js完成象棋游戏对于AI中需要的棋谱的调用，利用play.js实现对于行棋规则的完善，通过common.js的整体掌控，将象棋游戏的行棋规则，开始布局，以及吃子与否棋子的显示，每步棋所行位置的评分定义等等。第5章 测试第一节 测试的目的和意义软件测试是为了发现程序中可能存在的错误而执行程序的过程，它是高可靠性、高质量软件的重要保证。相较于其他软件的测试，其实软件和游戏的测试的作用都是一样的，就此次的游戏开发而言，只有在不断的测试中，尽早的将存在的问题暴露出来，才有利于游戏功能的改进，有利于高效高质量的完成游戏开发。第二节 测试内容一、界面测试基于HTML5的游戏的布局结构和文字排版用层叠样式表编辑调节，在文字结构的统一上，我将其集中在zzsc.css文件中。如果通过层叠样式表调节布局，则会如图5.1所示，未优化后的结果则如图5.2所示。在没有优化的情况下，游戏内容，如棋盘排放位置，和文字输出的位置会按照标签的顺序输出。但是为了更好地游戏体验，利用CSS文件将游戏部件的棋盘居中，文字输出内容倚棋盘位置靠右。图5.1 已优化布局图5.2 未优化布局二、按钮测试 游戏界面有三个难度按钮，和一个悔棋按钮，选择“新手水平”情况如图5.3所示，按钮情况正常。再经过测试后，各个按钮的情况都能正常运作。图5.3 按钮情况三、功能测试 在选择了“初级水平”后，能正常开始游戏，在选中棋子时，棋子为60%透明，并有该棋子可行位置的提示，如图5.4所示。在己方行棋之后，游戏AI能正常行棋，并能返回正确的搜索结果，具体如图5.5所示。图5.4 行棋提示图5.5 AI运行情况第三节 本章小结 本章主要是对象棋游戏进行了测试，而再经过了不断调试之后，基于HTML5的象棋游戏各种功能均能正常运行。结 论超文本标记语言在历经几个版本之后迎来的HTML5,如今也没有辜负大家的期望。HTML5在对于网页中对象的操纵是越来越细致化，而网页中所呈现的内容也越来越多元化，越来越多彩化。基于HTML5开发的游戏也是鳞次栉比，尽管以小游戏居多，但是因为HTML5语言本身的易读性让大家在开发游戏的过程中更为容易。通过基于HTML5的象棋游戏开发，基本上体现了HTML5游戏的开发过程，最后也已经实现了象棋游戏所需要的基本功能。HTML5的游戏开发过程较为简单，只要写好游戏策略和游戏部件绘制，开发游戏是很方便的，而所花时间也和开发游戏的策略难易程度相关。HTML5作为最新的web语言标准，此次开发中，游戏功能在逐渐的优化的过程中，由于将功能不同的脚本和CSS文件与主业代码分离，对于后期修改整理有着极大方便。尽管所有功能并不是每个版本的浏览器都能兼容，但是对于canvas标签来说，只要高于IE5则不会报错，如今来说，基本适用大多数的电脑用户。相较于其他类型的网页游戏，对于大型的网页游戏来说，HTML5的优势也是十分突出的。Canvas控制游戏部件精确到像素，播放游戏视频货图片文件时无需外用插件，对于游戏来说，网页的反应快速，页面效果绚丽等这些都是十分重要的因素，再加上HTML5的可移植性，让游戏没有限制，而对于页游来说，HTML5让游戏更加轻便。致 谢从最开始选题，到如今毕业设计的完成，整个过程中我学到了很多东西，也磨砺了我的耐心，锻炼了自己的逻辑能力和理解能力。而能有这些巨大的收获，主要还是要感谢*教授在这期间对我的指导和帮助。在我对题目的把握出现问题的时候，细心为我讲解，在完成论文期间，也帮助我规避了很多问题。在整个毕业设计的过程中，感谢*师兄对我关键问题指导，让我在遇到关键难点是豁然开朗。在做游戏时，也是师兄的帮助让我对HTML5的把握更加熟练。也要感谢*同学的帮助，在完成论文期间，和我讨论，给了我很多重要的意见。参考文献1 明日科技HTML5从入门到精通M北京：清华大学出版社，20122 Peter Lubbers,Brain Albers,Frank Salim.HTML5程序设计（第二版）M.柳靖，李杰刘淼.北京：人民邮电出版社3 刘华新，杨庚.HTML5下一代Web开发标准研究J.计算机发展与技术，2011（08）4 Jeanie Meyer.HTML5游戏开发M.徐阳荆涛等北京：人民电出版社，20115 黄荣梅，田红梅.利用JavaScript制作网页特效的方法J.四川职业技术学院报.2011（1）6 凌诗佳，蓝伴儒.浅析HTML与CSS的功能、区别与联系.信息系统工程.2011（08）7 Williams,J.L著.HTML5游戏开发实践指南M.黄敏.北京：机械工业出版社，20128 白培发，王千阳.HTML5游戏开发技巧J.电脑编程技巧与维护，2012（20）9 曹凯，潘海参.Photoshop CS6从入门到精通M.北京：中国青年出版社，201210 象棋百科全书网.对弈程序基本技术专题.EB/OL.2005.9. /computer/outline.htm11 黎志雄，黄彦湘，陈学中.基于HTML5游戏开发的研究与实现J.东莞理工学院报，2014（05）12 申龙斌.AlphaBeta剪枝算法.EB/OL.2012.9.20. /u/speeding/13 藏峰者.迭代加深搜索.EB/OL.2014.7.31.http:/ /zhineng/3013.html14 刘再民.国产游戏路在何方J.互联网周刊，2012（12）15 Harris，Andy.HTML5 AND CSS3 All-in-one For DummiesM.For Dummies.2014附 录1、 英文原文：HTML5 AND CSS3 All-in-one For Dummies【15】 By: Andy Harries Source: HTML5 AND CSS3 All-in-one For DummiesM.John Wiley & Sons, Inc.Heres the great news: The most important web technology you need is alsothe easiest. You dont need any expensive or complicated software, and youdont need a powerful computer. You probably have everything you need toget started already.No more talking! Fire up a computer and build a web page!1. Open a text editor.You can use any text editor you want, as long as it lets you save filesas plain text. If youre using Windows, Notepad is fine for now. If youreusing Mac, youll really need to download a text editor. I like Komodo Edit (/komodo-edit) or Text Wrangler(/products/textwrangler/). Its possible to make TextEdit work correctly, but its probably easier to just download something made for the job.I explain text editors more completely in Chapter 3 of this mini-book.Dont use a word processor like Microsoft Word or Mac TextEdit. These are powerful tools, but they dont save things in the right format. The way these tools do things like centering text and changing fonts wont work on the web. I promise that youll figure out how to do all that stuff soon, but a word processing program wont do it correctly. Even the Save as HTML feature doesnt work right. You really need a very simple text editor, and thats it. In Chapter 3 of this minibook, I show you a few more editors that make your life easier. You should not use Word or TextEdit.2. Type the following code.Really. Type it in your text editor so you get some experience writing theactual code. I explain very soon what all this means, but type it now toget a feel for it:My very first web page!This is my first web page!This is the first web page Ive ever made,and Im extremely proud of it.It is so cool!3. Save the file as my First.html.Its important that your filename has no spaces and ends with the .html extension. Spaces cause problems on the Internet (which is, of course,where all good pages go to live), and the .html extension is how most computers know that this file is an HTML file (which is another name for a web page). It doesnt matter where you save the file, as long as you can find it in the next step.4.