基于HTML5的游戏相比之下则是更有优势，在全新的标准之下，能实现Flash的视觉效果，又不要Flash游戏所需要的大量存，在功能性上更加全面，而不会想HTML4加XML游戏那般局限。
尽管HTML5给我们带来的好处在我们浏览网页时似乎并没有很直观的感受，但是网页上更加绚丽的图片效果，一些网页细微的界面改变，一些潜在的功能变化，无疑是HTML5带来的好处。
最初的超文本标记语言与1993年首次以英特网草案的形式发布出来，在20世纪90年代中，HTML经过了大幅发展，从HTML2.0版到3.2版和4.0版，直至1999年的4.01版后，在业界普遍认知中，HTML的发展已穷途末路[2]。
在Web标准的焦点转移到XML（可扩展标记语言）和XHTML（可扩展超文本标记语言）上时，HTML5草案前身名为WebApplications1.0，于2004年被WHATWG（WebHypertextApplicationTechnologyWorkingGroup）提出。
于2006年WHATEG与W3C正式合作，在2007年被W3C接纳，并成立了新的HTML工作团队，而在双方经过8年来不懈努力，在2014年10月29日，HTML标准规终于最终制定完成，并公开发布。
等标签，相关功能融合在CSS中，利于整体处理。又结合了XHTML的header，aside，footer，dialog等标签[3]，让处理对象语义清晰，分布明确，而非全部使用div，这些更改赋予了网页更好意义和结构。
新标准适用了一些全新的表单输入对象，使网页更容易管理，对搜索引擎更为友好。
新增的视频标签音频标签则是将多媒体对象从object和嵌入式标签中解放出来，更为合理。
而HTML5的新功能中，canvas对象，本地数据库，和API（ApplicationProgrammingInterface,应用程序编程接口）更是让网页更加出彩，浏览器不需要依借Flash和Sliverlight则能直接显示图片和动画，能加速交互式搜索，缓存和索引，更能实现浏览器的编辑和GUI（GraphicalUserInterface，称图形用户界面）功能[4]。
第二节HTML5的优势
一、HTML5的新标签
上一节中列举的各种标签，丰富了HTML5的功能，如在旧的标准中，人们喜欢用来标记页眉区域，这样一来在大量的网页代码中，显得较为拖沓，而HTML5则是直接使用
在本节将详解几种新增的标签。
1、
除此之外还为浏览器提供了新的功能，如
在多媒体方面的标签除了
2、
在网页中则是可以通过JavaScript在矩形画布中绘制路径、图形、文字以及添加图像。
通过canvasAPI能处理PNG和JEPG类型的图形，而这两种类型的图形也体现了canvas的像素性。
在HTML4中无法绘制的对角线能在canvas中实现，再有则是在video中抓取的帧能通过canvas显示出来，用户单击canvas则能播放该帧视频，由此一来，便是浏览器用原生功能实现了播放视屏插件的功能，如此一来我们便不再需要插件来播放视频，带来的好处则是避免了插件带来的广告和特殊环境下对插件的封锁。
而从某种意义上讲，
3、表单标签
相交于输出，输入类型的元素也更多元化，如能允许本地日期、时间、数字、颜色等的选择。
二、HTML5的新功能
除去上节中讲到的新增标签，HTML5还有新增的功能让HTML5更有优势。
本地数据库，这个功能将嵌一个本地的SQL数据库，以加速交互式搜索，缓存以及索引功能。
实现了脱机浏览Web应用程序的缓存，而应用程序缓存则是能让我们离线浏览，让已缓存资源加载的更快，不需要重复下载浏览过的资源，只下载更新或已更改资源，从而减少服务器的负载。
HTML5支持联SVG（ScalableVectorGraphics，指可伸缩矢量图形），是相交canvasAPI绘制图形的另一种图形功能，而且是处理矢量图形。
SVG图形有矢量图的特性，在放大缩小的情况下不会改变图片的质量且不会损失。
且SVG图片可通过文本编辑器进行处理，可被搜索、索引、或压缩，可伸缩，能高质量打印。
由此一来，便能实现图像搜索功能。
除此之外还有地理定位，webworker，HTML5服务器发送事件等功能。
HTML5GeolocationAPI用于获得用户的地理位置，而因为保护隐私，该定位功能则是需要用户同意。
webworker则是在后台运行的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中，通过canvasAPI绘制图形是能精确至像素，再则因为游戏中各种游戏部件会出现层叠，PNG格式的图片能满足要求。
PNG格式的图片能色彩绚丽，又能保持背景透明。
而基于HTML5的游戏开发中，对与游戏容的操作也可以通过canvas部件来回图形，同时canvas也能将所需要处理对象的控制精确的像素。
第二节JavaScript、CSS特性
一、JavaScript
JavaScript是一种直译式网络脚本语言，是一种动态类型、弱类型、基于原型的语言，置支持类型[6]。
在HTML5中，很多特殊功能需要JavaScript来完善，为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的，而生成js文件。
JavaScript简单且能基于对象，或是自己创建对象。
它本身是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
由此一来则可以通过JavaScript用鼠标进行事件触发来控制游戏部件，从而进行一些基础的游戏操作。
JavaScript也不仅仅是有事件触发功能，在游戏中所需要的各种特殊功能，或是特定游戏规则，某种特定的效果，也或者是其他的需要完善的功能等，都可以通过JavaScript编程来完成。
而因为JavaScript本身的组成部分BOM（浏览器对象模型，描述与浏览器进行交互的方法和接口）可以置在网页，也可以写成单独的js文件利于网页结构和行为的分离使网页结构更加明确。
二、CSS
CSS即层叠样式表，是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）{varbill=AI.historyBill||.gambit;此中是开局库，在开始之前搜索棋谱（即后面的bill.js），通过for循环搜索棋谱（bill），通过JavaScript中的slice方法选取电脑端该行棋的步奏，通过push方法将行棋步奏加入棋谱。
剪枝算法与迭代算法实现的搜索。
如若棋谱库里没有，基于象棋行棋规则的人工智能开始运作，并统计搜索用时，向页面反馈统计。
在每一步行棋中不断加深搜索着法，而在每次搜索的走法中，若是遇到己方将会被吃的情况下，便撤销这种走法，而这正是Alpha
升级会员 