软件工程毕业设计论文 飞机大战游戏开发设计.docx
《软件工程毕业设计论文 飞机大战游戏开发设计.docx》由会员分享，可在线阅读，更多相关《软件工程毕业设计论文 飞机大战游戏开发设计.docx（44页珍藏版）》请在冰豆网上搜索。
软件工程毕业设计论文飞机大战游戏开发设计
毕业设计任务书
设计（论文）题目
飞机大战游戏开发设计
选题时间
完成时间
第九周
论文（设计）字数
1万字左右
关键词
htmlcssJavaScripthtml5面向对象
设计（论文）题目来源、理论和实际意义：
在飞速发展的信息时代，H5游戏在国内还处于萌芽状态时，H5 是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。
而H5游戏，你可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。
对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的高级版本，目前H5技术正在不断完善。
在技术方面，利用H5开发移动小游戏的门槛更低，所需时间更少。
“大家可以像写网页一样写游戏，而无需太多的额外学习，而且有大量文档与插件可用。
设计（论文）的主要内容：
跑起来吧英雄（火影）游戏主要分为四个部分：
地图人物实现、跑起来吧英雄、卷轴和对话、游戏脚本化。
1.HTML5开发RPG游戏之一（地图人物实现）
2.HTML5开发RPG游戏之二（飞机大战）
3.HTML5开发RPG游戏之三（碰撞和控制地图）
4.HTML5开发RPG游戏之四（主界面
系统主要实现目标：
1、界面设计精美、友好。
2、操作灵活、方便。
3、用户体验好。
学生签字：
指导教师签字：
系负责人签字：
年月日
摘要
随着计算机技术的飞快发展，信息时代也进入了飞速发展，H5开发移动小游戏的门槛更低，所需时间更少。
大家可以像写网页一样写游戏，而无需太多的额外学习，而且有大量文档与插件可用。
不过H5游戏在国内还处于萌芽状态时，H5 是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。
而H5游戏，你可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。
对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的高级版本，目前H5技术正在不断完善。
本系统设计采用HTML5技术，具有开发效率高、设计灵活、生成的软件界面友好美观等特点。
利用JavaScript的特性，JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。
Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。
而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
关键词：
计算机技术htmlcssJavaScripthtml5面向对象
第一章概述
1.1背景
二十一世纪是一个集数字化，网络化，信息化的，以网络为核心的社会。
中国的网民充分领略到“畅游天地间，网络无极限”所带来的畅快。
随着Internet的飞速发展，使得网络的应用日益的广泛。
如电子商务，电子政务，网上医疗，网上娱乐，网络游戏，网络教学等。
本次毕业设计的题目就是跑起来吧英雄游戏开发设计。
Html5有以下几点优点：
（1）简化代码：
HTML5为了做到尽可能简化，避免了一些不必要的复杂设计。
例如DOCTYPE的改进，在过去的HTML版本中第一行的DOCTYPE过于冗长，没有几个人能记得住，在实际的Web开发中也没有什么意义。
除了简化了DOCTYPE．还简化了字符集声明，以浏览器的原生能力替代脚本代码的实现和简单、强大的HTML5API。
（2）向下兼容：
HTML5有着很强的兼容能力，允许存在不严谨的写法。
例如，一些标签的属性没有使用引号括起来：
标签属性中包含大写字母；有砦标签没有闭合等。
（3）支持合理存在的内容：
HTML5的设计者们花费了大量的精力来研究通用的行为。
1.2Html5所需元素
元素就是游戏的显示对象，顾名思义就是能够在舞台上显示的对象，也就是我们在游戏中所能看到的东西，我们只有了解了这些显示对象，才能做出一个好游戏。
1.2.1文字（Text）：
我们可以通过文本对象，显示浏览器默认的字体和你通过css加载的字体，它是对canvas文本的的一个包装。
1.2.2图形（Graphics）：
图形对象是对canvas绘图的一个包装，简便快捷的绘制出多边形。
1.2.3图像（Image）：
图像是一个轻量级对象，你可以使用它来显示任何不需要物理引擎或者动画的任务东西。
它可以旋转、缩放、剪切，并接收输入事件。
它可以完美的用于标识、背景、简单的按钮和其他非精灵类图形。
1.2.4精灵（Sprite）：
精灵是游戏的生命体，几乎可用于所有的可视化物体。
基本上，精灵是有一套坐标和渲染在画布上的纹理所组成。
精灵也包括了一些额外的属性，例如物理移动、输入处理、事件、动画等等。
1.2.5瓦片（TileSprite）：
瓦片精灵是个有着重复纹理的精灵。
纹理可以被滚动、缩放，并且自动包裹边缘。
请注意，TileSprites 和普通的精灵默认没有输入处理方法和物理引擎刚体，两者都必须要启用后才会具有这些特性。
1.2.6组：
（Group）
组是一个用于显示各种对象（包括 Sprites 和 Images）的容器。
我们可以把许多对象放进一个组里，然后就可以使用组提供的方法对这些对象进行一个批量或是整体的操作。
比如要使组里的对象同意进行一个位移，只需要对组进行位移就可以了，又比如要对组里的所有对象都进行碰撞检测，那么就只需要对这个组对象进行碰撞检测就行了。
第二章开发工具及其语言特点
硬件：
安装有WindowsXP系统的微机一台。
软件：
WebStorm 、GoogleChrome
开源库件：
LegendForHtml5Programming
WebStorm是jetbrains公司旗下一款JavaScript开发工具。
被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。
与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。
2.1.1智能的代码补全
支持不同浏览器的提示，还包括所有用户自定义的函数（项目中）代码补全包含了所有流行的库，比如：
JQuery,YUI,Dojo,Prototype,MootoolsandBindows。
2.1.2代码格式化
代码不仅可以格式化，而且所有规则都可以自己来定义
2.1.3html提示
大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。
而且html里面还能有js提示。
2.1.4联想查询
只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义
2.1.5代码导航和用法查询
项目查找函数或者变量，还可以查找使用并高亮。
2.1.6代码重构
这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。
2.2html5的特点
2.2.1语义特性（Class：
Semantic）
HTML5赋予网页更好的意义和结构。
更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
2.2.2本地存储特性（Class:
OFFLINE&STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5APPCache，以及本地存储功能。
IndexedDB（html5本地存储最重要的技术之一）和API说明文档。
2.2.3设备兼容特性（Class:
DEVICEACCESS）
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。
HTML5提供了前所未有的数据与应用接入开放接口。
使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
2.2.4连接特性（Class:
CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。
HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
2.2.5网页多媒体特性（Class:
MULTIMEDIA）
支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。
2.3JavaScript的特点
2.3.1简单性
它是基于java基本语句和控制流之上的简单而紧凑的设计，是学习java的好过渡，而且，它的变量类型是采用弱类型，未采用严格的数据类型。
2.3.2安全性
爪哇脚本（JAVASCRIPT）不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据的丢失。
2.3.3动态性
javascrpt可以直接对用户或客户输入做出响应，无须经过web程序。
它对用户的响应采用以事件驱动的方式进行，即由某种操作动作引起相应的事件响应，如：
点击鼠标、移动窗口、选择菜单等。
2.3.4跨平台性
javascript依赖于浏览器本身，与操作环境无关。
只要能运行浏览器的计算机，并安装了支持javascript的浏览器就可以正确执行，从而实现了“编写一次，走遍天下”的梦想。
第三章HTML5开发RPG游戏之一（地图人物实现）
3.1游戏简介
在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然会被地图遮挡住。
一款RPG游戏，我简单把它分为地图层，人物层，效果层（一些法术效果等），对话层，控制层（按钮菜单等）。
如图1_1
我们只要依次将图片画在屏幕上，游戏人物将站在地图上，如果有对话，对话将出现在人物和地图的上面，而按钮等控件会出现在游戏的最外层。
3.2库件配置
首先建立一个文件夹rpg（你也可以起其他的名字）
然后将下载的库件解压，解压后将legend文件夹放到与rpg文件夹同目录。
然后，在rpg文件夹里建一个index.html文件和一个js文件夹，在js文件夹里建一个Main.js文件，最后，在index.html里加入下面的代码
当然，你也可以将legend文件夹放到其他地方，但是你需要修改legend文件夹下的legend.js文件中的LEGEND_PATH的值，来配置库件的路径游戏地图的实现，接下来，我们先来画最底层的地图层。
地图当然就是是由图片来组成的，如何在画面上显示一张图片，代码如下
varloader;
functionmain（）{
loader=newLLoader（）;
loader.addEventListener（LEvent.COMPLETE,loadBitmapdata）;
loader.load（"map.jpg","bitmapData"）;
}
functionloadBitmapdata（event）{
varbitmapdata=newLBitmapData（loader.content）;
varbitmap=newLBitmap（bitmapdata）;
addChild（bitmap）;
}
游戏中的地图可以是一张比较大的图片，即整个图片就是游戏的地图，当人物或者地图移动的时候，改变图片显示的区域范围，从而实现地图的滚动和显示等，这样的话，必须为每个场景准备一张地图。
另外，地图也可以是由许多小的地图块儿来组成，比如，我们熟悉的《吞食天地》，《勇者斗恶龙》等经典小型rpg游戏，这样的地图，我们需要准备一张或几张地图块儿，把这些地图块组合成地图来显示，比如下图
如图1_2
3.3游戏图片切割
在地图显示的时候，首先把图片切割，然后在根据预先设定好的位置显示到地图层上，这样我们就看到了一张完整的地图了，接下来，打开Main.js在里面加入：
init（50,"mylegend",480,320,main）;
在legendForHtml5Progarmming中，用init这个函数来初始化canvas，上面的代码表示，初始化一个速度为50，名字为mylegend，大小为480*320的游戏界面，初始化完成后调用main（）,这个速度值是说每个多少毫秒游戏循环一次，所以这个值设定的越小，游戏运行的速度就越快。
因为要调用main方法，所以我们要写一个main方法，main方法里做一些简单的准备工作。
虽说读取图片只需要一个
loader.load（"map.jpg","bitmapData"）;
但是游戏中往往用到很多张图片，你可以用到哪一张再加载哪一张，也可以一次性全部加载完，然后再开始显示游戏，为了一次性把图片加载完，我的做法是，将需要的图片放到一个数组里，然后设定一个索引，每加载一个图片，让这个索引加1，当这个索引小于数组的长度，则继续加载，直到将数组中的图片全部加载完，然后开始进行下一步的工作
functionloadComplete（event）{
//进度条显示
loadingLayer.graphics.clear（）;
loadingLayer.graphics.drawRect（1,"black",[50,200,200,20],true,"#ffffff"）;
loadingLayer.graphics.drawRect（1,"black",[50,203,200*（loadIndex/imgData.length）,14],true,"#000000"）;
//储存图片数据
imglist[imgData[loadIndex].name]=loader.content;
//读取下一张图片
loadIndex++;
loadImage（）;
}
当图片没有读取完之前，会不断循环loadImage和loadComplete两个方法，当读取完之后，移除进度条，用legendLoadOver告诉游戏已经读取完成，然后调用gameInit方法，进行游戏的初始化工作。
看gameInit方法
functiongameInit（event）{
//游戏层显示初始化
layerInit（）;
//添加地图
addMap（）;
//添加人物
addChara（）;
}
在gameInit方法中，首先进行游戏层的初始化，然后添加游戏地图，然后添加人物，游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层
//游戏层显示初始化
functionmain（）
{varlevel_1_loop=document.getElementById（"level_1_loop"）;
varbossLoop=document.getElementById（"boss_loop"）;
//dbg（"engine="+navigator.userAgent,false）;
g_rainbow=newArray（"yellow","orange","white","red"）;
document.addEventListener（'keydown',keyDown,false）;
document.addEventListener（'keyup',keyUp,false）;
if（g_basicShotSound==null）
{g_basicShotSound=newSound（"basic_shot",5）;
g_laserShotSound=newSound（"laser",5）;
g_smallExplodeSound=newSound（"small_explode",5）;
g_bonusSound=newSound（"bonus_sound",4）;
g_explodeSound=newSound（"explode",3）;
g_artifact_chard_sound=newSound（"artifact_chard_sound",2）;
g_double_sound=newSound（"double_sound",2）;
g_gem_sound=newSound（"gem_sound",4）;
g_gun_sound=newSound（"gun_sound",2）;
g_shot_sound=newSound（"shot_sound",3）;
g_speed_sound=newSound（"speed_sound",3）;
}
g_highScore=0;
g_gameState="setup";
g_levelDirector=newLevelDirector（）;
//tellingtheleveldirectortostartwillputtheclockand
//renderloopsonintervaltimers
g_levelDirector.startLevel（）;
}
//添加地图
functionitemLoaded（item）
{if（g_context==undefined）
{if（!
initCanvas（））
{dbg（"Criticalerrorinitializingcanvas.",false）;
return;
}}
if（item.id=="splash_screen"）
{g_context.drawImage（item,0,0）;
g_context.strokeRect（35,220,500,40）;
}
elseif（item.id=="loading"）
{g_context.drawImage（item,0,0）;
g_context.fillStyle="black";
g_context.fillRect（400,300,300,30）;
g_context.fillStyle="green";
g_context.fillText（"Loadinggamesounds",400,320）;
g_soundsLoaded=false;
loadGameSounds（）;
}
g_itemsLoaded++;
g_context.fillStyle="black";
g_context.fillRect（400,300,300,30）;
g_context.fillStyle="green";
g_context.fillText（item.id,400,320）;
varpercent=g_itemsLoaded/g_totalItems;
varwidth=Math.floor（percent*500）;
g_context.fillRect（35,220,width,40）;
}
//CalledthefirsttimeloadItemisinvokedwhilethebodyisloading
functioninitCanvas（）
{g_canvas=document.getElementById（'theCanvas'）;
if（!
g_canvas.getContext）
{returnfalse;}
g_context=g_canvas.getContext（'2d'）;
g_context.font="14ptHelvetica";
g_context.lineWidth=2;
g_context.strokeStyle="green";
g_totalItems=46;
g_itemsLoaded=0;
g_onscreenControls=false;
returntrue;
}
这样，我们就把预先设置好的图片显示到了游戏界面上，形成了地图
运行游戏,可以得到下面画面
如图1_4
游戏人物的实现,为了更好的实现游戏人物的控制，我们新建一个游戏加载类loader.js里面代码如下
functionitemLoaded（item）
{if（g_context==undefined）
{if（!
initCanvas（））
{dbg（"Criticalerrorinitializingcanvas.",false）;
return;
}}
if（item.id=="splash_screen"）
{g_context.drawImage（item,0,0）;
g_context.strokeRect（35,220,500,40）;}
elseif（item.id=="loading"）
{g_context.drawImage（item,0,0）;
g_context.fillStyle="black";
g_context.fillRect（400,300,300,30）;
g_context.fillStyle="green";
g_context.fillText（"Loadinggamesounds",400,320）;
g_soundsLoaded=false;
loadGameSounds（）;
}
g_itemsLoaded++;
g_context.fillStyle="black";
g_context.fillRect（400,300,300,30）;
g_context.fillStyle="green";
g_context.fillText（item.id,400,320）;
varpercent=g_itemsLoaded/g_totalItems;
varwidth=Math.floor（percent*500）;
g_context.fillRect（35,220,width,40）;
}
///CalledthefirsttimeloadItemisinvokedwhilethebodyisloading
//ctioninitCanvas（）
{
g_canvas=document.getElementById（'theCanvas'）;
if（!
g_c
升级会员 