html5 游戏 开发，也可以说是H5 游戏 ，是时下最火热的 游戏 类型之一。其简单快捷的开放方式深受开发者喜爱。
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。
对比与HTML4来说，H5的语法更加简单，新增了许多标签，拥有全新的表单，更加方便初学者上手。
对于题主所说的如何快速开发H5 游戏 ，如果是为了让阅历上多添加几个项目，可以选择去网络上搜索相应的教程学习，根据案例来编写，最后修改一部分参数和图片，如此重复修改，可以制作出简单的换皮 游戏 。
但是要制作剧情，操作，玩法等各种方面新颖的 游戏 ，还是需要慢慢的沉淀下来才行。
HTML5入门到精通可以分为3个阶段：了解HTML5、熟练掌握HTML5、精通HTML5；HTML5此处指的是HTML、CSS、JavaScript以及HTML5和CSS3（新增的）
首先了解HTML5
需要去了解HTML5是什么，HTML5能够做什么以及HTML5行业的状况，然后在已了解的基础上发掘自己是否喜欢HTML5这个职业，才去决定自己是否学习HTML5。
大概时间：2~3天
其次熟练掌握HTML5
先学习HTML与CSS
在一些机构培训当中，全日制，每天学8个小时，也需要学习1~1.5个月，而且学不完整不扎实
自学的情况下，折算相应时间即可，另外需要注意，自学时选择合适的书籍进行学习，会相对高效一些。
选择好的学习资源（主要看知识逻辑、表达方式等），才能够更好的去吸收知识，学习时间成本也会低一些。
资源推荐：
HTML+CSS方面的可以去看《HTML5布局之路》
JavaScript方面的可以去看《JavaScript权威指南》、《JavaScript高级程序设计》
此后是JavaScript，原生JS、AJAX、jQuery，差不多也得需要2~3个月（每天8小时）
至于说精通~~~对HTML5技术领域有深刻的研究与认知，能够根据自身的开发经验与项目经验构建自己的前端框架或者工具。最起码3~5年甚至更长，其前提还是不断深入研究，而非“工具式”的使用。
步骤1 创建空白的HTML 5模版首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
代码如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
复制代码
5）加上最后的标签，代码为：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：
[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif
font-size: 100%/* best for all browser using em */
padding:0
margin:0
}
*, html { line-height: 1.6em}
article img { width:automax-width:100%height:auto}
.sidebar a, article a, header a, footer a { color: #C30}
header a { text-decoration: none}
#wrapper {
font-size: 0.8em/* 13px from 100% global font-size */
max-width: 960px/* standard 1024px wide */
margin: 0 auto
}
/* css for */
header { padding: 1em 0margin: 0pxfloat: leftwidth: 100%
}
header hgroup { width: 100%font-weight:normal}
/* css for */
nav
{ display: blockmargin: 0 0 2empadding: 0px
float: leftwidth: 100%background-color: #181919
}
nav ul ul {display: none}
nav ul li:hover >ul {display: block}
nav
ul { padding: 0list-style: noneposition:
relativedisplay: inline-tablez-index: 9999
margin: 0pxfloat: leftwidth: 100%
}
nav ul:after {content: ""clear: bothdisplay: block}
nav ul li {float: left}
nav ul li:hover a {color: #fff}
nav
ul li a { display: blockpadding: 1emfont-size:
1.125emcolor: #ccctext-decoration: none
margin: 0pxbackground-color: #000border-right: 1px
solid #333
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important}
nav
ul ul { background: #5f6975border-radius: 0px
padding: 0position: absolutetop: 100%width:
autofloat: none
}
nav ul li:hover { background: #5f6975color: #FFF
}
nav ul ul li a:hover { background-color: #4b545f
}
nav ul ul li {
float: none
border-bottom: 1px solid #444240
position: relative
}
nav ul ul li a {
padding: 0.5em 1em
font-size: 1em
width:10em
color: #fff
}
nav ul ul ul {
position: absoluteleft: 100%top:0
}
/* css for */
section.content { width: 70%float:left}
.content article { width:100%float:leftpadding: 0 0 1emmargin: 0 0 1emborder-bottom: 1px solid #ddd}
article .entry { clear:bothpadding: 0 0 1em}
h1.post-title { font-size: 1.8emmargin:0padding:0}
.entry.post-meta { color: #888}
.entry.post-meta span { padding: 0 1em 0 0}
.entry.post-content { font-size: 1.125emmargin:0padding:0}
/* css for */
aside.sidebar { width: 25%float:right}
aside.sidebar ul { width:100%margin: 0pxpadding: 0pxfloat: leftlist-style: none
}
aside.sidebar
ul li { width:100%margin: 0px 0px 2empadding:
0pxfloat: leftlist-style: none
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2empadding: 0px
}
aside.sidebar
ul li ul li ul li { margin: 0pxpadding: 0px 0px 0px
1emwidth: 90%font-size: 0.9em
}
aside.sidebar
ul li h3.widget-title { width:100%margin: 0px
padding: 0pxfloat: leftfont-size: 1.45em
}
/* css for */
footer { width: 98%float:leftpadding: 1%background-color: whitemargin-top: 2em
}
footer .footer-left { width: 45%float:lefttext-align:left}
footer .footer-right { width: 45%float:righttext-align:right}
复制代码
步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：
0
复制代码
