html5canvas的棍子关游戏的设计与开发(附件)
摘 要HTML5作为下一代Web标准,功能不断完善和稳定，并具有许多新的特点。介绍了画布标签，使HTML5能够动态生成各种图形、图形和动画，具备游戏开发条件。首先突破传统，HTML5不用别的插件，简单高效。对于网页游戏开发来说更适合使用。本文结合HTML5的从古到今的发展路程以及未来发展的蓝图上进行了深刻又认真地钻研，最终叙述了这款小游戏开发的研究意义。然后，对于新兴的HTML5的特性和功能而言，我与同学和老师进行了全面的详细分析讨论，结合所学的理论知识的基础上，还分析了此款游戏的可行性和作为整体框架的设计构想和流程。最后，根据设计方案，经过一个棒子关小游戏开发，并在各种浏览器中进行测试并得出结论。本应用最终在Web平台上实现，经测试，该游戏应用具有跨平台、简洁、美观、高效、用户体验好的特征，它的开发和实现，在理论上，是对HTML5新技术的一次研究和学习，在实践中，该游戏是利用新技术进行Web应用开发的一次尝试，并且对Web游戏的开发具有很好的推广意义。
Key words: HTML5; Game development; Canvas; Web game 目 录
1 绪论 1
1.1 课题研究背景 1
1.2 发展趋势和研究现状 2
1.2.1 HTML5的发展现状和趋势 2
1.2.2 基于HTML5的网页小游戏的现状与趋势 2
1.3 论文研究意义 3
2 HTML5技术的研究 4
2.1 HTML5技术简介 4
2.2 HTML5技术体系构成 4
2.2.1 HTML5规范 4
2.2.2 HXML介绍 5
2.3 HTML5最新功能和特性的研究 5
2.3.1 canvas画布功能 6
2.3.2 音频和视频 7
2.3.3 Web Storage 7
2.3.4 Web Socket 7
2.3.5 HTML5的其他新特性 8
3 需求分析 9
3.1 需求分析 9
3.2 系统流程图 9
3.3 功能分析 10
4 游戏设计 11 *好棒文|www.hbsrm.com +Q: ^351916072^
4.1 游戏逻辑设计 11
4.2 游戏流程 11
4.3 关卡设计 12
4.4 游戏优化 13
5 游戏实现 14
5.1 圆角功能 14
5.2 平缓过渡效果的CSS代码 14
5.3 JavaScript优化游戏开始界面 15
5.4 画布上坐标的获取 15
6 游戏测试 17
总 结 18
参考文献 19
致 谢 23
1 绪论
1.1 课题研究背景
这些年计算机技术和互联网技术不断发展，随之而来的构建HTML网页内容和显示超文本标记语言的核心技术也在改进和扩展,才能满足开发人员和用户的需求。
Tim Berners Lee最初创建HTML，主要是分享转载来自世界各地的物理学家发表的文字内容，用来促进他们之间的合作。1993年 HTML首次发布到Internet草案的形式。到了的1999年，HTML4.01版本，HTML逐渐发展起来，从今天开始只有几个标记如此丰富的展现形式。
早期HTML经历了高速发展,但是在此之后的好长时间内,HTML的发展来到了瓶颈期.好多人都以为他要走到终点了,就暂时把对它的支持放到次要位置然而，随着HTML建设的庞大数量的网站或大多数，完全取代了XML是一件非常困难的事情。为了支持新的Web应用程序，而且还可以克服了HTML的不足，增加新功能的迫切需要，树立了新的标准，而HTML5的诞生，W3C和WHATWG（标记Web超文本应用技术的研究和开发工作组）正式启用新的网络平台。
面对HTML和XML带来的网页元素混乱和繁琐的局面，HTML5旨矗立一套尽可能简单、避免不必要复杂性，并且能够开发丰富、高效、跨平台应用的标准。HTML5的研究人员花了很多精力来实现这样一个精确，简单的设计。例如，谷歌分析了上百万页，分析了一般ID标签的名字，名字“head”div有很多重复，于是，HTML5便直接添加一个新标签来解决这种重复性的问题。在内容和思想的分离性能，HTML5还具有优良的设计，这就消除了属性数可以修改CSS，从而最大限度地实现网页内容和风格的显示相分离，解决了页面本身的臃肿和缓慢的加载问题。
但是HTML5是一次史无前例的巨大的改革,业内影响极大.它的许多功能都是无法替代和为完全标准化的发展，提供了一个强大的工具，无插件的Web应用程序和平台。此外，如智能手机这样的移动设备创造了宝贵的资源消耗也是体现了HTML5的许多特性.
从Web开发者的角度来看，HTML5不仅简化了复杂度的开发，提高了开发效率，而且还可以构造功能更复杂的Web应用程序，表现形式更加丰富。从用户角度看，HTML5技术以一切从简为设计理念，提高了网页的运行速度和效率，并且更绚丽的外观效果，也能让用户有眼前一亮的体验。基于以上两方面，HTML5规范的开发和研究，将进一步促进和改进HTML5，它将成为Web领域的一个标准趋势。HTML5就像一个孩子，我看着他从最初的懵懂到逐渐成熟的过程，我对他有信心，他一定可以一路过五关斩六将。最终更好服务大众。
1.2 发展趋势和研究现状
1.2.1 HTML5的发展现状和趋势
2008年1月22日，消息公布后的第一个HTML5草案，HTML5有望成为下一代Web标准，在这种情况下，业内行业开始关注HTML5的发展前景，几家主要的浏览器厂商也开始争相对HTML5的新特性和新添加的功能予以大力支持。
从国内情况看，从2010年以至于之后两年间,国内浏览器对HTML5的支持鼓励都不断提速上升。据《报告》统计显示，2010，国内HTML5浏览器支持量仅为2%，但截至九月底2012，国内支持HTML5浏览器已经达到33%。并根据报告预测：“2013 HTML5是通用年，更多国内浏览器将支持HTML5。
从国际的情况来看，主流的浏览器厂商，如chrome, firefox, opera. safari等更是不断地进行升级来支持HTML5的新功能。而在这些浏览器厂商的推广下，HTML5规范已经不断完善，在Web平台上更好更快地进进了实质性的改进。也通过各种测试准确地比较所有主要的浏览器和不同时期的具体支持HTML5的浏览器，HTML5Test网站浏览器的HTML5支持等级。
而从面对分数变化,各大浏览器一直在不断跟随HTML5的变化而升级，对HTML5给与支持与信任，所以在不久的将来，HTML5成为一种趋势和一个推荐标准将指日可待。我相信这必将成为一种新的潮流.
1.2.2 基于HTML5的网页小游戏的现状与趋势
HTML5的出现，给网页游戏带来了一场新的革新。由十HTML5支持画布、音频、视频等功能，意味着，网页游戏可以不依赖flash等第三方插件，达到丰富绚丽的动画效果。
Key words: HTML5; Game development; Canvas; Web game 目 录
1 绪论 1
1.1 课题研究背景 1
1.2 发展趋势和研究现状 2
1.2.1 HTML5的发展现状和趋势 2
1.2.2 基于HTML5的网页小游戏的现状与趋势 2
1.3 论文研究意义 3
2 HTML5技术的研究 4
2.1 HTML5技术简介 4
2.2 HTML5技术体系构成 4
2.2.1 HTML5规范 4
2.2.2 HXML介绍 5
2.3 HTML5最新功能和特性的研究 5
2.3.1 canvas画布功能 6
2.3.2 音频和视频 7
2.3.3 Web Storage 7
2.3.4 Web Socket 7
2.3.5 HTML5的其他新特性 8
3 需求分析 9
3.1 需求分析 9
3.2 系统流程图 9
3.3 功能分析 10
4 游戏设计 11 *好棒文|www.hbsrm.com +Q: ^351916072^
4.1 游戏逻辑设计 11
4.2 游戏流程 11
4.3 关卡设计 12
4.4 游戏优化 13
5 游戏实现 14
5.1 圆角功能 14
5.2 平缓过渡效果的CSS代码 14
5.3 JavaScript优化游戏开始界面 15
5.4 画布上坐标的获取 15
6 游戏测试 17
总 结 18
参考文献 19
致 谢 23
1 绪论
1.1 课题研究背景
这些年计算机技术和互联网技术不断发展，随之而来的构建HTML网页内容和显示超文本标记语言的核心技术也在改进和扩展,才能满足开发人员和用户的需求。
Tim Berners Lee最初创建HTML，主要是分享转载来自世界各地的物理学家发表的文字内容，用来促进他们之间的合作。1993年 HTML首次发布到Internet草案的形式。到了的1999年，HTML4.01版本，HTML逐渐发展起来，从今天开始只有几个标记如此丰富的展现形式。
早期HTML经历了高速发展,但是在此之后的好长时间内,HTML的发展来到了瓶颈期.好多人都以为他要走到终点了,就暂时把对它的支持放到次要位置然而，随着HTML建设的庞大数量的网站或大多数，完全取代了XML是一件非常困难的事情。为了支持新的Web应用程序，而且还可以克服了HTML的不足，增加新功能的迫切需要，树立了新的标准，而HTML5的诞生，W3C和WHATWG（标记Web超文本应用技术的研究和开发工作组）正式启用新的网络平台。
面对HTML和XML带来的网页元素混乱和繁琐的局面，HTML5旨矗立一套尽可能简单、避免不必要复杂性，并且能够开发丰富、高效、跨平台应用的标准。HTML5的研究人员花了很多精力来实现这样一个精确，简单的设计。例如，谷歌分析了上百万页，分析了一般ID标签的名字，名字“head”div有很多重复，于是，HTML5便直接添加一个新标签来解决这种重复性的问题。在内容和思想的分离性能，HTML5还具有优良的设计，这就消除了属性数可以修改CSS，从而最大限度地实现网页内容和风格的显示相分离，解决了页面本身的臃肿和缓慢的加载问题。
但是HTML5是一次史无前例的巨大的改革,业内影响极大.它的许多功能都是无法替代和为完全标准化的发展，提供了一个强大的工具，无插件的Web应用程序和平台。此外，如智能手机这样的移动设备创造了宝贵的资源消耗也是体现了HTML5的许多特性.
从Web开发者的角度来看，HTML5不仅简化了复杂度的开发，提高了开发效率，而且还可以构造功能更复杂的Web应用程序，表现形式更加丰富。从用户角度看，HTML5技术以一切从简为设计理念，提高了网页的运行速度和效率，并且更绚丽的外观效果，也能让用户有眼前一亮的体验。基于以上两方面，HTML5规范的开发和研究，将进一步促进和改进HTML5，它将成为Web领域的一个标准趋势。HTML5就像一个孩子，我看着他从最初的懵懂到逐渐成熟的过程，我对他有信心，他一定可以一路过五关斩六将。最终更好服务大众。
1.2 发展趋势和研究现状
1.2.1 HTML5的发展现状和趋势
2008年1月22日，消息公布后的第一个HTML5草案，HTML5有望成为下一代Web标准，在这种情况下，业内行业开始关注HTML5的发展前景，几家主要的浏览器厂商也开始争相对HTML5的新特性和新添加的功能予以大力支持。
从国内情况看，从2010年以至于之后两年间,国内浏览器对HTML5的支持鼓励都不断提速上升。据《报告》统计显示，2010，国内HTML5浏览器支持量仅为2%，但截至九月底2012，国内支持HTML5浏览器已经达到33%。并根据报告预测：“2013 HTML5是通用年，更多国内浏览器将支持HTML5。
从国际的情况来看，主流的浏览器厂商，如chrome, firefox, opera. safari等更是不断地进行升级来支持HTML5的新功能。而在这些浏览器厂商的推广下，HTML5规范已经不断完善，在Web平台上更好更快地进进了实质性的改进。也通过各种测试准确地比较所有主要的浏览器和不同时期的具体支持HTML5的浏览器，HTML5Test网站浏览器的HTML5支持等级。
而从面对分数变化,各大浏览器一直在不断跟随HTML5的变化而升级，对HTML5给与支持与信任，所以在不久的将来，HTML5成为一种趋势和一个推荐标准将指日可待。我相信这必将成为一种新的潮流.
1.2.2 基于HTML5的网页小游戏的现状与趋势
HTML5的出现，给网页游戏带来了一场新的革新。由十HTML5支持画布、音频、视频等功能，意味着，网页游戏可以不依赖flash等第三方插件，达到丰富绚丽的动画效果。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/628.html
