基于windows平台的飞机大战游戏的设计与开发毕业论文文档格式.docx
《基于windows平台的飞机大战游戏的设计与开发毕业论文文档格式.docx》由会员分享，可在线阅读，更多相关《基于windows平台的飞机大战游戏的设计与开发毕业论文文档格式.docx（23页珍藏版）》请在冰豆网上搜索。
在益智游戏中，想象可以使游戏玩家全身心的投入，锻炼玩家的逻辑思维能力。
娱乐性:
娱乐性就是以直接获得快感（包括生理和心理的愉悦）为主要目的，玩家可以在友好的游戏氛围中，身心获得快乐和满足，这是游戏吸引大家的最基本的特征。
GabrieleCirulli利用周末的时间写2048这个游戏的程序，起初仅仅只是好玩而已，但没想到上传到网络以后使其意外走红。
但是，该游戏是为手机端开发的。
鉴于有些玩家跟喜欢在PC端玩游戏，这次，我便想把2048这个风靡全球的小游戏在PC端通过浏览器在本地实现。
1.2开发容
本游戏在PC端的实现主要是依靠浏览器实现。
开发平台主要采用visualstudio2013和谷歌chrome浏览器。
语言主要采用了还HTML5和javascript相结合的方式，目的是为了达到更好的游戏效果。
HTML5和CSS相结合构建游戏界面，借用javascript和jquery库来对游戏进行编码。
1.3论文章节安排
全文共分为六章，各章主要容如下：
第1章：
介绍游戏的一些基本概念，Windows平台的搭建流程和游戏引擎的基本功能。
第2章：
主要对课题中所涉及游戏的游戏设计和需求进行介绍，对设计做主要说明。
第3章：
该章对于课题所涉及游戏的实现，以及制作游戏所用的关键技术进行介绍，描述了游戏关键部分的编写思路，以及游戏中所采用的算法，对于技术难点做了重点解析。
第4章：
讲游戏各功能的测试结果展示。
第5章：
对于本课题进行总结，对于游戏后期改进做出展望。
2游戏开发的相关技术
开发工具选择了Git、Webstrom来进行来发。
用HTML5和javascript作为主要语言，使用nodejs和webpack来搭建项目，项目框架使用Angular2和typescript，其中还用到了SCSS来实现布局
2.1开发工具介绍
2.1.1Webstrom介绍
WebStorm是jetbrains公司旗下一款开发工具，目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。
除了一些其他开发工具所具有的基本功能之外，他还有很多特性，比如集成了多种版本控制，查看本地的修改历史，支持Node.js调试，支持coffeescript和typescript的即时编译、代码提示、代码跳转、代码调试等。
因为本项目中使用到了typescript、Node.js和版本控制Git,在综合本人的习惯，于是选择了WebStrom作为本项目的开发工具。
2.1.2Git介绍
Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
Git是LinusTorvalds为了帮助管理Linux核开发而开发的一个开放源码的版本控制软件。
Torvalds开始着手开发Git是为了作为一种过渡方案来替代BitKeeper，后者之前一直是Linux核开发人员在全球使用的主要源代码工具。
开放源码社区中的有些人觉得BitKeeper的许可证并不适合开放源码社区的工作，因此Torvalds决定着手研究许可证更为灵活的版本控制系统。
尽管最初Git的开发是为了辅助Linux核开发的过程，但是我们已经发现在很多其他自由软件项目中也使用了Git。
例如很多Freedesktop的项目迁移到了Git上。
Git的功能特性：
从一般开发者的角度来看，git有以下功能：
1、从服务器上克隆完整的Git仓库（包括代码和版本信息）到单机上。
2、在自己的机器上根据不同的开发目的，创建分支，修改代码。
3、在单机上自己创建的分支上提交代码。
4、在单机上合并分支。
5、把服务器上最新版的代码fetch下来，然后跟自己的主分支合并。
6、生成补丁（patch），把补丁发送给主开发者。
7、看主开发者的反馈，如果主开发者发现两个一般开发者之间有冲突（他们之间可以合作解决的冲突），就会要求他们先解决冲突，然后再由其中一个人提交。
如果主开发者可以自己解决，或者没有冲突，就通过。
8、一般开发者之间解决冲突的方法，开发者之间可以使用pull命令解决冲突，解决完冲突之后再向主开发者提交补丁。
优点：
适合分布式开发，强调个体。
公共服务器压力和数据量都不会太大。
速度快、灵活。
任意两个开发者之间可以很容易的解决冲突。
离线工作。
缺点：
资料少（起码中文资料很少）。
学习周期相对而言比较长。
不符合常规思维。
代码性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。
2.2开发运用技术介绍
2.2.1HTML5介绍
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。
广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在的一套技术组合。
它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-BasedRichInternetApplication，RIA），例如：
AdobeFlash、MicrosoftSilverlight与OracleJavaFX的需求，并且提供更多能有效加强网络应用的标准集。
具体来说，HTML5添加了许多新的语法特征，其中包括<
video>
、<
audio>
和<
canvas>
元素，同时集成了SVG容。
这些元素是为了更容易的在网页中添加和处理多媒体和图片容而添加的。
其它新的元素如<
section>
article>
header>
nav>
则是为了丰富文档的数据容。
新的属性的添加也是为了同样的目的。
同时也有一些属性和元素被移除掉了。
一些元素，像<
a>
cite>
menu>
被修改，重新定义或标准化了。
同时APIs和DOM已经成为HTML5中的基础部分了。
HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
2.2.2Angular2介绍
Angular2主要是用来做客户端应用的框架，只需要HTML和能编译成Javascript的语言,比如Dart，比如Typescript,官方推荐的是和Typescript配合着用。
Angular2实现当前Web平台最大可能的速度，并更近一步提升，通过WebWorker和服务端渲染技术。
Angular2让你在扩展性上可以控制。
比如说，通过RxJS、Immutable.js或者其他推模式建立数据模型来满足大数据需求。
通过简单的声明模板快速构建特性。
通过你自己的组件和利用大量现有组件，扩展模板语言。
Angular主要有8个东西构成，包括：
模块（module）、组件（component）、模板（template）、元数据（metadata）、数据绑定（databinding）、指令（directive）、服务（service）、依赖注入（dependencyinjection）。
模板基本定义了你的应用长啥样，长得好不好看得有人看着，组件就负责管理这些模板。
长得好看没用那不就成了花瓶了么，所以还需要服务来给应用添加一些逻辑，这些东西东一块西一块的乱七八糟还真不行，我们还需要模块来打包所有的组件、服务等等。
所以说，模块就是用来打包的。
一个应用程序有很多模块打的包，一层一层的，最开始那个就叫做根模块。
我们通过引诱（其实是引导吧）根模块来启动程序。
这是官网的一照片来描述八大件是怎么互相配合的
2.2.3Typescript介绍
TypeScript是一种由微软开发的自由和开源的编程语言。
它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。
TypeScript是为大型应用之开发而设计，而编译时它产生JavaScript以确保兼容性。
语法上，TypeScript很类似于JScript.NET，另外一个添加了对静态类型，经典的面向对象语言特性如类，继承，接口和命名空间等的支持的Microsoft对ECMA-262语言标准的实现。
TypeScript是开源的，其源代码可以在Apache2License下从CodePlex获得。
这个项目由Microsoft维持，但是任何人可以通过经CodePlex项目页发送反馈，建议和bugfixes而做出贡献。
2.2.4Webpack介绍
webpack是一个模块打包器。
webpack把模块（s）连同它的依赖一起打包生成包含这些模块的静态资源。
webpack依赖树中有两个依赖类型：
同步和异步。
异步模块切分成一个新的的块。
在块树（chunktree）优化之后，文件会为每个chunk发文件。
webpack可以处理javascript本身，但loader用来将其它资源转换为javascript。
这样以来，所有资源都被格式化成模块了。
webpack有一个智能解析器，它能处理几乎所有的第三方库。
它甚至允许你在依赖中你像这样加表达式require（"
./templates/"
+name+"
.jade"
）。
它可以处理最常见的模块化标准风格：
CommonJS和AMD。
3游戏框架的搭建
在正式开始编写项目之前，需要将项目中用的提前下载好，搭建适合编码的环境，这样才有利于项目的管理和以后的维护。
3.1Node.js的安装
Node.js是一个基于ChromeJavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。
Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
在Node.js官网上下载并安装，Node.js有许多不同版本，本项目使用的是版本是6.10.2，查看Node.js版本可通过命令行输入"
node-v"
若出现版本号即代表安装成功也知道了安装的版本。
3.2package.json的配置
安装完Node.js就不得不说npm，npm就是nodejs的包管理和分发工具，package.json是他的一个重要文件，package能做什么事情呢：
1、相当于你本地项目的一个文档说明。
2、允许你指定你项目中所使用的node包的版本。
3、构建你的项目更加容易，便于给其他人共享。
一个典型的package.json文件如下所示
{
"
name"
:
my_package"
//项目名称，全部小写，不能有空格，一个单词，允许-和_.
version"
1.0.0"
//项目版本号，最好遵守GNU版本号管理。
main"
index.js"
//目录中启动文件名称。
或者称之为入口文件，一般都是index.js
scripts"
{
test"
echo\"
Error:
notestspecified\"
&
&
exit1"
//一般默认一个test的空文件夹、用作写测试代码。
},
keywords"
[],//项目的关键词。
一般用不到，发布npm才用得到。
author"
ag_dubs"
//作者名称
license"
ISC"
//协议
repository"
{//用来存放到版本管理远程服务。
发布npm才有用
type"
git"
url"
https:
//github./ashleygwilliams/my_package.git"
dependencies"
{//正式使用时，依赖的包
my_dep"
^1.0.0"
devDependencies"
:
{//开发或者测试时，依赖的包。
my_test_framework"
^3.1.0"
}
bugs"
{//同repository
//github./ashleygwilliams/my_package/issues"
homepage"
//github./ashleygwilliams/my_package"
//项目主页、发布才有用
}
3.3Webpack配置
前面已经介绍了Webpack，Webpack十分强大，下面是项目的Webpack的详细配置
consthelpers=require（'
./helpers'
）;
constwebpackMerge=require（'
webpack-merge'
//用于合并WebPACK配置
constwebpackMergeDll=webpackMerge.strategy（{plugins:
'
replace'
}）;
constcommonConfig=require（'
./mon.js'
//开发的设置
/**
*WebPACK插件
*/
constAddAssetHtmlPlugin=require（'
add-asset-html-webpack-plugin'
constDefinePlugin=require（'
webpack/lib/DefinePlugin'
constNamedModulesPlugin=require（'
webpack/lib/NamedModulesPlugin'
constLoaderOptionsPlugin=require（'
webpack/lib/LoaderOptionsPlugin'
*WebPACK常数
constENV=process.env.ENV=process.env.NODE_ENV='
development'
;
constHOST=process.env.HOST||'
0.0.0.0'
//设置项目运行ip地址
constPORT=process.env.PORT||3000;
//设置端口号
constHMR=helpers.hasProcessFlag（'
hot'
constMETADATA=webpackMerge（commonConfig（{env:
ENV}）.metadata,{
host:
HOST,
port:
PORT,
ENV:
ENV,
HMR:
HMR
constDllBundlesPlugin=require（'
webpack-dll-bundles-plugin'
）.DllBundlesPlugin;
*webpack配置
*
module.exports=function（options）{
returnwebpackMerge（commonConfig（{env:
ENV}）,{
/**
*开发工具，以加强调试
devtool:
cheap-module-source-map'
*影响编译输出的选项。
output:
*输出目录为绝对路径（必填）。
path:
helpers.root（'
dist'
）,
*指定磁盘上每个输出文件的名称。
filename:
[name].bundle.js'
*ThefilenameoftheSourceMapsfortheJavaScriptfiles.
sourceMapFilename:
[file].map'
/**非登录块的文件名作为相对路径
chunkFilename:
[id].chunk.js'
library:
ac_[name]'
libraryTarget:
var'
module:
rules:
[
/*
*CSS加载支持CSS文件（样式目录）
test:
/\.css$/,
use:
['
style-loader'
'
css-loader'
],
include:
[helpers.root（'
src'
styles'
）]
*scss加载
/\.scss$/,
sass-loader'
]
plugins:
*用于开发具有调试日志或添加全局常量的
*Environmenthelpers
newDefinePlugin（{
ENV'
JSON.stringify（METADATA.ENV）,
HMR'
METADATA.HMR,
process.env'
NODE_ENV'
}）,
newDllBundlesPlugin（{
bundles:
polyfills:
core-js'
name:
zone.js'
zone.js/dist/zone.js'
zone.js/dist/long-stack-trace-zone.js'
ts-helpers'
],
vendor:
angular/platform-browser'
angular/platform-browser-dynamic'
angular/core'
angular/common'
angular/forms'
angular/http'
angular/router'
angularclass/hmr'
rxjs'
dllDir:
dll'
webpackConfig:
webpackMergeDll（commonConfig（{env:
[]
}）
newAddAssetHtmlPlugin（[
{filepath:
helpers.root（`dll/${DllBundlesPlugin.resolveFile（'
polyfills'
）}`）},
vendor'
）}`）}
]）,
*Plugin:
NamedModules
升级会员 