摘 要

21世纪是互联网的时代，生活节奏加快，娱乐方式更加多样化。人们在网络上可以尝试丰富多彩的游戏。HTML5（HyperText Markup Language 超文本标记语言）这一轻量级的语言在经过多次重大修改后产生的新特性，使之在网页游戏开发领域中颇受关注。

本文借助开源前端集成开发工具Aptana，利用HTML5新特性中的canvas画布标签搭建游戏视图框架，利用video视频标签和audio音频标签解决游戏开发中的多媒体资源引用问题，利用PhotoShop等图形处理软件制作游戏开发中所需的图片资源，完成了基于HTML5的疯狂坦克游戏设计与开发。

本文介绍了DIV CSS布局技巧、Bootstrap前端框架、JavaScript原型继承及设计模式、JQuery函数库等前端重要技术，并应用到整个系统设计中。

本文最终开发出界面友好，操作人性化，游戏体验效果极佳的疯狂坦克游戏。并经过Chrome、FireFox、IE、Edge、QQ等多种浏览器的测试，系统运行稳定，用户体验较好。

关键词：HTML5；CSS；JavaScript；前端；网页游戏

Abstract

This is the age of Internet in the 21^st century,with our pace of life speeding up and more diversified entertainment.People can try to play various games on the Internet.HTML5（HyperText Markup Language）is a kind of language of the lightweight.It has created many new features after many major revisions,which makes it receive great attention.

In this paper,I have finished the design and development of a crazy tank game based on HTML5,with the help of the hacker-friendly and front-end IDE Aptana.The game view framework is set up by tag canvas,which is the new feature in HTML5.The tag video and tag audio is used to solve the question of the resource reference in the development of game.The image resources required in the game are produced by the image processing software PhotoShop.

Many front-end technology is introduced in this paper.For instance,the layout skills using DIV CSS,the front-end framework Bootstrap,the prototype inheritance and design patterns of JavaScript,the JQuery library.And those above all have been used into this system.

In this paper,I finally develop a crazy tank game,with a friendly interface,operation of humanity and excellent game experience.Further more,this system is tested through many browsers like Chrome、FireFox、IE、Edge、QQ and etc.Consequently,it turns to be stable and friendly to users.

KeyWords:HTML5；CSS；JavaScript；front-end；web game

目录

第1章 绪论 1

1.1课题研究背景及意义 1

1.2国内外研究现状 1

1.3课题来源 2

1.4本文的研究内容及组织结构 3

第2章 系统框架技术 4

2.1 DIV CSS页面布局 4

2.2 Bootstrap 4

2.3 JavaScript 4

2.3.1JavaScript基础 4

2.3.2 prototype 5

2.3.3JavaScript Design pattern 5

2.4 JQuery 5

2.5 开发工具 5

2.5.1 aptana 5

2.5.2 notepad 6

2.5.3 PhotoShop 6

2.5.4 Chrome浏览器 6

第3章 系统设计 7

3.1系统总体设计 7

3.2系统子模块设计 8

3.2.1 游戏界面模块设计 8

3.2.2 游戏资源读写模块设计 8

3.2.3 游戏进程跟踪模块设计 11

第4章 系统实现 13

4.1页面实现 13

4.1.1首页制作 13

4.1.2 游戏窗口制作 14

4.2 资源读写模块实现 15

4.2.1游戏多媒体资源制作 15

4.2.2游戏多媒体资源配置 15

4.3 游戏进程跟踪模块实现 16

4.3.1 游戏元素配置 16

4.3.2 游戏进程跟踪 20

第5章 系统运行测试 22

5.1 搭建运行环境 22

5.2 效果展示 22

第6章 总结与讨论 26

6.1本文工作总结 26

6.2分析与讨论 26

致谢 27

参考文献 28

附录 29

第1章 绪论

1.1课题研究背景及意义

HTML5是一种轻量级的，易上手的，互联网的编程语言，是超文本标记语言的第五次重大修改。在信息爆炸的时代，图片、声音以及视频等多媒体资源已成为互联网上信息交换的主要方式，HTML5的设计初衷是便是为了在移动设备上支持多媒体。HTML5新的语法特征被引进以支持这一点，如canvas、audio和video标签^[1]。另外HTML5引入了许多其他的新功能，这些足以对用户与文档的交互方式产生重大影响^[2]。

网页游戏随着科技进步和互联网技术的发展越来越成为现代人们生活中的休闲方式之一，在网游市场的比重越来越高。网页游戏以标准HTTP（HyperText Transfer Protocol 超文本传送协议）为基础的传输形式，不需要下载专门的客户端即可体验丰富的游戏内容，并且游戏易上手，受到了越来越多玩家的青睐^[3]。