知网查重

基于JS的飞机大战游戏设计与实现

发表日期:2020-02-03 00:28:20   编辑:zoneques

  第1章 绪论

  Web(WWW,World Wide Web),因特网主要服务之一[1]。它给人们的日常工作、学习活动、休闲娱乐和信息交流都带来了极大的方便。正如其他领域的编程语言一样,JS是面向Web的编程语言之一。在现代社会,绝大多数的网站使用JS技术构建网站。基于桌面游戏,游戏机,平板电脑和智能手机,几乎所有现代浏览器都包含解析JS语言解释器。ECMAScript,由ECMA(European Computer Manufacturers Association)组织制定,是JS的统一规范。因此,可以使用JS在所有领域中开发项目。例如,Web前端开发,Web后端开发、网络开发,移动开发,混合应用程序开发等等。伴随HTML5新技术、世界科技的蓬勃发展,在游戏领域中,以JS为基础编写、依赖浏览器运行环境的游戏,游戏玩家的群体数量不停地在发展壮大。依托于移动端、iPad和PC端,H5给予JS在游戏领域提供了强大的的发展动力。

  第2章 游戏需求分析

  2.1 游戏功能需求

  1)游戏开始界面,有“开始游戏”、“游戏设置”、“游戏帮助”和“退出游戏”等功能按钮可供用户点击选择;

  2)用户点击功能按钮,进入二级界面后,可以返回游戏开始界面;

  3)通过自由地控制鼠标的移动,达到控制用户飞机四个放心移动的效果;

  4)用户飞机可以发射子弹;

  5)不同种类的敌机;

  6)用户飞机击杀敌机,可以得到相应的得分;

  7)子弹和敌机超出游戏窗口,会被自动删除;

  8)用户飞机被撞击或主动撞击,都会减少生命值;

  9)用户飞机生命值为零,游戏结束;

  10)分数积累到一定程度,子弹会升级;

  11)击杀大飞机,会有奖励;

  12)用户可以一直看到当前的分数;

  13)游戏结束时,可更新最高记录。

  2.2 用户功能需求

  1)人机交互性能要好,操控简单,易上手;

  2)游戏复杂度较低,无特性要求,能轻易地掌握游戏玩法。

  2.3 美工音效需求

  1)背景图要求:风格清新;

  2)用户移动鼠标到按钮上时,提示用户当前为按钮;

  3)进入二级界面,要求有提示性信息;

  4)用户可在游戏开始前,可选择是否播放背景音乐;

  5)敌机击毁的过程,需要一个演示动画;

  6)游戏结束,游戏界面需要停留在用户飞机击毁最后时刻的游戏画面。

  2.4 游戏性能需求

  1)实时性:游戏需要用户做出实时操作,否则用户飞机会被敌机撞毁;

  2)易操作性:用户不需要查看游戏说明书也能快速掌握游戏的玩法。

  第3章 设计要求及开发工具

  3.1 设计要求

  3.1.1 音效

  为凸显“战场”的情况讯息万变,需要背景音乐能随机播放。游戏默认不开启背景音乐,用户可人性化去选择开启。

  3.1.2 功能按钮

  点击每一个按钮,能实现相应的功能。比如:开始游戏、结束游戏、查看游戏说明书、开启背景音乐、返回游戏开始界面、重新开始游戏等。

  3.1.3 用户飞机

  用户飞机有且仅有一架,由用户通过鼠标进行控制。用户飞机移动范围为整个画布的范围,鼠标移出画布的时候,游戏会进入暂停状态。用户飞机生命值有上限,每次初始化时,为三点,击杀大飞机时,会自动获得一点生命值。用户飞机被敌机撞击或者用户飞机主动撞击敌机时,生命值减少一点。用户飞机失去生命值后,只要生命值不为零,就能再次生成。生命值为零时,游戏结束。

  3.1.4 子弹

  子弹出现的位置基于用户飞机,故,当用户飞机移动时,子弹也跟着移动,不断地绘制子弹出来,产生发射子弹的效果。子弹出现的时间有一定间隔,移动的速度有一定限制。子弹与敌机发生碰撞事件,敌机生命值减少,子弹消失。子弹未能击中敌机、移动到画布边界时,自动删除。

  3.1.5 敌机

  敌机分为三种,小、中、大三种类型。小飞机数量最多,移动速度最快,能获得的分数最少。中飞机的数量、移动速度和能获得的分数都次于小飞机。大飞机在游戏窗口当中,有仅仅能同时存在一架,移动速度最慢,能获得的分数也最多。敌机的攻击手段均为自杀式攻击。敌机被击中时,生命值减少。生命值清零时,出现击毁的动画效果。敌机没有被用户飞机发射的子弹击杀,移动到游戏画布时,会被删除。

  3.1.6 碰撞

  检测用户飞机、子弹和敌机三者之间是否发生碰撞事件,是整个游戏运行的核心。当检测到发生碰撞事件时,计算出碰撞之后的结果,触发飞机击毁的动画、飞机生命值减少和累计分数的游戏效果。

  3.1.7 累计分数

  游戏进行时,每当用户飞机击杀敌机时,会不断地显示并累计当前用户得分。分数积累到一定程度,触发子弹升级的效果。游戏结束时,能更新最高记录。

  3.2 开发工具

  3.2.1 工具一:WebStorm

  WebStorm支持不同浏览器提示,包括用户自定义的函数,支持格式化代码,自定义代码编写风格规则,支持代码智能提示,加速开发速度,支持快速查找错误和优化,并给出修改意见,支持代码折叠,方便高效,支持自动提示包裹或去掉外围代码[2]。

  3.2.2 工具二:Chrome Browser

  Chrome Browser基于强大的V8引擎,提供了浏览器扩展框架,包含多线程虚拟机,可以加速JS的执行,支持CSS3和HTML5,支持W3C(World Wide Web Consortium)最新Web协议[3]。

  3.2.3 工具三:Photoshop

  Photoshop,简称PS,是由Adobe公司开发和发行的图像处理软件,PS主要处理以像素为构成单位的数字图像,PS有众多的编辑与绘图工具,可以有效地进行图片编辑[4]。

  3.2.4 工具四:Visio

  Visio,是Microsoft 公司开发的软件,当前使用的版本为Microsoft Office Visio 2003,Visio主要用于流程图的绘制[5]。

  第4章 飞机大战游戏设计与实现

  4.1 设计思路

  采用Canvas绘图技术和HTML标记的方法,结合素材图片,反复使用定时器绘制、清除刷新和再绘制游戏界面、游戏对象。这个过程采用了“沙画原理”,再绘制下一个界面前,先把当前界面清除一遍,再进行绘制行为。整个游戏的运行过程,即为不断地切换不同时间下、不同状态先、不同界面的过程。

  4.2 流程图

  4.2.1 游戏主流程

  游戏运行过程当中,按照流程触发的根据是游戏的状态属性。如欢迎、过度、运行、暂停和结束五个状态。如图 4.1游戏状态流程图所示,游戏开始,初始化完毕之后,进入欢迎状态。点击开始游戏按钮,游戏状态变更为过度状态。过度状态结束,接着进入运行状态。运行状态下,一旦发生暂停事件,游戏状态变更为暂停状态;一旦触发结束事件,游戏状态变更为结束状态,游戏结束。

  4.2.2 初始化流程

  如图 4.2初始化流程图所示,初始化时,游戏的状态变更为欢迎状态。在此状态下,用户可以设置游戏的部分功能。一旦游戏的状态变为过度状态,这些设置将被一直生效,直到重新刷新游戏状态,即重新刷新游戏。

  4.2.3 游戏内容流程

  如图4.3游戏运行流程图所示,点击游戏开始按钮时,游戏状态进入过度状态,出现过度动画,以提示用户游戏即将开始。游戏状态从过度状态变为运行状态,第一步加载用户飞机,第二步加载子弹,第三步加载敌机。加载完毕,立即开始碰撞、边界等运算数据部分。

  碰撞发生时,改变当前子弹或敌机的可删除状态,同时累计分数。子弹或敌机超出边界时,改变子弹或敌机的删除状态。根据子弹和敌机的删除状态,决定下一次定时器刷新时是否可以清除。敌机生命值减少为零时,敌机的可爆炸状态、可删除状态改变,下一次定时器刷新时发生爆炸。同时,子弹可删除状态改变。等待刷新清除。

  4.3 上下文对象

  包含绘制、填充和描边图形、文字、图片和线性渐变对象等方法。为了方便使用这些方法且避免反复查找、节约资源、加快响应速度和优化游戏性能,可以使用上下文对象的办法。如图4.4 CTX对象所示,把H5方法从ECMAScript方法中拿出,从H5方法中拿出Canvas绘图技术中的所有方法,全部封在一个名字叫“上下文”的对象里边,即可随时调用该对象里面封装好的功能函数。

  4.4 实现

  4.4.1 背景图

  作用:装饰游戏容器;让用户体现出用户飞机正在飞行的视觉感受。

  实现方法:绘制Canvas图像的方法。

  实现步骤(如图4.5 背景流程图所示):

  1)使用new的方式,创建背景图片;

  2)将剪切好的背景图片路径赋给new方法创建的背景图片;

  3)将图片路径及背景图的其他属性保存到背景图片对象当中,等待使用背景图构造函数实例化;

  4)new方法创建背景对象,里面是背景图构造函数实例化的背景图片对象和背景图的功能函数;

  5)当游戏进入欢迎状态后,不断地调用背景对象,创建、移动背景。

  4.4.2 功能按钮

  作用:用户点击功能按钮时,进入二级页面功能界面、操作。

  方法一:HTML的IMG标签实现按钮与Canvas绘制图片作为按钮功能。

  方法一步骤(如图4.6功能按钮流程图-1所示):

  1)在HTML页面插入按钮图片;

  2)创建数组保存从DOM中找到指定选择器的IMG标签;

  3)使用循环的方法,为IMG标签绑定事件;

  4)判定当前IMG的节点(可设置id属性或者自定义属性保存节点名称),用于区分不同功能入口;

  5)点击按钮,打开相应二级页面,实现相应功能。

  方法二: 绘制Canvas图像的方法。

  方法二步骤(如图4.7功能按钮流程图-2所示):

  1)使用new方法创建按钮图片,并将准备好的按钮图片路径赋给新创建的图片;

  2)使用Canvas的dramImage方法,将图片在绘制位置处绘制;

  3)检测按钮绘制位置和按钮宽高形成的四个边界值,判断当前鼠标是否处于按钮的范围内;

  4)为Canvas标签绑定事件,当鼠标点击按钮时,触发按钮绑定的事件。

  注意:

  1)Canvas绘制的图片和文字无法绑定事件,只能在Canvas上绑定事件;

  2)四个界限值为绘制位置的X、Y坐标与比较对象宽、高的和差;

  3)只有鼠标位于当前按钮的范围内点击,方能响应事件;

  4)此方法绘制的按钮,若不限制响应事件的区域,会造成整个Canvas都能响应事件的现象。

  4.4.3 背景音乐

  作用:实现游戏音效需求,增加用户体验度。

  方法一:使用H5标签Audio(该标签默认不隐藏)。

  方法一步骤(如图4.8音乐流程控制-1所示):

  1)在HTML页面新建Audio标签;

  2)更改Audio标签的SRC属性,实现曲目的切换;

  3)通过对Audio标签的控件,控制曲目的播放、暂停、隐藏控件等。

  注意:

  1)使用Audio标签之后,可以不依赖Flash插件,就能播放音乐;

  2)Audio可以播放歌曲格式为ogg和MP3;

  3)Audio有兼容性问题,不同浏览器支持的歌曲格式不同,但都支持ogg,故,需要把ogg格式的歌曲文件放在最后面。

  方法二:使用H5标签Video(该标签默认隐藏)。

  方法二步骤(如图4.9音乐流程控制-2所示):

  1)在HTML页面新建Video标签;

  2)更改Video标签的SRC属性,实现曲目的切换;

  3)通过对Video标签的控件,控制曲目的播放、暂停等。

  注意:Video不但可以播放MP4格式的视频,也能播放MP3格式的歌曲

  方法三:使用脚本方法(不放置Audio或Video标签和引用插件)。

  方法三步骤(如图4.10音乐流程控制-3所示):

  1)在JS代码中,通过new方法新建一个Audio;

  2)通过修改Audio的src属性,切换播放曲目;

  3)检测是否可以播放,使用Audio的play和pause方法,控制播放和暂停音乐;

  4)使用定时器检测当前播放时间与总时间的差值,确定是否播放结束;

  5)使用随机数,随机更换曲目,达到随机播放的效果。

  注意:播放歌曲时,为兼容性问题考虑,可全部放置ogg格式文件。

  4.4.4 加载动画

  作用:提示用户,游戏即将在加载动画完成后开始;增加用户体验度。

  实现方法:绘制Canvas图像的方法,绘制一组连续的图片,形成动画。

  实现步骤(如图4.11加载动画流程图所示):

  1)创建一个空数组;

  2)将一组连续的图片(加载动画的动画片段)路径赋给新创建的图片,保存到空数组当中;

  3)将图片数组和加载动画的其他属性,保存在一个新对象(加载动画图片对象)中,准备实例化;

  4)将包含加载动画图片对象与加载动画方法函数的构造函数实例化;

  5)使用New方法,将实例化的构造函数保存在一个新对象(加载对象)中,方便调用;

  6)调用加载对象,绘制加载动画。

  4.4.5 用户飞机

  作用:用户操作的飞机,能发射子弹的飞机;用户的第一视角,增加用户的第一体验度。

  实现方法:绘制Canvas图像的方法,绘制一组连续的图片,形成动画;加上检测鼠标位置,实现用户飞机跟随着用户操作鼠标而移动。

  实现步骤(如图4.12用户飞机流程图所示):

  1)创建一个空数组;

  2)将一组连续图片(用户飞机飞行和爆炸的连续图片)的路径赋给新创建的图片,并保存到空数组当中;

  3)将图片数组和用户飞机的其他属性,保存在用户飞机的对象当中,准备实例化;

  4)将包含用户飞机属性、状态、方法函数和图片数组的构造函数实例化;

  5)将实例化的构造函数保存在用户飞机对象当中,准备随时调用;

  6)检测当前鼠标位置,准备绘制用户飞机;

  7)调用用户飞机对象,绘制用户飞机。

  注意事项:

  1)第一点:采用offsetY、offsetX的方法,可以获取当前鼠标的位置;

  2)第二点,在绘制用户飞机的时候,为了使得用户飞机正好处于当前鼠标的中心,需要在当前鼠标的X轴、Y轴的位置基础上,分别减去用户飞机图片宽和高的一半,使得用户飞机出现在鼠标的中间位置;

  3)第三点,当游戏的状态为运行状态时,获得并更新当前用户飞机的绘制坐标,达到用户飞机实时跟随着鼠标移动而移动的交互效果。

  注意:

  1)获取当前鼠标的位置;

  2)用户飞机出现在鼠标的中间位置;

  3)用户飞机跟随着鼠标移动的交互效果。

  4.4.6 子弹

  作用:用户体验攻击敌机第一视觉体验,增加用户体验度。

  实现方法:绘制Canvas图像的方法,绘制子弹图片。绘制的坐标以当前用户飞机为基础,实现子弹跟随着用户飞机移动而移动的交互效果。

  实现步骤(如图4.13子弹流程图所示):

  1)使用new方法,创建一个子弹图片;

  2)将子弹图片片段的路径赋给子弹图片;

  3)将子弹图片和子弹的其他属性封装在子弹图片对象当中;

  4)将子弹图片对象和子弹的属性、状态、方法函数,封装在子弹的构造函数当中,等待实例化子弹构造函数;

  5)创建一个数组,保存实例化后的子弹;

  6)调用:使用循环的方法,移动子弹数组中的全部子弹并检测和清除超出画布外的子弹。

  注意:

  1)将子弹以用户飞机的基础上,进行绘制;

  2)子弹的绘制坐标小于其宽或者高时,会被清除。

  4.4.7 敌机

  作用:用户操作用户飞机攻击的靶子,增加打击感,增加用户体验度。

  实现方法:绘制Canvas图像的方法,绘制敌机图片。

  实现步骤(如图4.14敌机流程图所示):

  1)创建三个数组;

  2)将三种敌机的图片片段路径赋给使用New方法创建敌机图片,并保存在数组当中;

  3)将敌机图片和敌机的相关属性保存在敌机种类对象当中;

  4)将敌机种类对象、敌机属性、状态和方法函数保存在敌机构造函数当中,等待实例化;

  5)敌机构造函数实例化;

  6)定义一个空数组,保存所有调用实例化后生成的敌机;

  7)使用循环的方法,移动绘制、移动和清除所有敌机;

  注意:

  1)3 种敌方飞机都需要创建;

  2)3 种敌方飞机的数量不相同,小飞机最多,中飞机一般,大飞机最少;

  3)不停地创建新的敌方飞机;

  4)存储敌方飞机的数组的第一个位置,专门用来存储大飞机;

  5)判断数组的第一个位置, 第一个位置是大飞机,不做任何处理,第一个位置不是大飞机,在此位置上创建一个大飞机。

  4.4.8 碰撞运算

  作用:检测敌机与用户飞机、子弹与敌机两个组合之间是否生成碰撞事件。

  原理:通过检测当前对象的绘制位置,与比较对象的宽高,制定4个界限值。一旦,满足条件,即在4个界限值的范围内,则发生碰撞(绘制的原点一般在左上角)。

  运算方法(如图4.15碰撞运算所示):以绘制点为参考点,若B的y坐标在y(y+Bh)和y+Ah(y+Bh+Ah)之间,且B的x坐标在x(x+Bw)和x+Aw(x+Bw+Aw)之间,则说明发生了碰撞。

  4.4.9 边界检测

  作用:循环检测敌机或子弹是否移动到画布的边界,若移动到了,则删除该子弹或敌机。

  原理:通关实时检测当前子弹或敌机的绘制坐标点,与处在画布范围内(三者的原点都为左上角)。若当前子弹或者敌机的绘制原点不在画布的范围内,则可执行删除当前子弹或敌机。

  边界检测(如图4.16边界检测所示):当A对象绘制坐标的x坐标在x和x+W之外,y坐标在y和y+H之外,说明该对象已经不能在Canvas画布中看到了,则可执行删除操作。

  4.4.10 结束界面

  作用:游戏结束之后,提示用户的相关信息。

  实现方法:Canvas绘制文字的方法。

  实现步骤(如图4.17绘制文字所示):

  1)获得要显示的文字信息;

  2)获得绘制坐标;

  3)开始绘制。

  注意:

  1)游戏结束时,应将结束时刻,游戏界面的场景绘制到游戏界面上,即出现游戏停止的效果,增加用户体验度;

  2)游戏结束时刻,应将当前分数、游戏结束和其他提示信息绘制出来;

  3)游戏结束时刻,需将当前分数与内存当中的记录比较,是否更新最高记录;

  4)游戏结束时刻,应将“重新开始”游戏按钮绘制出来,等待用户点击,再次进行游戏;

  5)绘制信息可以是文字,也可以是图片(原理同功能按钮)。

  第5章 调试和效果图

  5.1 调试

  5.1.1 方法一 console.log()、alert()和document.write()

  1)程序运行当中,查看某一个数值,采用console.log()方法。在浏览器的控制台下,监视当前值在程序运行之后的变化;

  2)中断代码执行,采用alert()方法。在浏览器窗口弹出的对话框当中监视变量的值;

  3)查看更多值,采用document.write()的方法。在浏览器文档区中输出值。

  5.1.2 方法二 try...catch...

  try {

  // 此处是可能产生例外的语句

  } catch(error) {

  // 此处是负责例外处理的语句

  } finally {

  // 此处是出口语句

  }[6]

  5.1.3 方法三 if...else...

  If(条件){ 代码块1 }

  else { 代码块2 }

  5.2 效果图

  5.2.1 游戏初始化界面效果图

  图4.18 游戏初始化界面效果图

  Fig.4.18 The Frames of Game Initialize

  5.2.2 游戏运行界面效果图

  图4.19 游戏运行界面效果图

  Fig.4.19 The Frames of Game Running

  第6章 总结与展望

  6.1 总结

  JavaScript是一种事件驱动的语言,即事件触发就执行相应的代码片段。其执行过程可以看作是一次事件从调用到返回的过程,具有单线程且不可中断的特点。定时器,不仅写起来麻烦,而且不能确保时间一定精准。代码运行,依赖并受制于运行环境。

  6.2 展望

  本游戏均采取原生JS实现游戏的功能,故能看出JS的强大之处。在未来,随着科技发展,能搭载JS运行环境的机器越来越多,应用领域越来越广,JS能随处可见。现阶段,JS不仅仅能应用在前端代码上,后台代码中,JS的分量越来越重。前端和后台的结合,诞生出全栈的概念,这是JS未来的发展趋势,也是JS开发者未来的发展方向。

  参考文献

  [1] [EB/OL].http://baike.sogou.com/v17200.htm?fromTitle=World+Wide+Web

  [2] [EB/OL].http://baike.so.com/doc/441276-467261.html

  [3] [EB/OL].http://baike.so.com/doc/5341028-5576471.html

  [4] [EB/OL].http://baike.so.com/doc/5342466-5577909.html?from=335 sid=5577909 redirect=search

  [5] [EB/OL].http://baike.so.com/doc/1385661-1464859.html

  [6] [EB/OL].http://www.cnblogs.com/luluping/archive/2011/02/14/1954092.html

  [7] [7-5327-2350-X]. (英)Tim Bermers-Lee (英)马克·菲谢蒂. 《编织万维网》. 上海译文出版社,1999,1:8.

  [8] [978-7-111-37661-3]. (美)Flanagan,D. 《JS权威指南_第6版》. 机械工业出版社,2012,2012年4月第1版,201:704.

  [9] [978-7-121-15685-4]. 王志刚,王中元,江友华. 《HTML5移动开发即学即用》. 电子工业出版社,2012,22:278.

温馨提示

声明:该文观点仅代表作者本人,本站仅提供信息存储空间服务,如有侵权请联系本站删除。