基于HTML5的智力游戏设计-电子信息工程本科学生毕业论文

本科学生毕业论文（设计）

题目（中文）：基于HTML5的智力游戏设计

（英文）：Design of Intelligent Game Based on HTML5

姓 名

xxx

学 号

xxx

院 （系）

电子与信息工程学院

专业、年级

电子信息工程

指导教师

xxx 讲师

2017年 5月 10日

xxx科技学院本科毕业论文（设计）诚信声明

本人郑重声明：所呈交的本科毕业论文（设计），是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，

除文中已经注明引用的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。

本科毕业论文（设计）作者签名：

二〇一七 年 五 月 十 日

毕业论文（设计）任务书

课题名称

基于HTML5的智力游戏设计

姓 名

学 号

院 系

专 业

指导教师

xxx

xxx

电子与信息工程学院

电子信息工程

xxx 讲师

2015年10月20日

1、关键词：

2048； HTML5； 智力游戏；Webstrom；Angular2；

2、毕业论文（设计）内容要求：

该课题需要设计和实现一个在网页上运行的智力游戏，需要使JavaScript语言和Webstorm或其他前端开发工具，要求所设计的游戏画面良好，运行流畅。

(1)游戏介绍：

① 游戏为益智类游戏，越到后面越难越有挑战；

② 游戏玩法：使用键盘上、下、左、右键控制所有方块往这个方向移动。

③ 游戏规则：当所有方块往一个方向移动时，数字相同的方块可以相加变成一个方块，当拼出一个方块为2048，即为胜利；当16宫被占满且所有相邻方块不能再相加时，游戏结束；

④ 游戏界面：游戏界面有新游戏，记录当前分数，游戏介绍，记录历史最高分；

⑤ 按照游戏的系统实现方法，做出系统分析、系统设计、系统实施。

（2）主要工作量和工作流程如下：

① 进行系统的需求分析；

② 开始搭建开发平台和环境；

③ 根据需求分析和设计图来进行代码的编写；

④ 对功能模块进行测试；

⑤ 对项目整体进行测试；

⑥ 将项目打包上传至网站；

⑦ 完成毕业论文撰写，论文格式严格按照xxx科技学院本科毕业设计（论文）规范撰写，字数不少于10000字；

⑧ 准备答辩。

3、文献查阅指引：

[1] 胡崧. HTML 从入门到精通[M].北京：中国青年出版社，2007.

[2] 贾素玲,王强. Javasqript 程序设计[M]. 清华大学出版社.2007

[3] 费东东. 挑战Java script&Ajax应用开发[J] . 机械工业出版社.2008

[4] 单东飞, 张晓菲, 魏然. 锋利的JQuery[M] . 人民邮电出版社.2012

[5] William Harrel. HTML, CSS, and JavaScript Mobile Development For

Dummies[J] . John Wiley .2011

[6] Graffam, J. D. CSS for Print Designers[M] .NEW RIDERS PUBL .

201118(3):233~254

4、毕业论文（设计）进度安排：

第01周-第03周： 开题报告的撰写，翻译英文资料

第04周-第05周： 编程软件的熟悉

第06周-第10周： 各个模块设计

第11周-第16周： 调试

第17周-第19周： 毕业论文撰写

第20周： 完成毕业论文

院（系）意见：

负责人签名：

注：本任务书一式三份，由指导教师填写，经院（系）毕业论文领导小组审批后一份下达给学生，一份交指导教师，一份留院（系）里存档。

xxx科技学院本科毕业论文（设计）开题报告书

论文（设计）题作 者 姓 名 xxx

基于HTML5的智力游戏设计

所 属 院（系）、专业、电信学院 电子信息工程专业

2016.11.5

年级 2013年级

指导教师姓名、职xxx讲师

预计字10000 开题日期

称 数

选题的根据：

如今社会是当之无愧的网络生活，正是因为计算机的蓬勃发展让我们的生活更进一步。无处不见的科技，让我们生活无论是精神方面还是物质方面都能得到满足。而网络游戏更是丰富了我们的精神生活，随着电脑的出现，我们也拥有了更多乐趣，从一开始的扫雷，直到如今的各种大型网络游戏，电脑游戏也逐渐成为生活中不可缺少的娱乐方式。在电脑游戏中，单机游戏则是可以不用联网则能玩耍，如今基于HTML5开发的游戏也多为单机游戏。单机益智性游戏不需要太多精力的投入，轻松上手，在闯关中得到满足和锻炼，无形中放松了心情，释放了压力，锻炼了自己的思维能力。

主要内容：

本论文研究的是一个名叫“变色方块”的益智类游戏，游戏基本要求是运行无bug，游戏界面流畅不卡顿，锻炼玩家思维能力，释放压力。按照游戏的系统实现方法，做出系统分析、系统设计、系统实施。

开发中需要的核心技术：

（1）JavaScript是在游戏开发中最核心的，JavaScript一种直译式脚本语言，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

（2）jQuery是一个兼容多浏览器的javascript库，核心理念是write

less,do more(写得更少,做得更多)。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能，其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

（3）css是游戏开发中必不可少的一部分，CSS目前最新版本为CSS3，是能

够真正做到网页表现与内容分离的一种样式设计语言。通过css能使游戏界面更美观，完成初步交互。

（4）保存游戏进度，本游戏可以保存玩家的游戏进度。游戏闯过多关，网页会有记录，不管是因为自己退出还是其他原因退出，再进入游戏，都会回到退出时所在关卡。

研究方法：

（1）模拟法：在研究游戏实现状况的时候，要不断根据游戏完成的状态机来调试，然后通过实际的指令来验证该流程的正确性。

（2）实验法：在研究游戏更新模块的时候，需要通过不断的添加、删除调入的数据来测试游戏的更新情况是否出现延迟和卡顿情况等。

完成期限和采取的主要措施：

完成期限：2015年10月~2016年5月

1. 第01周-第03周：将需求分析弄清楚，然后写出功能模块。

2. 第04周-第05周：将设计步骤写出来。

3. 第06周-第10周：完成程序设计功能模块。

4. 第11周-第16周：完成程序代码，实现各个功能模块。

5. 第17周-第19周：完成论文整体，根据老师建议修改出合格的论文。

6. 第20周： 完成毕业论文。

主要参考资料：

[1] 胡崧. HTML 从入门到精通[M].北京：中国青年出版社，2007.

[2] 贾素玲,王强. Javasqript 程序设计[M]. 清华大学出版社.2007

[3] 费东东. 挑战Java script&Ajax应用开发[J] . 机械工业出版社.2008

[4] 单东飞, 张晓菲, 魏然. 锋利的JQuery[M] . 人民邮电出版社.2012

[5] William Harrel. HTML, CSS, and JavaScript Mobile Development For

Dummies[J] . John Wiley .2011

[6] Graffam, J. D. CSS for Print Designers[M] .NEW RIDERS PUBL .

201118(3):233~254

指导教师意见：

指导教师签

名：

院（系）意见：

签 名： 年

月 日

注：此表由学生本人填写，一式三份，一份留院（系）里存档，指导老师和本人各保存一份。

xxx科技学院毕业论文（设计）中期检查表

毕业论文（设计）基于HTML5的智力游戏设计

题 目

学生姓名

指导教师

签名：

xxx

xxx 讲师

学 号

专 业

检查日期

xxx

电子信息工程

2017.3.30

院（系） 电子与信息工程学院

指导教师检查情况记载及修改意见：

注：此表用于指导教师在学生毕业论文（设计）初稿完成后对学生执行任务书情况进行中期检查时用，由指导教师填写。

xxx科技学院毕业论文（设计）答辩申请暨资格审查表

学生姓名

院（系）

班 级

xxx

电子与信息工程学院

电信1301

学 号

专 业

指导教师

xxx

电子信息工程

xxx

毕业论文（设计）题目： 基于HTML5的智力游戏设计

内容综述（对毕业设计或论文的研究步骤和方法、主要内容及创新之处进行综述，提出答辩申请）：

⑴研究步骤：

本人通过查阅游戏开发相关资料，并学习国内外比较流行的游戏，对这些游戏的架构和操作流程进行分析和研究，再结合自己所学技术，确定游戏架构，最终进行游戏开发并撰写论文。

⑵研究方法：

文献研究法：通过查阅相关文献，从理论上和游戏结构上研究设计的方法。

游戏性分析法：通过玩某些类似的游戏，如腾讯光速工作室的《飞机大战》取其精华，研究出自己游戏的特色及亮点。

实践研究法：通过对游戏的各个模块逐个实践，研究游戏的可玩性与可靠性。

经验总结法：通过游戏的各个模块开发经验，撰写毕业论文。

⑶主要内容：

论文首先对国内外游戏行情做了叙说，对选题意义进行阐述，其次简绍了游戏基本概念和游戏框架，然后对于游戏功能的实现进行了详细的描述，最后对于此次课题进行总结，并对游戏进行展望。

经过4个月的努力完成了飞机大战游戏项目，论文多次提交给导师审查并修改，现已得到导师的同意，可以定稿了，故向院答辩委员会提交答辩申请，恳请给予批准。

资 格 审 查 项 目

01

02

工作量是否达到所规定要求

是

否

文档资料是否齐全（任务书、开题报告、答辩申请、

定稿论文及其相关附件资料等）

03

04

05

06

备

选

文档是否符合规范化要求

是否按时向指导教师提交全部正式材料

是否剽窃他人成果或者直接照抄他人设计（论文）

是否为已公开发表的个人论著

是否多人设计一个系统或者合作一个课题

（多人设计一个系统或者合作一个课题）内容是否雷

同

院（系）毕业论文（设计）工作领导小组意见：

符合答辩资格，同意答辩 □ 不符合答辩资格，不同意答辩□

（公章）

年 月 日

注：此表为学生毕业论文（设计）定稿后申请答辩，及院（系）领导小组对申请答辩学生进行资格审查时用；资格审查项目由指导教师填写。

xxx科技学院本科毕业论文（设计）评审表

论文题目

作者姓名

指导教师

姓名、职称

中

文

摘

要

关键词

（3-5个）

xxx 讲师 字 数 10000

基于HTML5的智力游戏开发

xxx

所属院（系）、专业、年级

电子信息工程院（系） 电子信息工程

专业 1301 年级

定稿日期

2017.05.10

英

文

摘

要

关键词

（3-5

评审基元

指导教师评定成绩

评审要素

目的明确

符合要求

评审内涵 满分

10

10

5

10

10

5

选题符合专业培养目标，体现学科、专业特点和教学计划的基本要求，达到毕业论文（设计）综合训练的目的。

符合本学科的理论发展，有一定的学术意义；对理论意义或

经济建设和社会发展的应用性研究中的某个理论实际价值

或方法问题进行研究，具有一定的实际价值。

选题恰当 题目规模适当，难易度适中；有一定的科学性。

能独立查阅相关文献资料，归纳总结本论文所涉及的有关研究状况及成果。

能运用所学专业知识阐述问题；能对查阅的资料进行整理和运用；能对其科学论点进行论证。

整体思路清晰；研究方案合理可行。

查阅文献

资料能力

综合运用

知识能力

研究方案的

设计能力

指导教师

实评分

选题质量25%

能力水平40%

研究方法和手段的运用能力

外文应用

能力

文题相符

论文质量35%

写作水平

写作规范

论文篇幅

能运用本学科常规研究方法及相关研究手段（如计算机、实验仪器设备等）进行实验、实践并加工处理、总结信息。

能阅读、翻译一定量的本专业外文资料、外文摘要和外文参考书目（特殊专业除外）体现一定的外语水平。

较好地完成论文选题的目的要求。

论点鲜明；论据充分；条理清晰；语言流畅。

符合学术论文的基本要求。用语、格式、图表、数据、量和单位、各种资料引用规范化、符合标准。

10000字左右。

10

5

5

15

10

5

实评总分 成绩等级

指导教师评审意见：

指导教师签名：

说明：评定成绩分为优秀、良好、中等、及格、不及格五个等级，实评总分90—100分记为优秀，80—89分记为良好，70—79分记为中等，60—69分记为及格，60分以下记为不及格。

评审基元

评阅教师评定成绩

评审内涵 评审要素

目的明确

符合要求

满分

10

10

5

10

选题质量25%

选题符合专业培养目标，体现学科、专业特点和教学计划的基本要求，达到毕业论文（设计）综合训练的目的。

符合本学科的理论发展，有一定的学术意义；对理论意义或

经济建设和社会发展的应用性研究中的某个理论实际价值

或方法问题进行研究，具有一定的实际价值。

选题恰当 题目规模适当，难易度适中；有一定的科学性。

能独立查阅相关文献资料，归纳总结本论文所涉及的有关研究状况及成果。

查阅文献

资料能力

评阅教师

实评分

能力

水平40%

综合运用

知识能力

研究方案的

设计能力

研究方法和手段的运用能力

外文应用

能力

文题相符

能运用所学专业知识阐述问题；能对查阅的资料进行整理和运用；能对其科学论点进行论证。

整体思路清晰；研究方案合理可行。

能运用本学科常规研究方法及相关研究手段（如计算机、实验仪器设备等）进行实验、实践并加工处理、总结信息。

能阅读、翻译一定量的本专业外文资料、外文摘要和外文参考书目（特殊专业除外）体现一定的外语水平。

较好地完成论文选题的目的要求。

论点鲜明；论据充分；条理清晰；语言流畅。

符合学术论文的基本要求。用语、格式、图表、数据、量和单位、各种资料引用规范化、符合标准。

10000字左右。

10

5

10

5

5

15

10

5

论文质量35%

写作水平

写作规范

论文篇幅

实评总分 成绩等级

评阅教师评审意见：

评阅教师签名：

说明：评定成绩分为优秀、良好、中等、及格、不及格五个等级，实评总分90—100分记为优秀，80—89分记为良好，70—79分记为中等，60—69分记为及格，60分以下记为不及格。

本科学生毕业论文（设计）

题目（中文）：基于HTML5的智力游戏设计

（英文）：Design of Intelligen Game Based on HTML5

姓 名

xxx

学 号

xxx

院 （系） 专业、年级

指导教师

电子与信息工程学院

电子信息工程

xxx 讲师

2017年 5月 10日

目 录

绪论 .................................................. 错误!未定义书签。

(1) 国内游戏市场现状 .............................. 错误!未定义书签。

(2) 本文主要研究内容 .............................. 错误!未定义书签。

(3) 论文章节安排 .................................................. 2

1 游戏引擎和相关技术简介 ............................................. 3

1.1 Sgge游戏引擎技术介绍 ......................... 错误!未定义书签。

1.1.1 Sgge游戏引擎架构 ....................... 错误!未定义书签。

1.1.2 Sgge游戏引擎系统库介绍 ................. 错误!未定义书签。

1.2 Windows编程技术 ............................. 错误!未定义书签。

1.3 本章小结 ...................................................... 5

2 飞机大战框架游戏功能分析 ............................ 错误!未定义书签。

2.1 游戏架构 ...................................... 错误!未定义书签。

2.2游戏功能分析 .................................. 错误!未定义书签。

2.2.1玩家操作规则功能分析 .................... 错误!未定义书签。

2.2.2 子弹功能分析 ............................. 错误!未定义书签。

2.2.3 Npc功能分析 .............................. 错误!未定义书签。

2.2.4 道具功能分析 ............................. 错误!未定义书签。

2.3 本章小结 ....................................... 错误!未定义书签。

3 游戏的实现以及关键技术 ................................. 错误!未定义书签。

3.1 游戏创建及游戏主思路流程 ......................... 错误!未定义书签。

3.2 功能类的介绍以及实现 ............................. 错误!未定义书签。

3.2.1 玩家飞机功能(Player)实现 ................... 错误!未定义书签。

3.2.2游戏地图功能（Map）实现..................... 错误!未定义书签。

3.2.3 玩家子弹类（Player Bullte）的实现 ........... 错误!未定义书签。

3.3游戏主要技术难点及解析 ........................ 错误!未定义书签。

I

3.3.1 游戏的碰撞检测算法 ......................... 错误!未定义书签。

3.3.2子弹的增加： ............................ 错误!未定义书签。

3.3.3 计分问题 ................................ 错误!未定义书签。

3.4本章小结 ...................................... 错误!未定义书签。

4 功能测试及展示 ...................................... 错误!未定义书签。

4.1项目运行简介 .................................. 错误!未定义书签。

4.2游戏功能测试 .................................. 错误!未定义书签。

4.3游戏功能展示图 ................................ 错误!未定义书签。

5 总结 ............................................................... 26

5.1小结 ......................................................... 26

5.2 下一步工作 .................................................. 26

参考文献 ............................................................. 28

致谢 ................................................................. 25

I

I

基于windows平台的飞机大战游戏的设计与开发

摘 要

飞机游戏曾在电视机游戏和掌上游戏机上风靡一时，是90后不可磨灭的童年记忆，随着近年来腾讯公司《全明飞机大战》游戏的运营，将飞机游戏又推上了一个新的高度。

本文利用Sgge图形渲染引擎，结合c++语言，阐述了如何开发一个完整的飞行游戏，并完成了游戏的编写，并对文中涉及的一些编程思想和常用的设计模式以及游戏中的关键技术和算法做了全面解析。

本游戏完成了物体碰撞、滚动背景、飞机控制等多种功能，具有Npc、道具、子弹等多种系统，其游戏有精美操作界面、有舒适的背景音乐和游戏声效等特点，这些都可以让玩家产生身临其境的感觉，让玩家享受游戏带来的乐趣。

【关键词】Sgge图形引擎 碰撞算法 2D游戏 c++

II

I

Design and Development of Aircraft WarGame Based on

Windows Platform

Abstract

Plane was on the TV game and PSP game are all the rage, is indelible childhood

memories after 90, as the tencent company in recent years all bright aircraft wars game

operation, the plane game again to a new level.

This paper, by using Sgge graphics rendering engine, combined with the c + + language,

expounds how to develop a complete flight game, and completed the writing of the game, and

also involved some programming ideas and common design patterns and the game's key

techniques and algorithms did a comprehensive analysis.

This game finished objects collide, scrolling background, aircraft control and other

functions, with NPCS, props, bullets and other system, its games have elegant interface, a

comfortable game background music and sound effects, etc, these can let the players create

immersive feeling, for players to enjoy the game.

[Key words]Sgge graphics engine Collision algorithm 2D game c++.IV

1 绪论

过去，人们的娱乐方式主要是电视、电影和音乐，而今天，随着计算机多媒体的飞速发展，计算机硬件性能的不断提升，以游戏为代表的电子娱乐正成为主流娱乐方式。游戏是以互联网技术为依托，可以多人同时参与的游戏项目，游戏产业集合高科技、文化、艺术和网络为一体，被称为21世纪的朝阳产业。根据中国互联网络信息中心（CNNIC）显示，2014年中国网民6.49亿，互联网普及率达47.9%，人均周上网时长达26.1小时，而网络游戏占网民使用率的56.4%，2001年中国游戏产业正式进入了高速成长期，其游戏市场规模达3.1亿人民币，2002年，规模扩大到9.1亿元，2003年因受到非典等因素影响，市场规模增速低于预期，为13.2亿元，2006年中国游戏收入达59.6亿元，2011年上半年已达209.7亿元，时至今天2015年上半年已增长至496.2亿元。以上数据不难看出中国游戏产业已经对当今社会经济发展和人们文化休闲生活产生了越来越大的影响，已成为我国文化创意产业不可缺少的重要组成部分。未来中国不但是一个游戏大国，也注定是一个游戏强国。

1.1 开发背景

随着计算机多媒体技术和互联网的快速发展，游戏和计算机的结合日趋紧密，游戏逐渐成为人们生活中不可缺少的一部分。目前，计算机游戏的发展更是如火如荼，种类繁多，如角色扮演游戏、射击游戏、模拟游戏、格斗游戏、冒险游戏、赛车游戏、益智游戏等。益智类游戏与一般网络游戏的最大不同就在于，益智类游戏蕴含了知识和智慧在里面。相对于其他动作游戏，益智游戏节奏比较缓慢，比较休闲，适合于各个年龄段的游戏玩家。玩家在娱乐的同时不仅可以愉悦身心、释放压力，还可以开发智力、激发学习兴趣、增强自身的逻辑分析能力和提高思维敏捷度。优秀的益智游戏娱乐性也十分强大，既好玩又耐玩。益智游戏的基本特征主要有以下几个方面。

目的性:

益智游戏的目的也是游戏者最终想要得到的结果。游戏的目的有多种表现形式，如：得高分、揭示谜底、发现宝藏、解决难题、释放压力等等。游戏目的不同于教学目的或学习目的，益智游戏的目的是将游戏目的与学习目的联系起来，游戏设计者应该充分考虑到益智游戏的教育价值以及休闲娱乐价值。益智游戏不应只是游戏与知识的单一结合，而应着眼于提高益智游戏的学习目标，既保留游戏“可玩性的”特点，实现“乐学”，又使游戏承载着学习策略，使游戏任务执行过程伴随着知识探究过程。

竞争性:

游戏通常有某种形式的竞争，这是游戏的最显著特征。可以是与对手对抗、与计算机对抗、与自己先前的成绩对抗、与机会或时间对抗等等。竞争可以发生在个体之间，也可以是团队之间。游戏的竞赛与对抗是社会竞争的简化和再现，与人对社会的适应性发展是一致的，这是青少年学生喜爱游戏的原因之一，也是游戏能用在职业培训中的原1

因之一。竞争和胜负是游戏的最本质特点，这种竞争不仅可以激发学习者的内部需要，而且还能促使学习者产生新的学习动机。此外，从小培养竞争意识对学习者将来适应社会也有很大的好处。

挑战性:

挑战性是游戏具有吸引力的特征之一，挑战是游戏者如何做才能成功达到目标，也就是通常所说的游戏中的“闯关”。游戏者从容易的游戏级别开始，逐渐掌握闯关技巧，最终解决最高难度的问题。

想象性:

游戏通常依靠想象来激发动机，想象的程度可以是接近真实情景的，也可以远离真实，或者完全是想象出来的情景。游戏中的想象可以分为两种：对现实的想象或想象在一个期望的或可能的情景中。例如“植物大战僵尸”游戏，将自己比作植物，来打败僵尸。在教学中，幻想会分散学习者对教学目标的注意，学习者越是沉浸在想象中，联想越丰富，注意与教学目标的偏离越远，解决这个问题依赖于想象与教学目标的紧密结合。在益智游戏中，想象可以使游戏玩家全身心的投入，锻炼玩家的逻辑思维能力。

娱乐性:

娱乐性就是以直接获得快感（包括生理和心理的愉悦）为主要目的，玩家可以在友好的游戏氛围中，身心获得快乐和满足，这是游戏吸引大家的最基本的特征。

Gabriele Cirulli利用周末的时间写2048这个游戏的程序，起初仅仅只是好玩而已，但没想到上传到网络以后使其意外走红。但是，该游戏是为手机端开发的。鉴于有些玩家跟喜欢在PC端玩游戏，这次，我便想把2048这个风靡全球的小游戏在PC端通过浏览器在本地实现。

1.2 开发内容

本游戏在PC端的实现主要是依靠浏览器实现。开发平台主要采用visual studio 2013和谷歌chrome浏览器。语言主要采用了还HTML5和javascript相结合的方式，目的是为了达到更好的游戏效果。HTML5和CSS相结合构建游戏界面，借用javascript和jquery库来对游戏进行编码。

1.3 论文章节安排

全文共分为六章，各章主要内容如下：

第1章：介绍游戏的一些基本概念，Windows平台的搭建流程和游戏引擎的基本功能。

第2章：主要对课题中所涉及游戏的游戏设计和需求进行介绍，对设计做主要说明。

第3章：该章对于课题所涉及游戏的实现，以及制作游戏所用的关键技术进行介绍，描述了游戏关键部分的编写思路，以及游戏中所采用的算法，对于技术难点做了重点解析。

2

第4章：讲游戏各功能的测试结果展示。

第5章：对于本课题进行总结，对于游戏后期改进做出展望。

2游戏开发的相关技术

开发工具选择了Git、Webstrom来进行来发。用HTML5和javascript作为主要语言，使用nodejs和webpack来搭建项目，项目框架使用Angular2和typescript，其中还用到了SCSS来实现布局

3

2.1 开发工具介绍

2.1.1 Webstrom介绍

WebStorm 是jetbrains公司旗下一款开发工具，目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。除了一些其他开发工具所具有的基本功能之外，他还有很多特性，比如集成了多种版本控制，查看本地的修改历史，支持调试，支持coffeescript和typescript的即时编译、代码提示、代码跳转、代码调试等。因为本项目中使用到了typescript、和版本控制Git,在综合本人的习惯，于是选择了WebStrom作为本项目的开发工具。

2.1.2 Git介绍

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Torvalds 开始着手开发 Git 是为了作为一种过渡方案来替代

BitKeeper，后者之前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人觉得BitKeeper 的许可证并不适合开放源码社区的工作，因此

Torvalds 决定着手研究许可证更为灵活的版本控制系统。尽管最初 Git 的开发是为了辅助 Linux 内核开发的过程，但是我们已经发现在很多其他自由软件项目中也使用了

Git。例如 很多 Freedesktop 的项目迁移到了 Git 上。

Git的功能特性：

从一般开发者的角度来看，git有以下功能：

1、从服务器上克隆完整的Git仓库（包括代码和版本信息）到单机上。

2、在自己的机器上根据不同的开发目的，创建分支，修改代码。

3、在单机上自己创建的分支上提交代码。

4、在单机上合并分支。

5、把服务器上最新版的代码fetch下来，然后跟自己的主分支合并。

6、生成补丁（patch），把补丁发送给主开发者。

7、看主开发者的反馈，如果主开发者发现两个一般开发者之间有冲突（他们之间可以合作解决的冲突），就会要求他们先解决冲突，然后再由其中一个人提交。如果主开发者可以自己解决，或者没有冲突，就通过。

8、一般开发者之间解决冲突的方法，开发者之间可以使用pull 命令解决冲突，解决完冲突之后再向主开发者提交补丁。

优点：

适合分布式开发，强调个体。

公共服务器压力和数据量都不会太大。

速度快、灵活。

4

任意两个开发者之间可以很容易的解决冲突。

离线工作。

缺点：

资料少（起码中文资料很少）。

学习周期相对而言比较长。

不符合常规思维。

代码保密性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。

2.2开发运用技术介绍

2.2.1 HTML5介绍

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。

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