摘 要

随着不同系统平台的问世，市面上逐渐统一了一套Web标准，只需有浏览器便可显示出相同的界面。因此，基于HTML5的网页游戏曾一度在互联网上掀起热潮。而HTML5游戏的制作过程是很值得探究的。

本文以HTML5技术为基础，使用VS Code编辑器以及相关的CSS、JavaScript等技术设计并开发了一款植物大战游戏。文章从需求分析、系统架构开始，然后详细介绍了使用代码实现既定功能的全过程以及最后在浏览器上运行这款游戏并进行调试与初步的改进。使用VS Code能提高代码编辑的效率，CSS能节省运算的空间，JavaScript能丰富游戏的内容。

本文设计并开发了植物大战网页游戏，能在浏览器流畅运行。

关键词：HTML5；网页游戏；JavaScript语言

Abstract

With the advent of different system platforms, a set of Web standards have gradually been unified on the market, and the same interface can be displayed with a browser. Therefore, HTML5-based web games were once popular with the Internet. The production process of HTML5 games is worth exploring.

This article is based on HTML5 technology, using VS Code editor and related CSS, JavaScript and other technologies to design and develop a plant war game. The article starts with requirements analysis and system architecture, and then details the entire process of using the code to achieve the established functions and finally running the game on the browser and debugging and preliminary improvements. Using VS Code can improve the efficiency of code editing, CSS can save computing space, and JavaScript can enrich the content of the game.

This article designs and develops the Plant Wars web game, which can run smoothly in the browser.

Key Words： HTML5; web games; JavaScript language

目录

摘 要 I

Abstract II

第1章 绪论 1

1.1 课题研究背景与研究意义 1

1.2 国内外研究现状 2

1.3 论文的研究内容和结构 3

第2章 软件开发技术分析 5

2.1 VS Code 5

2.2 层叠样式表 6

2.3 JavaScript语言 7

第3章 游戏总体设计 9

3.1 需求分析 9

3.2 游戏设计 9

3.2.1 游戏背景介绍 9

3.2.2 游戏流程 9

3.2.3 关卡说明 11

3.3 游戏的功能模块 11

3.3.1 僵尸模块 11

3.3.2 僵尸功能 11

3.3.3 植物模块 12

3.3.4 植物功能 12

3.3.5 其他功能模块 13

3.4 界面设计 13

3.4.1 选择植物界面 13

3.4.2 游戏界面 14

第4章 游戏具体实现 15

4.1 界面具体实现 15

4.2 僵尸模块实现 17

4.3 植物模块实现 19

4.4 其他模块的实现 24

第5章 游戏测试 25

第6章 总结和期望 29

6.1 本次设计工作总结 29

6.2 下一阶段展望 29

致谢 31

参考文献 32

第1章 绪论

本章主要介绍HTML5的研究背景及研究意义，国内外研究现状，还有本次设计的总体结构。

1.1 课题研究背景与研究意义

现如今，随着信息技术的飞速发展，人类社会涌现出了许多不同的设备终端，比如移动智能手机和笔记本电脑。再加上3G和4G通信网络的大规模的成熟的运用，人们便有了一个不同于传统方法的上网渠道，这就是移动网络。移动网络也是一种网络服务，它是基于移动智能终端的，所以它有着移动通信的特征^[1]。由于移动互联网技术发展的日益成熟，人们想到了一个问题，那就是在移动端和电脑端打开同一个网页，是否能显示出相同的内容，毕竟他们是不同的内核。此外，许多年之前，在信息时代的发展之初，有一个相似的问题也困扰着人们：怎样才能在另一台电脑上显示出某一台电脑内存储的文本和图形呢。在那个时候，关于这个问题，人们想到了一个解决方法，那就是用同一套体系来构建一个网页。这样，不管是用不同的浏览器，还是用不同的设备终端，大家都能看到一样的内容，不会出现信息获取的差异性以及错误，于是，基于解决这个问题的思路，超文本标记语言，即HTML，便诞生了。

HTML自从诞生之后就存在很多分歧，所以它未能一蹴而就的形成一个能被人广泛接受的具有相同标准的版本，于是人们便开始不断的改进它。经过一代人的努力，几代的版本更替，最新版本的HTML5终于实现了真正的标准规范。在HTML5之前的版本，人们使用不同的浏览器看到的仍然还是不一样的排版，就显得十分不整洁。而现在，HTML5纳入了拓展功能，这使得它有了可以跨越不同平台的能力，在不支持新标签的老旧浏览器，例如老版本的IE浏览器，人们可以通过添加几串JavaScript代码来运用这些新的元素来解决浏览器之间不能显示相同的网页信息这个问题。基于这一系列便利的功能性改版，人们发现运用这个语言设计出来的网页游戏会脱离原来旧的引擎的束缚，当人们玩起来的时候，会变得更加方便和快捷。这是因为之前的网页游戏只能在一个Flash小框中运行，给人们带来的观感并不是很理想。而运用HTML5设计的游戏，基于它全新的内容元素，新的表单控件，以及能够用于绘画等新的性能，人们可以设计并表现出3D图像、声音等等来满足视觉和听觉等感官的需求。除此之外，本地支持的更大的存储空间也可以更加方便的保存游戏内的信息，这也可以增加游戏玩家的在线粘度。其次，HTML5使得网页游戏可以直接在浏览器里面运行，这样只需要玩家有流量，便可通关不同的渠道加载出游戏所需要的场景，只需要在任何一个设备中有浏览器即可，实现了打开即玩的特性。正因为如此，在HTML5诞生之后，诸多程序员集思广益，开发出了许多好玩的网页游戏。而植物大战游戏就是其中一款，它的原型是一款PC端的游戏：植物大战僵尸(Plants vs. Zombies)^[2]，程序员们通过HTML5以及其他工具，比如：CSS、JavaScript等将其移植到了浏览器上，使它成为了一个网页游戏。植物大战游戏也还原了原本游戏的玩法并加之以创新，使其具备了一个HTML5游戏该拥有的绝大部分优点，包括且不限于操作简单、可玩性强以及能在网页上流畅运行，因此，这款游戏自打诞生之后就一直风靡在中国玩家之间，长盛不衰。

所以本次毕业设计的主要内容就是运用HTML5设计一个植物大战游戏，能够具备基础且完备的功能，此外还要能在不同的电脑上良好运行，反映出HTML5真正切实可行的起到一个规划化文本的作用。而通过这次设计，设计人应该在设计的过程中学习并运用相关的知识，对HTML5、CSS以及JavaScript有一定的了解和自己的认识，从而正式踏入前端开发的领域，为今后研究生阶段更加深入的研究打下基础。

1.2 国内外研究现状

HTML5自2008年正式发布以来，又经历了人们的不断完善，现已经有了一个稳定的版本。相较于之前版本的HTML4.01，HTML5在删除了一些冗余的元素的同时，也重新定义和添加了很多新元素和功能。而这些功能在今天极大的方便了人们去更好的使用互联网以及与其他网友之间的交流和探讨。