HTML5课程设计.docx

HTML5课程设计.docx

《HTML5课程设计.docx》由会员分享，可在线阅读，更多相关《HTML5课程设计.docx（15页珍藏版）》请在冰豆网上搜索。

HTML5课程设计论文

HTML5课程设计

题 目：

基于html5和Javascript的别踩白块儿游戏

学 院：

信息工程学院

专 业：

软件工程（服务外包）

姓 名：

刘洪宝

指导教师：

田更

2015年 6月 15日

4

摘 要

通过一个学期的HTML5选修课程的学习,对HTML5的开发与设计有了初步的了解,希望通过这篇论文,以开发《别踩白块儿》这款小游戏为例，对本学期所学习的知识进行总结。

本文从《别踩白块儿》的设计原理以及各个模块的实现等方面对该游戏进行详细的介绍。

目录

1绪论 5

1.1开发背景 5

1.2开发内容 5

2游戏开发相关技术 6

2.1开发工具介绍 6

2.2开发技术运用介绍 6

2.2.1HTML5介绍 6

2.2.2JavaScript介绍 7

3游戏设计 8

3.1游戏总体流程图 8

3.2游戏的详细设计 9

3.2.1页面搭建代码 9

3.2.2黑白块随机模块 10

3.2.3黑白方块运动模块 11

3.2.4计分模块 12

3.2.5犯规处理模块 12

3.2.6加速模块 13

4运行测试 13

5.1测试目的 13

5.2测试截图 14

5.3测试结果 15

5课程设计小结 15

HTML5课程设计论文

1.绪论

1.1开发背景

《别踩白块儿》是由“有猫腻娱乐工作室（umoniStudio）”制作的一款非常耐玩的休闲益智游戏。

别踩白块儿，这就是这个游戏唯一的一个规则。

该游戏于2014年4月16日上线AppStore。

并在全球40多个国家、地区免费游戏榜登顶榜首，超过一百个国家或地区排名前十，5月

份荣登全球游戏下载总榜（iOS+Android）第一宝座，游戏上线3

个月累计下载达1亿。

鉴于这款游戏的火爆，并且随着HTML5所带来的技术热潮，我便想把这款游戏在PC端通过浏览器在本地实现。

1.2开发内容

本游戏通过浏览器，使用HTML5标记语言，CSS样式设计语言，以及JavaScript脚本语言进行实现。

9

2.游戏开发的相关技术

2.1开发工具介绍

SublimeText是一个代码编辑器（SublimeText2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。

Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。

SublimeText具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。

还可自定义键绑定，菜单和工具栏。

SublimeText的主要功能包括：

拼写检查，书签，完整的PythonAPI，Goto功能，即时项目切换，多选择，多窗口等等。

SublimeText是一个跨平台的编辑器，同时支持Windows、Linux、MacOSX等操作系统。

2.2开发运用技术介绍

2.2.1HTML5介绍

HTML5是HTML最新的修订版本，2014年10月由万维网联盟

（W3C）完成标准制定。

目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。

广义论及HTML5时，实际指的是包括

HTML、CSS和JavaScript在内的一套技术组合。

它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-BasedRichInternetApplication，RIA），例如：

AdobeFlash、MicrosoftSilverlight与OracleJavaFX的需求，并且提供更多能有效加强网络应用的标准集。

具体来说，HTML5添加了许多新的语法特征，其中包括

这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。

其它新的元素如