摘 要

随着近年来网络游戏的快速发展，HTML5以其巨大的优势迅速崛起，颇受广大游戏开发者的喜爱。由于大型游戏开发周期长、运营花费高，HTML5小游戏越来越受到游戏厂家的青睐，很多大型公司都陆续出现了HTML5小游戏。HTML5作为一种当下非常受欢迎的游戏开发技术，加深对它的了解对我们来说是十分有必要的。而打地鼠作为HTML5小游戏的经典之作，学习它的开发无疑是学习HTML5的最佳选择。本论文主要涉及HTML5的相关技术介绍以及打地鼠游戏开发流程和涉及的技术、逻辑思想，并最终展示相关成果，完成自己的第一个网页小游戏的独立开发。

关键词：HTML5、打地鼠、网页游戏

Abstract

With the rapid development of online games in recent years, HTML5 has risen rapidly with its huge advantages and is popular among game developers.Due to the long development cycle of large games and high operating costs, HTML5 small games are increasingly favored by game manufacturers. Many large companies have successively appeared HTML5 small games.As HTML5 is a very popular game development technology, it is necessary for us to deepen our understanding of it.Whack-a-mole as a classic HTML5 game, learning its development is undoubtedly the best choice to learn HTML5.This paper mainly involves the introduction of relevant technologies of HTML5 and the development process of whack-a-mole game as well as the related technologies and logical ideas, and finally shows the relevant results to complete the independent development of my first web game.

Keywords: HTML5, whack-a-mole, web games

目录

第1章 绪论 1

1.1 HTML5发展历史 1

1.2 HTML5游戏开发的现实意义和优势 1

1.3 论文主要结构以及研究的内容 3

第2章 HTML、CSS和JS分析 4

2.1 HTML语言分析 4

2.1.1 HTML元素概念 4

2.1.2嵌套元素 4

2.1.3块级元素、行内元素 4

2.2 CSS语言分析 5

2.2.1 CSS实现功能和优势 5

2.2.2 CSS基本语法 6

2.3 JS语言分析 7

2.3.1 JS功能和优点 7

2.3.2 JS语言基础 8

2.4 HTML5语言分析总结 9

第3章 打地鼠游戏设计内容 10

3.1 HTML5游戏开发分析 10

3.2 打地鼠游戏功能结构设计 10

3.3 打地鼠游戏开发流程 11

3.4 打地鼠游戏各模块设计分析 12

3.4.1 游戏初始界面布局 12

3.4.2 地鼠洞和地鼠的生成 13

3.4.3 地鼠的随机出现 13

3.4.4 分数统计和倒计时设置 14

3.4.5 游戏音效的实现和光标的替换 15

3.4.6 游戏结束页面设计 16

第4章 打地鼠游戏实现和测试 17

4.1 游戏主界面布局 17

4.2地鼠洞的生成以及地鼠的填入 19

4.3地鼠的随机出现 20

4.4 分数和倒计时的实现 23

4.5 游戏音效的选择以及锤子的替换 24

4.6 游戏结束页面设计 26

4.7 打地鼠游戏开发小结 27

第5章 心得体会 28

参考文献 29

致 谢 30

第1章 绪论

1.1 HTML5发展历史

2006年WHATWG（web超文本应用技术工作组）和W3C（万维网联盟）两者决定合作，建立一个全新的HTML版本， 此前于2004年由WHATWG提出的HTML5草案得到了合作双方的认可，它是通过Web应用程序1.0发展而来的。为了凸显双方对它的重视，专门成立了一个新的工作组，用来专门管理这一新兴的网络技术。

2012年12月17日，万维网联盟(W3C)正式宣布了经过多年的努力HTML5的定稿终于完成了，HTML5规范的最终版本出台了，这些成果凝结了众多互联网专家和工作者的心血，是大家一起努力的结果。根据W3C声明：“HTML5是开放网络平台的基石”。

2013年5月6日，HTML 5.1官方草案发布。这一次发布的草案内容主要涉及了超文本标记语言的修改完善，增添了许多首次出现的功能，这些功能的出现大大丰富了超文本标记语言的操作空间，为以后HTML5的不断发展奠定了坚实的基础，也鼓励了网络工作者们不断提出更加好用、方便的功能。

自草案发布以来，HTML5经历了大大小小的修改完善，其中就有如Canvas、api以及HTML和XHTML标记等我们现在熟知的功能技术。同时，HTML5图像img标签和SVG也在不断发展进步中得到了完善，在实际开发中的性能得到了进一步的提高。如今支持Html5的浏览器包括Internet explorer 9、Firefox，以及后来的Opera、Safari、Chrome等。而基于Chrome或者ie，并进一步开发出具有各自不同特点的搜狗浏览器、QQ浏览器、leopard浏览器、360浏览器等国内各种版本类型的浏览器也都具备了支持Html5的能力。

2014年10月29日，万维网联盟(w3c)宣布在2006年初次提出创建新的HTML版本后经过8年的补充完善，HTML5标准规范终于公布了，并迅速得到网络各界工作者的认可。在过去8年时间里，许多网络工作者一直在使用其中的一些技术。在HTML5的不断发展中，有长远眼光的各个大型浏览器，如Chrome、Firefox、Opera、Internet Explorer 9 和Safari 4 都支持HTML5，但在这一天官方正式版本才正式发布，并迎来了发展的高潮。

现如今HTML5已成为当下最为流行的网络编程技术之一，影响非常广远，每一个开发者都几乎不可避免的要接触到这一技术。相信HTML5会发展的越来越好，可以实现越来越多的功能。

1.2 HTML5游戏开发的现实意义和优势