摘 要

从红白机到主机游戏，再到网络游戏、体感游戏，电子游戏行业一直处于蓬勃发展的阶段。伴随着互联网时代的到来，网页游戏在众多游戏中脱颖而出。网页游戏无需客户端，打开网页就能玩，深受广大学生与工作族的喜爱。目前实现网页游戏的途径有三种：flash，第三方插件以及HTML5。flash是最传统的技术，也是使用率最高的技术。而HTML5则是一种新兴的途径。

本文介绍了一个射击类型的游戏 《星空大战》的制作，以阐述制作一个HTML5游戏的基本流程与方法。本游戏通过HTML5的canvas标签与JavaScript脚本代码制作完成。本游戏采用了LufyLegend库件以提高制作效率。游戏主要分为飞机模块，子弹模块，界面显示模块和碰撞检测模块；在完成基本功能的同时添加了选关，积分等功能。

HTNL5游戏发开维护成本相对其它游戏要低，而且方便快捷的特点能充分利用学生与工作族的碎片化时间。相信HTML5游戏在未来能有更大的发展。

关键词： HTML5；飞机大战；Lufylegend；网页小游戏

Abstract

From the NES game to the computer game,and to online games and somatosensory games, video game industry has been in a stage of vigorous development. With the advent of the Internet era,web games stand out in many games.Web games need no client, we can play it right after we open the Web page, the majority of students ,worker and family like playing it.To achieve the webgames, there are three way: flash, third-party plug-ins and HTML5. flash is themost traditional technology, but also the most popularity technology. And HTML5 is a new way.

This article describes a type of shooting game called "Star Wars", in order to show a way how to make HTML5 . This game is made by the HTML5 canvas tag and JavaScript script code. The game uses a LufyLegend librarymember in order to improve production efficiency. Games are divided into fourmodules which include planes moddule, bullets module,interface display moduleand collision detection module; After the completion of the basic functionswe adding the option to choose,we also add integration and other functions.

Costs of HTML5 game are lower than other games, and it's convenient for us to take advantage of the time of students and working families.I believe HTML5 games will going to have a greater development in the future .

Keywords: HTML5；Plain Wars；Lufylegend；Web Games

目 录

摘 要 III

Abstract 4

目 录 1

第一章 绪论 1

1.1系统研究的背景意义 1

1.2国内外发展现状 1

1.3主要工作内容 2

1.4本章小结 2

第二章 需求分析与可行性分析 3

2.1功能需求 3

2.2非功能需求 3

3.3可行性分析 4

第三章 模块设计 5

3.1游戏流程 5

3.2角色设计 5

3.3 模块设计 5

3.5本章小结 7

第四章 具体功能实现 8

4.1开发工具的选择 8

4.2游戏框架：Lufylegend库件 9

4.3代码实现 9

4.3.1图片的读取 9

4.3.2游戏界面的设计 9

4.3.3飞机类的设计 10

4.3.4子弹类的设计 11

4.3.5碰撞检测 13

4.3.6控制响应事件 14

4.3.7飞机的移动与暂停 15

4.3.8关卡的难度设置与实现 16

4.4功能函数流程 17

4.5本章小结 18

第五章 游戏测试 19

5.1游戏欢迎页 19

5.2选关 19

5.3战斗 20

5.4结算 21

5.5本章小结 21

第六章 总结与展望 22

6.1总结 22

6.2展望 22

参考文献 23

致谢 24

第一章 绪论

1.1系统研究的背景意义

随着2012年Adobe公司宣布正式停止Flash Player的研发与更新，HTML5技术在我们的生活中变得越来越火。Adobe开发者关系主管迈克.钱伯斯曾指出HTML5几乎已经被所有的浏览器广泛支持，Adobe也认识到Flash已经赶不上时代。HTML5将为互联网时代带来巨大变革与发展。

从游戏的载体方面来说，电子游戏主要分为三大阵营：电视游戏，电脑游戏和手机平板游戏。而随着互联网的发展普及以及电脑硬件配置的提升，电子游戏走进了网络游戏的时代，特别是网页游戏得到了飞速的发展。

网页游戏最早从MUD（Multiple User Domain,多用户虚拟空间游戏）发展而来。早期的网页游戏限于技术水平的条件，大多只由文字与字符组成，得益于HTML语言的迅速发展，网页游戏可以添加图片，声音等素材。如今的网页游戏像《传奇》、《大战神》等甚至可以媲美早期的端游。

网页游戏的市场潜力巨大。与角色扮演和休闲类网游等其他类型网游相比，网页游戏开发周期短、成本低、技术要求低。而且网页游戏不用下载客户端，随便在哪打开网页就能玩；不需要太多操作，只需轻松点几下鼠标即可，真正的休闲，而非被游戏玩；一般网游要求玩家全身心投入，而网页游戏不需要太多时间，忙里偷闲的几分钟也能玩，不被游戏束缚。 网页游戏实现方法目前只有Flash，第三方插件以及HTML5技术三种。Flash的没落无疑给HTML5游戏的发展带来了广阔前景。

本选题是基于HTML5的射击类游戏星空大战的设计，通过本次设计能充分了解HTML5这一新兴技术，同时也可以了解网页小游戏的基本设计方法，具有足够的前瞻性。

1.2国内外发展现状

中国的网页游戏市场是从2007年开始萌芽的。因为网页游戏市场的低门槛高收入，各种新生网页游戏公司百花齐放，这之后的三年页游市场也是呈爆发式增长。此阶段的游戏类型也从一成不变的策略类游戏变得的多元化，弹弹堂类的休闲类游戏兴起。随着老牌网络游戏公司的涉足，网页游戏市场的门槛越来越高，市场也越来越呈现垄断的趋势，自2012年智能手机的普及，手机游戏的兴起给页游市场带来了巨大冲击。网页游戏也只能走精品化路线。2014年网页游戏市场用户数趋于饱和，而手机游戏市场却依旧增长，不少游戏公司将游戏开发出手机版，双端合璧。《神仙道》这款页游就是极好得到例子，这也引领了页游市场新的发展方向。