【基于HTML5的弹珠游戏设计与实现8900字（论文）】

基于HTML5的弹珠游戏设计与实现摘要目前伴随着当代我国社会经济和国民经济的不断迅猛发展,人们的物质现代化生活条件水平不断逐步得到极大改善和提高。人们的生活品味也慢慢地从对物质的追求转向了对精神的追求。随着当代电子计算机的普及,一种全新的娱乐方式就此产生,我们称它为网游。网游凭借着它独特魅力而吸引了很多的民众,据科学表明,恰当的玩会游戏不仅能够使人心情愉悦,还能够锤炼人们的反应协调能力,并且它的发展不但使国家获得了大量税收,同时也促进了我国文化产业的巨大发展。本设计是基于网页设计的一款弹珠打砖块游戏,非常的便利,它采用了B/S结构,实现了可以以积分来闯关等功能。通过这篇论文我们就可以了解本个弹珠游戏的开发流程及实现原理,同时声明本篇论文还可以为系统再次开发或者优化提供一个参考。关键词：弹珠游戏;JavaScript;HTML5目录TOC\o"1-3"\h\u134881.绪论 １绪论1.1引言通过我国现代科学与技术的不断进步,让人们的劳动力以及生产方式都发生了翻天覆地的变化。如今社会已经慢慢的开始充分利用我国现代社会处于不断发展的移动互联网技术和计算机信息技术,设计研发了各种最新的网络信息服务和信息管理系统,给我国人们带来了一种史无前例的生活方式。REF_Ref28781\r\h[1]网络游戏已经逐渐成为许多年轻人休闲娱乐的一种主要方式,使用过微软操作系统的年轻人和用户,对于弹珠击中砖块这项游戏都一定不会陌生,因为它实际上是一款很好玩的游戏,而且该项游戏的操作简单,老少均等。REF_Ref28882\r\h[2]整个游戏从意义上看就是一款容易轻松上手的通过弹球击败每个砖块的游戏,你只有在消灭所有的砖块之后你自己才能顺利地过关,充满了紧张但又快乐的气氛,游戏中既会给每个单位的用户带来快乐也同样会给每个单位的用户解除掉下各个功能方面的负担,游戏在开发过程中还希望能不断培养和训练每个用户。REF_Ref28938\r\h[3]1.2选题的背景和意义随着现代我国使用现代移动信息网络科技的飞速进步与不断发展,现在随着使用智能计算机、平板等软硬件的广泛应用逐渐普及以及使用智能机等移动通信设备的各种通信功能已经不只有简单地连接联系人和拨打手机电话、接收手机短信。REF_Ref28938\r\h[4]更多的企业用户都在期待着他们可以在日常工作、学习之余还能借助方便、灵巧的电子设备进行娱乐和学习。REF_Ref29733\r\h[5]所以,为了满足当代社会大部分人的需要,我专门设计出一个适合所有人群的并且具有闯关性和交互性的网页游戏。REF_Ref29029\r\h[6]如今的社会,是一个快节奏、忙碌的社会,人们工作以及学习压力重如泰山,生活节奏也慢慢的跟不上社会的步伐,据我调查后发现绝大部分的人群都没有足够的时间在忙碌的生活中对自己进行放松。本次设计的这款基于网页的弹珠游戏,可以让他们在忙碌的生活中适当的放松自己,缓解生活给他们带来的巨大压力。REF_Ref29029\r\h[7]我们这个弹珠游戏的主要特点之一就是其主要介绍的界面简单、美观,使得人赏心悦目,可以培养和增强一些网络游戏人员的兴趣。我们设计的这款游戏的主要特点就是上手容易,可以使玩家快速的适应。REF_Ref29088\r\h[8]恰当的玩会游戏不仅能够使人心情愉悦,还能够锤炼人们的反应协调能力,并且它的发展不但使国家获得了大量税收,同时也促进了我国文化产业的巨大发展。REF_Ref29297\r\h[9]1.3游戏行业发展现状据资料显示,计算机游戏最早出现应该是1972年,当时虽然还没有游戏这个概念,但是已经具有了游戏的雏形。在之后的数十年之中,游戏产业的发展也是极其的迅速。从刚刚开始的蜘蛛纸牌、祖玛等游戏,从而发展到现在的动作格斗类、射击类等大型游戏。经过不断地更新进化,无论从技术方面,还是画质方面还有用户体验上,都在不断突破、不断进步。经过时间的推移,游戏玩家也越来越多,据统计截至目前为止全球最少有26亿游戏玩家,数量呈现爆炸式增加,所以,对于游戏的研发也得到了很多人的认可。REF_Ref30043\r\h[10]如今全球最大的娱乐产业毋庸置疑的就是游戏产业。游戏玩家的数量决定了游戏行业的收入,以量变而达到质变,就我国目前而言,游戏玩家更是数不胜数，就论手游王者荣耀，收入在不断提高，我国的游戏行业慢慢的成为了市场经济增长的主生力量,成为我国经济支柱产业之一,提高了我国市场经济的增长。游戏产业的发展是时代的必然趋势，也会向更好的方向发展。REF_Ref30171\r\h[12]由此得到结论,游戏产业可以给玩家带来娱乐,也可以推动国家的经济发展。随着游戏的不断发展，大型游戏也越来越多，大型游戏的功能增多、体验感更好、画面的质量提升,从而占用的内存也越来越大，导致电子设备配置不是特别好的玩家无法正常使用。当然还有一些游戏必须得玩家充钱才可以正常玩,不充值的用户就无法正常的体验这个游戏，很差劲。还有一些所谓的游戏，打着游戏的旗号，却窃取了用户的基本信息，从而进行倒卖。REF_Ref30337\r\h[14]经过上面的长篇大论，我设计研发的这个弹珠游戏操作容易上手，占用内存小，体验感和娱乐性强，更重要的是安全性高，对于游戏玩家来说还是可行的。1.4论文的主要结构本篇论文我一共划分了五个章节，跟大部分人一样，首先第一章是绪论，主要介绍本系统的研究背景和研究意义，展示本篇论文的研究方向。第二章是论述了设计本游戏期间所运用的各种技术和开发工具，方便在撰写论文的同时再次温习相关技术。第三章的主题为需求分析，我分为了可行性分析、功能需求分析和非功能性需求分析，其中可行性分析从技术、硬件以及市场对本设计进行了系统的分析，证明本设计的可行性;第四章就是对本设计进行了一个详细的讲解,对系统的研发理念、设计原理和结构都进行依次说明,可以使大家更清楚明了的知道本设计的基本原理和操作流程。第五章是对本设计进行一个系统的测试，对所有的功能点进行了一一测试，对用例也进行了相关测试，最后对所有的测试结果进行了系统的分析。随后就是撰写完成后对自己的总结，撰写过程中参考的文献。最后对帮助过我的老师以及同学进行致谢。游戏开发技术介绍2.1JavaScript简介javascript(以下缩写"js")指的是一种高质量、低重度的函数优先级或者是即时编译的类型来进行解释性或者是即时执行的编程语言。虽然它主要是因为开发web网站页面的脚本语言而闻名,但它也被广泛应用到了许多其他的非浏览器编程环境中,javascript主要是基于最初的编程动态脚本语言,并且它还支持面向对象、命令式和声明等风格。javascript这个词是1995年brnetscape公司推出的产品brendaneich,在移动手机上进行网景导航引擎和手机导航员网页浏览器上公司进行了第一个引擎设计和开发实现。因为netscape与nesun公司进行了一次合作,netscape的公司管理层因为想要其它的外观和整体形式都成为能让人看得到或者类似于的java,所以把它重新命名之意为类似javascript。然而其实际上其它的语法结构风格和表达方式更加非常接近例如self和例如scheme。javascript的主要国际化衡量标准之一是也就是ecmascript。到2012年,所有网页浏览器都已全部能够继续支持一个ecmascript5.1,而且一个老版的浏览器至少也还能够继续支持一个ecmascript3标准。2015年6月17日,ecma国际组织在中国北京公开宣布推出了对于旧版ecmascript的第六个修改版,正式版的命名称之为旧版ecmascript2015,但是一般又可以称之为新版ecmascript6或者为es2015。REF_Ref30690\r\h[17]JavaScript是属于网络脚本语言，被大多数的网页用来改进和设计页面，验证表单元素，检测浏览器版本，还可以动态的对HTML元素进行增删改查。可以依据已有的HTML,用JavaScript语言来对页面进行交互式设计。最重要的是JavaScript语言属于轻量级的脚本语言，还是面向对象的，占用内存小，实现的功能强大，特别适合用户对页面进行功能性的设计，可以给HTML添加动态的文字，对浏览器的事件做出反应，是由文档对象模型(以下缩写"DOM")和浏览器对象模型(以下缩写"BOM")组成。最大的特点就是上手容易，跨平台性强，适应性强，所以当代社会越来越多的程序员喜欢用JavaScript，但是也有缺点，就是它的编译模式是直接由浏览器进行解析的，安全性较差，属于直译语言。2.2CocosCreator介绍CocosCreator是一款以游戏内容设计制作与游戏创造为主要技术开发核心的移动网络游戏技术研究与应用开发工具,它在原有cocos2d-x的技术基础上已经完成了全新的游戏脚本可视化、构建式和移动数据中心驱动等多项功能。REF_Ref30795\r\h[19]图2-1cocoscreator工作流程图在研究与开发的第一个阶段,cocoscreator已经是一个可以做到的能够为我们的用户带来非常高的工作效率与有创意性的提高,然而我们为客户提供的研究与开发工作流却远远局限于我们研究与开发的层面。对于成功网络游戏来说,开发与运行的调试、商业化sdk的设计与集成、多平台的软件发布、测试、上线等一整套工作流程都是缺一不可,而且还会需要人员经历多次的迭代与再现。cocoscreator将整套移动手机网络页游的解决方案全部整合到了编辑器的工具里,无需再在多款软件之间漫步穿梭,只要通过打开cocoscreator编辑器,各种简单一键的完成自动化流程便可以花费尽量的时间和精力,解决以上所有的问题。那么开发人员就会能够把注意力放在开发的第一个阶段,提高他们的产品竞争力与创造性!REF_Ref30840\r\h[20]CocosCreator功能上的突出特色包括：1、脚本中我们可以很容易地声明自己是一个可以随时地调整数据属性的用户名称,对于参数的调整也是可以让设计师和用户自己独立地做。2、支持免费智能化的多画布图的适配及免费可编程的多元素的对齐采用ui操作系统,并且用户能够完美地将其适配到任何一个屏幕分辨率高的显示设备例如显示屏。3、专门针对2d浪漫游戏而量身设计的一款综合性浪漫动画制作系统,支持各种动漫剧情轨迹的动态预览和各种复杂的动画曲线特效剪辑等动画功能。4、采用了动态编程语言所支持的脚本进行开发,其中包括javascript和typescript,使得对动态编程器和移动设备的远程调试都变得异常轻松。5、底层由cocos2d-x演化而来,在使用者享受到系统的脚本化和开发便捷性的同时,保持了原生等级的轻量、高性能。2.3HTML5简介html5是作为html下一个主要进行修改的最新版本,现在仍然还只是处于整个版本开发过程中的一个初级阶段。其主要的目标之一便是尽快完全取消1999年所我们正在研究和制定的两个html4.01和4.xhtml1.0标准,以期在我国移动端和互联网上的信息处理技术及其应用迅速发展进步的的时候,使得移动网络应用标准要求能够尽快达到完全满足当代社会人们的移动网络应用需要。

html5具备两个主要的优势:首先,强化版的web5对网页的整体视觉效果呈现显示性能。其次,追加了本地化和数据库等同于web三类应用的管理功能。在广义上我们在再次讨论html5的时候,所指的html5是html5、css3的组合。它是构建网页内容的一种语言方式，是互联网的核心技术之一，被广泛的应用于互联网的开发，它是HyperTextMarkupLanguage5

的缩写，符合当前网络时代的发展，相对于以前来说，html5的语法特征更为明显，更加的语义化，印赠了很多标签以及表单元素，还新增了对视频内容、音频内容、图像内容、动画内容和设备的交互性的处理，加了地理定位和绘图画布以及数据存储即本地存储。并且废弃了一些元素。总结概括HTML5有以下优点：1.对本地离线存储有了更好的支持;2.新增了许多新的标签,对开发人员定义网页内容有重大的帮助;3.对站点内容带来了更多的多媒体元素;4.更好的的替代Flash;5.可移植性增强;总结概括HTML5有以下缺点：1.不能被浏览器更好的支持，因为新标签的引入，各个浏览器还未进行更新，缺少一种统一的数据描述格式，对用户体验不好;游戏需求分析当确定了要开发一个项目之后,就必须先对整个项目进行一个系统的分析，确保项目的可行性。它是目前被广泛应用于计算机程序设计之中,也是本身这个项目要完整开发的重要依据。需求分析的主要目的就是为了解决遇到一个问题，应该怎么做，怎么解决。什么样的人才能真正成为主要竞争目标就是制度。在这一步,程序员们就可以通过数据搜索和分析收集所有用户所填写的数据情况,并把所有掌握收集的信息进行录入系统,然后在进行审核,审核完成后达到所要求的规范。在前期项目的需求分析显得极其重要,据我了解我国在开发项目的历史上,程序员都轻看了需求分析的重要性,没有人去耗费时间来对项目进行相关的需求分析,随着社会的发展，时间的推移,检验是实现原理的唯一标准，慢慢的它进入了人们的视线,程序员才意识到需求分析的重要性，因为只有有了对项目进行了具体的需求分析才能够将项目具有的功能和性能进行一个整体的规范，这样才能为项目后期的程序开发打下良好的地基。3.1可行性分析可行性分析是在做一个项目之前，要对整体项目进行一个测评，看整个项目是否值得继续往下执行，如何执行，是项目决策的一种综合的考量方法。可行性分析对于整体项目的研发有着非常重大的意义，它可以使研发人员避免很多误区，节省时间和精力，来对项目做出更好的优化和改进，可以提前预测到项目研发过程中所遇到的难题，提前解决。3.1.1技术可行性分析在技术上,本个弹珠游戏是采用javascript语言、CocosCreator游戏引擎在网页端来进行开发的,CocosCreator游戏引擎可以直接在内部解决了开发本游戏的各类图形和动画，用javascript语言里面的本地存储进行对用户的登陆注册，积分的统计并进行排名存储。真正意义的实现一次性开发,以后运行方便。经过上面的阐述,证明本游戏还是具备相当的技术可行性。3.1.2硬件可行性分析在系统的硬件方面,本游戏的实现需要一台配置好并且具有所有必须配置的软件和其他相应的软件和设备的电脑;对内存的要求小到可以忽略，甚至可以说只要是一台可以正常运行的电脑，就可以运行本系统。经过上面的阐述,证明本游戏还是具备相当的硬件可行性。3.1.2市场可行性分析在国际市场方面,游戏产业在经过时间的不断推移,它的发展相当的迅猛，游戏的研发已经成为了一股主流，但是随着游戏的不断发展，大型游戏也越来越多，大型游戏的功能增多、体验感更好、画面的质量提升,从而占用的内存也越来越大，导致电子设备配置不是特别好的玩家无法正常使用。当然还有一些游戏必须得玩家充钱才可以正常玩,不充值的用户就无法正常的体验这个游戏，很差劲。还有一些所谓的游戏，打着游戏的旗号，却窃取了用户的基本信息，从而进行倒卖。然而本游戏操作上手简单、安全性强，对于电子设备的配置要求低，不需要氪金，是一款非常利民惠民的游戏。经过上面的阐述,证明本游戏还是具备相当的市场可行性。3.2功能需求分析一个典型的弹珠打砖块游戏主要功能有：（1）登录注册（2）可以选择开始游戏或查看排行榜。（3）当用户进入游戏时,用户每打掉一个砖块,系统会自动增加一个积分,没关都要将界面上所有砖块打没,才能过关,当每次过关时用户可以选择回到主页或者继续游戏。游戏操作说明：（1）运行操作说明:用户通过鼠标左键来发射一个弹球,鼠标的移动来控制一块木板的移动。（2）游戏规则：一款容易上手的弹球打砖块游戏,用户需要消灭所有的砖块才能过关,当用户进入游戏时,用户每打掉一个砖块,系统会自动增加一个积分,没关都要将界面上所有砖块打没,才能过关,当每次过关时用户可以选择回到主页或者继续游戏。弹珠打砖块这个游戏的功能操作基本流程的主框图结构如下图3.1所示。图3.1游戏流程图3.3非功能需求分析在对一个项目进行可行性分析时，程序员们通常会忽略这个至为关键的一步，也就是非功能性需求分析，它是指在满足用户的功能需求外还要满足的其他特性，它所涉及的方面非常广泛，以下是我对本游戏的非功能需求分析:安全性本游戏不会窃取任何用户玩家的基本信息，只需要注册账号密码即可，就可以进行游戏体验，在安全方面还是值得一提的。（2）操作性在操作方面是非常容易上手的，只需要用户玩家运用鼠标对挡板进行控制弹珠的格挡操作，只要多玩几次就可以熟练掌握本弹珠游戏的精华所在，操作性还是非常简单的。（3）画面流畅性在画质这方面，本游戏做的还是不错的，因为一个游戏的画面流畅性决定了用户玩家对游戏的体验感，如果画面质量不好，很差劲，就会造成用户流失。所以本游戏还是在画质方面进行了大量的优化，保证用户玩家游戏体验感。（4）适应性因为玩家的电脑配置环境肯定不是千篇一律的，本游戏是适用于所有环境，具备一定的设备适应性。（5）低耗性本游戏的内存占用比例非常小，不会对用户的电子设备造成卡顿，消耗性能低，给用户带来极佳体验。游戏设计实现4.1游戏设计原则在设计本个基于HTML5的弹珠游戏时,必须要严格遵循以下原则：1、易用性。在项目开发之前就已经进行了大量的需求分析和对市场的用户玩家进行了调研工作，充分的考虑到了很多细节，使得用户玩家在游戏实际操作的各个环节进行了准备，很容易的对本游戏进行上手操作。2、降低了容错率。本页面的实际非常的人性化，为了避免用户玩家在操作时发生错误，页面排版非常简单易懂，会指引提示用户玩家进行下一步操作，降低了游戏操作的容错率，提升了游戏的娱乐性和体验感。3、合理性。本游戏在设计方面非常的合理，能够让每个用户对本游戏的操作习惯进行充分的适应。4、设计的美观。本游戏在页面排版上设计了一个色彩非常完美的背景图，让人赏心悦目，极大的降低了用户玩家的视觉疲劳，在音效方面，在每次用户玩家击打完砖块后都会有一次类似于钢琴的提示音，悦耳动听，延长了游戏玩家的时长，非常的人性化。4.2游戏实现界面1、弹珠游戏的登录界面。本游戏登录界面如下图4.1所示。图4.1游戏登录界面2、游戏首页界面,在首页用户可以选择点击开始游戏就可以进行游戏,也可以选择点击排行榜，对历史玩家得分排行进行查看。游戏首页界面如下图4.2所示。图4.2游戏首页界面3、游戏排行榜界面,本界面对用户玩家在游戏后获得积分进行排名，格式为用户名加积分。游戏排行榜界面如下图4.3所示。图4.3游戏排行榜界面4、游戏成功通关界面,用户玩家在通过一个游戏关卡时,就会弹出本个界面，可以选择点击继续闯下一关卡,或者点击返回到首页界面。游戏成功通关界面界面如下图4.4所示。图4.4游戏成功通关界面5、游戏过程中的界面,这是游戏在正常运行时所在的界面，如下图4.5所示。图4.5游戏过程中的界面

游戏测试在一个项目研发的最终阶段就是对整个项目进行一个测试工作，它也是项目开发的最重要的一个基本步骤，它关系着本个项目以后的发展，并且只有经过测试之后才能知道本项目有没有满足用户玩家的各类功能需求和性能需求，是检验一个项目成功与否的重要依据。在测试阶段必须要做到工作严谨，按照严格的规范来进行测试，测试的目的就是看看项目能否正常的运行，在运行过程中是否会出现各种bug,如果出现bug,就针对当前bug进行修复调试，直到没有任何问题，使整个项目可以行云流水的运行。这个测试只能说是尽少的减少bug，因为整个项目不可能没有问题，因为bug越少，项目发生错误的几率就越小，增强用户玩家的游戏体验。以下我是对项目进行了功能测试和用例测试:5.1功能测试一般来说，对项目进行功能测试有很多种方法,而我是从以下五个方面来进行功能测试,分别为适应性、准确性、可操作性、依从度和安全性。整个项目的功能测试结果如表5-1所示:表5.1项目功能测试测试内容测试结果适应性好准确性好可操作性好依从性好安全性好5.2用例测试测试用例是指对整个项目的测试任务的一种描述。以下给出了本弹珠游戏的操作的测试用例。项目用例测试如表5-2所示。表5.2项目用例测试用例名称用例操作预期结果测试结果游戏启动无需操作游戏顺利进入主界面符合预期开始游戏点击开始游戏按钮可以进入游戏运行界面符合预期通过对本弹珠游戏的运行结果进行测试,游戏正常运行测试界面如下图5.1所示：图5.1游戏运行测试界面5.3测试结果分析经过以上的综合测试之后，不难发现，本弹珠游戏已经满足了用户玩家的功能需求，所有的功能点都已经顺利完成测试，可以正常运行，操作上手简单，页面简洁明了，整个游戏运行性能正常，是一款适合用户玩家娱乐的基于HTML5的弹珠游戏。

总结在经过这一段时间的辛苦研发之后这个项目基于HTML5的弹珠游戏的设计与实现,最终以成功收尾，所有的关于弹珠游戏的功能点均已实现，符合了游戏玩家的需求。本次研发工作,使我自己在实践中已经能够很好地直接学习到和运用并得到了许多以前放在书本上我们都可能无法完全正确掌握的管理基础知识,提高了我对于问题解决实际处理问题之后处理的基本应用性和技巧。比如说在设计排行榜时,因为不会计算弹珠碰壁反弹,专门学习,查找资料,解决相关问题。由于这款游戏的研发时间相对来说比较短,因此在本次设计中仍然可能存在着或多或少的缺陷,还需要日后进一步的完善。本次毕业设计让我把大学四年中学到的知识都融会贯通，并且通过本次实践取得了相当的成绩，也让我学会了怎么在去上网查找相关资料,在遇到一些坎坷时，如何去解决，保持一个良好的心态来面对挫折。对于我来说，这次毕业设计让我成长了很多，相信对于日后的工作来说是非常有帮助的。 

参考文献夏志海.基于JavaScript的手机游戏坦克大战的设计与实现[D][D].哈尔滨工业大学,2013.邢芳,张小钦.基于JavaScript的三消类游戏的设计[J].科技广场,2013(5):113-115.ItterheimS,LöwA,ChewB.LearnCocos2DGameDevelopmentwithIOS5[M].Apress,2011.魏博.基于JAVA跨平台引擎的趣味篮球游戏设计与开发[D].西安电子科技大学,2014.王飞.计算机图形学基础[M].北京：北京邮电大学出版社,2004.1段兴.VisualC++实用程序100例[M].北京：人民邮电出版社,2002.12路颜铭.从跨平台到3D技术,JAVA的进化之路[J].程序员,2014(9):88-89.李春雨.计算机图形学理论与实践[M].北京：北京航空航天大学出版社,2004.2霍常伟.基于cocos2d-x引擎的移动游