2016基于HTML5的打飞机游戏设计与制作

admin管理员组

文章数量:1530518

2024年6月28日发(作者：)

目录

目录 .................................................................................................................................................. I

摘要 ................................................................................................................................................. II

Abstract ............................................................................................................................................. 1

1．概述 ..................................................................................................................................... 4

1.1 设计题目 .................................................................................................................... 4

1.2 设计目的 .................................................................................................................... 4

1.3 设计背景（项目背景）简介 .................................................................................... 4

2．需求分析 ............................................................................................................................. 4

2.1 游戏总体实现目标 .................................................................................................. 4

2.2 性能要求 .................................................................................................................. 5

3．设计方案 ............................................................................................................................. 6

3.1 本游戏需要解决的主要技术问题 ............................................................................ 6

4．实现效果 ............................................................................................................................. 8

4.1载入全部对象 ............................................................................................................. 8

4.2玩家飞机发射子弹及子弹打中敌人发生爆炸的实现 ........................................... 10

4.3当玩家飞机被击毁后以及重新开始实现 ............................................................... 12

4.4鼠标监听事件实现操控玩家飞机 ........................................................................... 13

5．收获与体会 ....................................................................................................................... 13

参考资料 ................................................................................................................................. 14

I

摘要

WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“'W3'”，英文全称为“World Wide Web”），

中文名字为“万维网”，"环球网"等，常简称为Web。 分为Web客户端和Web服务器程序。

WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相

链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资

源”；并且由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议

（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公

共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）

编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超

文本标记语言，是因为文本中包含了所谓“超级链接”点。

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）

的第五次重大修改。 HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能

在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带

来无缝衔接的丰富内容。

关键词：WWW 超文本标记语言 HTML5

I

Abstract

WWW is an abbreviation for World Wide Web, (also known as "Web", "WWW", "'W3'", the

English called "World Wide Web"), the Chinese name for the "World Wide Web", "web", etc.,

often referred to as the for the Web. Divided into Web client and Web server program. WWW

allows Web clients (common browsers) to access the browser page on the Web server. It is a made

up of many interlinked hypertext system composed of the Internet access. In this system, each

useful things, known as "resources"; and is identified by a global "Uniform Resource Identifier"

(URI); these resources through the hypertext transfer protocol (Hypertext Transfer Protocol) is

transmitted to the user, and then were to get resources by clicking on the link.

The nature of the page is the hypertext markup language, through the use of other Web

technologies (such as: script language, common gateway interface, components, etc.), can create a

powerful website. Thus, the Hypertext Markup Language is the World Wide Web (Web)

programming foundation, that the World Wide Web is based on hypertext foundation. Hypertext

markup language is called HTML, because the text contains a so-called "super link" points.

HTML5 is the core language of the World Wide Web, an application HTML under the

Standard Generalized Markup Language (HTML) in the fifth major revision. HTML5 will replace

the 1999 formulation of HTML 4.01, XHTML 1.0 standards, with a view to the rapid development

of Internet applications in time, so that network standards to meet the needs of contemporary

network brings seamless convergence of rich content for the desktop and mobile platforms.

Keywords: WWW HTML HTML5

1

1．概述

1.1 设计题目

题目：基于HTML5的打飞机游戏设计与制作

1.2 设计目的

因为对于HTML5的兴趣，我设计了这个打飞机游戏。通过这个游戏的设计，达到对

HTML5的进一步了解和实践。在完成该游戏的同时，培养团队协作能力，提高自学能力。

1.3 设计背景（项目背景）简介

HTML5会带来一个统一的网络，无论是笔记本，台式机，还是智能手机都应该很方便的

浏览基于HTML5的网站。HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原

先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调

试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，

开发人员可以轻松调试修改。

HTML5是开放的Web网络平台的奠基石。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一

点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档

的交互方式，包括：

· 新的解析规则增强了灵活性

· 新属性

· 淘汰过时的或冗余的属性

· 一个HTML5文档到另一个文档间的拖放功能

· 离线编辑

· 信息传递的增强

· 详细的解析规则

· 多用途互联网邮件扩展（MIME）和协议处理程序注册

· 在SQL数据库中存储数据的通用标准（Web SQL）

2．需求分析

2.1 游戏总体实现目标

在完成游戏时，应具有以下的一些功能：

4

1.载入场景；

2.创建玩家飞机，敌机，积分版等；

3.可以操作玩家飞机；

4.玩家飞机可以发射子弹；

5.敌机可以飞行，可以被摧毁；

6.可以实现统计积分；

7.玩家飞机被摧毁后可以重新开始。

2.2 性能要求

本游戏主要由HTML5、JavaScript、Adobe Photoshop来进行游戏设计与开发；

HTML5特性：

语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格

式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5

APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API

说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能

上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放

接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与

microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的

在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和

WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到

客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能

相得益彰。

三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊

人视觉效果。

性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以

前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，

较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

Java语言特点

1. 平台无关性

Java引进虚拟机原理，并运行于虚拟机，实现不同平台之间的Java接口。Java的数据

5

类型与机器无关。

2. 安全性

Java的编程类似C++,但舍弃了C++的指针对存储器地址的直接操作，程序运行时，内

存由操作系统分配，这样可以避免病毒通过指针入侵系统。它提供了安全管理器，防止程序

的非法访问。

3. 面向对象

Java吸收了C++面向对象的概念，将数据封装于类中，实现了程序的简洁性和便于

维护性，使程序代码可以只需一次编译就可反复利用。

4. 分布式

Java建立在TCP/IP网络平台上，提供了用HTTP和FTP协议传送和接收信息的库函数，

使用其相关技术可以十分方便的构建分布式应用系统。

5. 健壮性

Java致力与检查程序在编译和运行时的错误，并自动回收内存，减少了内存出错的可

能性。Java取消了C语言的结构、指针、#define语句、多重继承、goto语句、操作符、

重载等不易被掌握的特性，提供垃圾收集器自动回收不用的内存空间。

Adobe Photoshop

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有

效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有

涉及。

Adobe支持Windows操作系统 、安卓系统与Mac OS， 但Linux操作系统用户可以通过

使用Wine来运行Photoshop。

从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。 图

像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视

等；也可进行复制、去除斑点、修补、修饰图像的残损等。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，

这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合。

校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进

行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特

效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。

3．设计方案

3.1 本游戏需要解决的主要技术问题

1. 游戏程序是一项精度要求很高的程序系统，因为其代码利用率很高。一个实时运行的最

终作品，每秒都会运行成千上万行程序，绘图事件、键盘事件都会以极高的频率在后台等待

响应，若有丝毫的差别都将很容易导致程序在运行不久后可能出现严重错误，甚至死循环。

因此，其逻辑设计应当相当严谨，需将所有可能发生的事件及意外情况考虑在设计中。

2. 游戏中为了美观，适用性强，可能需要采用外部文件引入的图片贴图，有关贴图。

3. 玩家飞机的运行可以通过鼠标响应事件控制，但敌方则因为是自动运行，就需要有一定

的智能性；敌人飞机的运行算法也要进行相关的设置，已免游戏过于简单。

4. 双方的飞机在前进时也需要考虑到是否碰撞到对方飞机，以免重叠运行，造成许多物理

6

上不可能的情况，缺乏真实感。每一次刷新页面、每前进一步都需要进行相关的碰撞检测。

5. 游戏的地图不可能通过绘图来解决。否则，不仅难于控制和处理过多的元素。

3.2 游戏流程

本游戏采用面向对象的设计模式，对游戏中的所有物体赋予对象的概念和属性。在开始

游戏后将先从外部文件载入地图文件，对背景的所有物体进行绘图。

游戏开始后先绘制地图，并将各个对象实例化。在主程序运行的线程中，游戏中所有的

对象都应该运行在同一个线程下。当用户的子弹达到射程范围后，调用函数将敌机删除。

子弹的运行和控制

使用每组子弹的第一发作为与敌人进行碰撞检测的精灵，同时相关的标志位也设在第一

发子弹中。如果玩家子弹与敌机相撞，则敌机消失时，子弹精灵的图片替换为爆炸图片，直

到第二次发射该组子弹时，才将图片替换为子弹图片。

Canvas类

为了能有程序开发人员控制接口的外观和行为，需要使用大量的初级用户接口类，尤其

在游戏程序中，几乎完全依赖的就是Canvas抽象类进行绘图。从程序开发的观点看，Canvas

类可与高级Screen类交互，程序可在需要时在Canvas中掺入高级类的组件。Canvas提供

了键盘事件、指点杆事件（如果设备支持），并定义了允许将键盘按键映射为游戏控制键的

函数。键盘事件由键代码指定，但这样控制游戏会导致缺乏通用性，并不是每个设备的键盘

布局都适合游戏的操作。应当将键代码转换为游戏键的代码，以便硬件开发商能定义他们自

己的游戏键布局。

PNG图片格式

PNG(Portable Network Graphics)格式是MIDlet唯一支持的图象格式，PNG具体格式

由PNG Specification,Version 1.0定义的。PNG格式提供透明背景的图象，这对绘制游戏

画面和被操纵主角极有帮助。飞机之间或与白云碰撞时就不会因为背景有特定的颜色，显示

出的效果像贴上的图片而缺乏真实感，物体之间轻微重叠时最上层图片也不会覆盖超过其有

效象素外的部分。

7

PNG格式图片中包含许多定义其图片特性的冗余部分(Chunks)。这些代码包含在每一个

单独的png格式图象中，然而如果将多个png图象合并在一张幅面稍大一些的整图中，多个

chunks就可以得到精简，图片的大小可以得到控制。使用Image类中的createImage函数

可从整图中分割出所需要的元素。在Game包中的TiledLayer和Sprite类都整合了这样的

功能。本程序中的地图元素都集成在一张图片中，实现了方便的管理和程序体

积的精简。

4．实现效果

4.1载入全部对象

具体代码：var game = {nums:0};

// 用于存放小飞机

var flivver = new Array();

var flivverImg = newImg("./images/");

// 自己

var me = {x:240,y:750};

var meImg = newImg('images/');

// 子弹

var zidans = new Array();

var zidanImg = newImg('./images/');

var boo1 = newImg('./images/');

var over = newImg('./images/');

//

= function(){

es();

// 设置背景

();

// 设置小飞机

vver();

// 画自己

();

// 子弹

();

= "italic 20px 微软雅黑";

Text("积分：" + jifen, 10, 30);

$('#fjs').html();

8

$('#zds').html();

$('#scfj').html("1000/" + time2 + " 毫秒");

}

es = function(){

time1++ ;

// 100 秒 1个档位

if(time1 == 1000){

time1 = 0;

time2 = (time2 == 20) ? 20 : time2 - 20;

}

}

/**

* 设置移动的背景

*/

= function(){

++;

if( == 800){

= 0;

}

// 画布的背景

age(img,0,,480,800);

age(img,0, - 800,480,800);

}

vver = function(){

// 生成飞机

if( % time2 == 0){

flivverLog++;

if(flivverLog % 6 == 0){

(getFlivver(2));

}else if(flivverLog % 13 == 0){

(getFlivver(3));

}else{

(getFlivver(1));

}

}

实现效果如下：

9

4.2玩家飞机发射子弹及子弹打中敌人发生爆炸的实现

// 小飞机死亡

if(flivver[a].over > 0){

flivver[a].over --;

if(flivver[a].over > 20){

age(boo1,flivver[a].x + flivver[a].width/2

20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);

}else if(flivver[a].over > 2){

age(over,flivver[a].x + flivver[a].width/2

20 ,flivver[a].y + flivver[a].height / 2 -10,40,43);

}else{

(a, 1);

}

10

-

-

}else{

age(flivver[a].img,flivver[a].x,flivver[a].y,flivver[a].width,fli

vver[a].height);

// 判断自己是否死亡

if( me.x > (flivver[a].x - flivver[a].width + 20) && (me.x)

<(flivver[a].x + flivver[a].width - 20) && (me.y) < (flivver[a].y +

flivver[a].height + 20) && (me.y + 72) > (flivver[a].y - 20)){

gameover();

}

if(flivver[a].hit > 0){

age(boo1,flivver[a].x + flivver[a].width/2 -

20 ,flivver[a].y + flivver[a].height / 2 -10,41,39);

//age(boo1,flivver[a].x + 5 ,flivver[a].y,41,39);

flivver[a].hit--;

}

// 更新子弹方法

= function(){

if( % 10 == 0){

(new zidan(me.x + 30,me.y));

}

for(i in zidans){

// 飞到顶部就将OBJ删除掉

if(zidans[i].y < 0){

(i, 1);

continue;

}

zidans[i].y -= 20;

// 将小飞机画到画布上

age(zidanImg,zidans[i].x,zidans[i].y,7,17);

// 子弹碰到飞机的情况

for(j in flivver){

if(flivver[j].over > 0){

continue;

}

if(zidans[i].x > flivver[j].x && zidans[i].x < flivver[j].x+

flivver[j].width && zidans[i].y > flivver[j].y && zidans[i].y -flivver[j].height

< flivver[j].y){

11

}

flivver[j].hit = 10;

$('#isdz').html('打中了编号' + j);

if(flivver[j].hp > 1){

flivver[j].hp -= 80;

}else{

flivver[j].over = 40;

jifen += 100;

}

// 子弹消失

(i, 1);

break;

4.3当玩家飞机被击毁后以及重新开始实现

function gameover(){

imeout(fps);

//$('#game').fadeOut();

$('.content').css('position','relative');

$('.content').append('font-size:50px; color:#ffffff; text-align:center" id="sil">');

$('#sil').html('GA').hide().fadeIn(1000,function(){

$(this).html('GAME').hide().fadeIn(1000,function(){

12

$(this).html('

style="color:#ffffff" title="重新开始">GAME OVER

' + jifen + ' 分

').hide().fadeIn();

});

});

}

4.4鼠标监听事件实现操控玩家飞机

ntListener('mousemove', function onMouseMove(evt) {

me.x = // - $('#game').offset().left - 32;

me.y = - 36 ;

$('#sbX').html(me.x);

$('#sbY').html(me.y);

});

5．收获与体会

通过这次毕业设计，使我明白了自己原来的知识比较欠缺，自己要学习的东西还很多。

以前老师觉得自己什么都懂了，有点眼高手低的感觉。通过这次毕业设计，我才明白学习是

一个不断积累的过程，我以前所懂的都只是停留在表面，并让我知道，在以后的工作和生活

中都应该不断的学习，努力的充实自己的大脑。

13

参考资料

罗森 夏普，——HTML5用户指南，机械工业出版社，2011

郑娅峰 张永强，——网页设计与开发—HTML、CSS、JavaScript实例教程，清华大学出版

设（第2版），2011

刘欣, 王雨竹，——HTML5入门经典，机械工业出版社，2011

徐阳，——HTML5游戏开发，人民邮电出版社，2011

14

本文标签： 游戏飞机子弹图片