水果忍者网页游戏论文.docx

水果忍者网页游戏论文.docx

《水果忍者网页游戏论文.docx》由会员分享，可在线阅读，更多相关《水果忍者网页游戏论文.docx（33页珍藏版）》请在冰豆网上搜索。

水果忍者网页游戏论文

本科毕业论文（设计）

题目：

基于HTML5的水果忍者

网页游戏的开发

学院：

软件技术学院

专业:

数字媒体艺术

姓名：

赵婷婷

指导教师：

李晓娜

2014年5月30日

摘要

互联网技术不断革新，用户对于应用的要求在不断提高，使得技术标准也在不断进步。

HTML5的产生使得互联网有了很大进步，在此平台上,互联网更加成熟完善，数据传输更加安全可靠，用户操作更加方便.

本课题是基于HTML5技术来制作一个新款网页版的“水果忍者”游戏,用户可以直接从浏览器中打开进行切水果游戏。

这个网页游戏采用了HTML5中用于控制声音、程序接口的最新技术，如Audio。

服务器采用新型框架Nodejs，使用Javascript语言来进行编译，用到了大量和HTML、CSS相关的专业知识。

虽然HTML5标准还不是很成熟稳定，还不能真正将其普及。

但该游戏不仅让我巩固了大学四年学到的知识，也加深了我对计算机编程的进一步审深入了解.

关键词：

HTML5，网页游戏，水果忍者

ABSTRACT

AsthedevelopmentoftheInternettechnologyisincreasingandourrequirementtotheapplicationisrising，thestandardoftechnologymakesprogress.TheproduceofHTML5makesInternetbecomebetter,andinthisplatform,thedataismoresafetoshare。

BasingontheenvironmentofWeb，thesubjectistousetheHTML5createaWebeditionof”fruitninja"game。

Afteropeningit,weareabletodirectlyplayit。

Thegameoperatessomelatesttechnologytocontrolthevoiceandtheprograminterface，suchasCanvasandAudio.ThegameusesNodejstocomplish，andituseJavascripttoprogram.Meanwhile,thesubjectinvolvessomeknowledgeaboutHTMLandCSS。

ThoughHTML5stillcan'tbecompletelycommercial,thegamecannotonlymakemeconsolidatetheknowledgeduringthefouryears，butalsodeepenourcomprehensionofcomputerprogramming.

Keywords：

HTML5，Webgame，fruitninja

第一章绪论

1.1课题的目的和意义

当今社会，互联网在不断发展进步,随之人们的生活也不断变化，由于互联网的各种服务带来各种方便，人们的生活质量不断提高。

互联网的受重视程度逐渐加大,出现更多的开发者去创造和改善它，互联网革新的速度越来越快。

为了适应用户的各种需要,新的模式和新的技术层出不穷，这对于新的公司也是新的挑战。

在这机会和挑战并存的开放环境中，互联网吸引着越来越多的公司去创业。

在计算机行业，虽然要求的成本低，但是技术壁垒确实非常高。

一些陈旧或者较低的技术自然而然会被大家淘汰,全新的技术和服务就会占领互联网市场.在这种竞争环境下，HTML5这种全新的技术标准产生了,它的高性能对用户十分有吸引力。

同时,HTML5出现的时间并不久，还需要继续革新，更加完善，才能吸引更多用户，在竞争中不断壮大。

在这个互联网时代，网页的各种标准不断改进，其中进步最大的就是HTML5，通过这一标准的改变，网页的格式内容都有了革新。

不仅如此，各种形式的音频视频有了一定的标准格式，使得网页设计更加成熟。

虽然HTML5是刚刚新起的，有很多方面还不是很成熟，但它干预突破传统技术的不足，很多模式在不断创新，这对于互联网来说是里程碑.不知传统意义上的电脑，手机和平板也需要进一步改进网页标准，改革旧的技术，创造新的交互式软件和应用。

未来人们生活的各方各面可能都会用到互联网，所以对网页技术的革新实际上就是对时代的变革，而研究HTML5就是研究互联网的关键一点。

该课题是对TML5这一最新技术的实践，性能比照之前的WEB技术更加富有前瞻性，性能也更加优越.在这种互联网革新速度如此之快的时代，这种新技术无疑可以衍生出新的应用，带来更高的商业价值.在计算机诞生后不久，各种游戏软件就相应产生,在它不断吸引用户的同时，用户对游戏的要求在不断提高.游戏从刚开始的单机型发展到大型网游，现在又向操作方便快捷的小型网页游戏转变。

本课题就是适应用户的这种需求,该水果忍者网页版游戏，可以在网页中直接打开运行，跨浏览器兼容,并且可用在任何ASP.NET开发中。

1。

2国内外发展现状

HTML从产生到现在已有20年左右,已经历了多个年代的发展。

最初HTML是在90年代以因特网草案产生的，在短短的几年里，它经历了2。

0版、3.2版以及4.0版和4.01版。

渐渐的,HTML的掌控权到了万维网的手中。

就在大众都认为这时的HTML技术已没办法再次突破，就没有特别重视了.在此同时，标记语言XML和XHTML受到大众的关注，取代了HTML的重要位置。

虽然它没有处于最受重视的位置，但依然普遍使用，很多的网站依然是基于HTML使用的。

为了力挽狂澜，HTML需要克服已有的优点,创造新的功能,展现自己顽强的生命力。

为了使Web平台能够达到一个新的高度，一组对此感兴趣的人成立了Web超文本应用技术这一工作组,这个技术工作组发现了HTML中最为薄弱至关重要的地方,即开发新的应用功能，这样WEB2。

0诞生了，其导致了Web的时代更迭。

一些传统的静态网站在新一轮的竞争汇总被具有更强特性的新的动态网站击败，因为用户难已拒绝这些新网站的强大功能.全世界的浏览器厂家纷纷在全球性的规范尚未出现时,便已经纷纷竭尽全力来升级HTML5来支持新的功能。

首先进入HTML的是W3C在2006年的时候，之后公司在两年之后公布了一个HTML5的初稿，一年之后，技术组即停止了工作。

HTML5从全世界各大浏览器公司获取的第一手资料帮助了HTML5更好的完善己身的功能，它的改进巨大，并且在不断的完善当中。

现在在一些国际大公司以及手机移动客户端产品的促进下，新的HTML5规范正在逐渐趋向于最终版本，并即将得到非常广泛的推广.

HTML5将服务器的发展也推向了一个顶峰，在客户端取得飞速发展的同时，众所周知，起初CGI（即在物理上运行在服务器上一段程序网关接口）提供最初的客户端使用HTML页面接口，再到之后的J2EE这种类型标准开发框架，普及到广大企业的软件标准，衍生到再之后的Linux这类型的帮助构建形成动态网页的软件，它们通过组合，努力增强在一起的兼容性，提高了效率，更加强打Web应用程序平台由此诞生了。

一种基于Ruby语言的Web应用开发框架可以绷住用户开发,部署新的Web应用。

在HTML5出现后，诞生的新的服务器架构,使我们的技术圈发生了翻天福地的变化。

在本课题的研究过程中我们使用了一个最新的架构Nodejs，这样的一个JS运行和愿景，包含了其对GooogleV8殷勤的封装，这样JavaScript环境,在V8引擎的帮助下，速度大大提高,性能也得到了极大改善，由于Nodejs强大的对于一些用例的优化功能,即使是在一些非浏览器环境下面也能运行的非常好。

Nodejs这种开发架构帮助JS在服务器端运行的非常便捷，其在非阻塞式的编程中借助的JS的函数式编程特性帮助编程更加容易。

1.3课题主要的内容和功能介绍

1.3.1水果忍者游戏介绍

水果忍者这款游戏自上市以来收到大众的关注,一直很受欢迎，在游戏软件中的排名很靠前。

本课题设计的游戏与平时玩的水果忍者很接近，游戏的画面感计较真实，有很多种水果，如草莓、苹果、西瓜和桃子，在白色的刀切开水果时果汁会很真实的溅出来，被切开的水果的果肉也很逼真。

通过切开水果，玩家能感受到一定的刺激感以及视觉享受。

通过鼠标的移动，电脑上会有相同方向的白色刀光产生,伴随着刀子切开水果会产生划破的声音，这样产生的效果更加刺激。

虽然这款游戏的规则简单，但是不容易得到高分。

本游戏设计的是经典玩法，没有时间限制，只要不落下水果不到三个并且不切到炸弹就会无穷玩下去。

在画面的右上角会显示三个深蓝色的叉号，漏掉一个水果就会有一个叉号变红，当到达三个叉号都变红的时候就提示游戏结束了。

当玩家切中了忽然出现的炸弹时，游戏就结束了，画面上会显示返回主菜单去。

又要保证尽量把水果都切到，又要躲过所有的炸弹,这不是一件容易的事情，既要反映快,又要大胆心细。

玩这款游戏其实可以讲究一些技巧，这样就会得分高一点。

一般把鼠标的位置放在计分处的下面一点，这里是水果上升的最高点,所以把鼠标放在这更能轻易的切开水果。

如果水果和炸弹是并在一起一块出现的,不要轻易去切，因为这样容易切到炸弹，本着宁愿错过一个也不能切到炸弹的原则,要等到它们下落时等分开再去切.对于刀的切割方向,建议横着去切，因为如果竖着切很容易切到下面突然出现的炸弹，而且横着切容易多切几个水果。

如果很多水果被一起抛起来的时候,应该先去切体积较小的水果，因为体积小的水果更快的往下落而且需要更精准去切，可能花的时间长一点。

还有一个技巧是，最好不要出一个就去忙着切一个,这样会弄的手忙脚落,而等到水果在一条直线上再切就会更准确一点。

1。

3。

2游戏特点

首先，该游戏最大的特点就是简单。

其他的游戏大部分会有很多关卡,过了第一关才能进入下一关，但是该游戏没有设置任何关卡，只需要简单的滑动鼠标去切水果.而且,水果忍者的创意来源很偶然，一位员工看水果刀推销的电视广告上，商家为了向观众展示自己卖的刀具很锋利，就把准备好的香蕉往上一抛,然后用推广的刀具将这个香蕉从空中切开.这个员工就在公司星期五活动上向大家说出了这个创意，得到大家的认可后，仅用了很短的时间，Halfbrick公司就推出了这款风靡一时的水果忍者游戏。

其次,该游戏的细节方面很到位。

尽管电脑的画面显示大小是有限的，而且规则简单，但是该游戏的每一个细节做得很到位。

在切到水果的时候,果汁溅出来的细节很逼真，画面效果使用户感到很大快感。

对于一个休闲类的游戏好不好玩的定义，通常会是这个游戏能不能很快学会.如果是一个从来没有接触这个游戏的用户第一次玩,他会很自然的用刀去切水果，并且如果切到炸弹游戏结束时自然而然就知道下次要躲开炸弹,并不需要看很久的教程。

在用户切水果的时候,不仅可以体会到成功的喜悦，也能释放内心的压力，更甚,如果用户很巧妙的躲避了炸弹，或者自己感觉没碰到炸弹而爆炸了,这样一惊一喜也是很好的体验.

还有一点,该游戏对用户吸引力很强。

有一个案例是,有个商人本来对游戏非常不感兴趣，认为这些游戏都是小孩才会去玩的，但是当他接触到水果忍者这个游戏的时候，他一下子迷上了，并且在推荐给自己的妻子时，一向对游戏更嗤之以鼻的妻子也玩上瘾了.这样一个对用户吸引力很强的游戏，必须经过很好的推广才能流行起来，这就需要做到很好的营销。

在这款游戏刚刚推出的时候，开发者的家人和朋友在推荐下都去试玩,这一不错的游戏即刻就受到他们很好的反映。

这样在公司的大力推广下，口碑很不错，渐渐很多人对这款游戏就熟悉了。

高质量的产品一向能得到很好的效果，所以这款游戏持续很久在游戏下载排行榜上名列第一。

1.3。

2与其他水果忍者游戏区别

本款“水果忍者"网页版游戏在音效上模仿了原版，所以在玩者刚一进入游戏的时候，会有似曾相的感觉。

原版的水果忍者游戏有三个不同的模式可选，经典模式和本游戏比较相似,就是画面中不断出现各种水果掺杂着炸弹，允许有三次以下水果落下的机会并且一切到炸弹就会结束.禅模式会规定时间，在时长一分半的时间里一直出现水果而没有炸弹.街机模式也有时间的限制,是一分钟，在这一分钟里，水果和炸弹都会出现,但是和经典模式很大不同之处是，如果在这个模式下切到炸弹游戏不会结束只会扣分,当然也有一些其他的加分项目之类的。

虽然这款游戏与原版游戏相比，游戏只是完成了最简单的经典模式的切水果功能,并没有设置连切奖励,也没有其他模式这一选项,加分项目也只是一个水果加一分这么简单等等。

但是本款游戏最大的好处就是可以直接在浏览器上打开，在Chrome浏览器下运行很顺畅，在IE9下也还运行正常。

这种网页版游戏对于玩者来说，既方便又顺畅,玩起来还是有很多乐趣的。

这个基于HTML5的网页游戏一定会不断进步，在未来既可以实现网页直接打开的简单快捷,又能包罗原水果忍者游戏的模式变化和功能齐全。

第二章相关技术简介

本课题用到的中心技术就是HTML5，这是目前来说最具先进性的客户端，之前只是一个网管接口，通过不断改进，兼容度不断提高，成为一个功能完善的平台.另外一项较先进的技术就是Nodejs,它作为Javascript编程语言的中一个特殊平台,能够在很多时间内构建网络应用。

实际上，它对GoogleV8浏览器进行了封装，所以在Chrome浏览器下，运行Javascript的时间比较短，运行很流畅。

2。

1HTML5标准简述

HTML5包含了HTML、CSS和JavaScript，它是一种技术综合，是目前网页的最新版本。

在表现性能上，它比以往的技术更加高,在继承以往功能的同时又增加了连接本地数据库和其他新应用的功能。

其本身还在开发和充实之中，并不是很完善。

它现在渐渐实现了并朝着这样一个方向前进，就是使一些复杂的技术体系可以变得简单便捷。

例如，很多例如技术体系，对AdobeFlash的一个必要条件，及OracleJavaFX运行，就是必须以插件形式插在浏览器。

但是，HTML5不需要这么繁琐,它提供的一些网络标准集，便可以满足用户这方面的需求。

除了HTML原有的标记外，HTML5还创造了一些新的标记元素，如〈canvas>和〈video〉。

通过增加矢量图形这种新型功能，集成了SVG.通过这些创新，当处理网页中的视频、音频或者图形时会更加方便。

还有一些标记的引入使得数据信息更加充实丰富，在加载数据时画面更加真实，当然还有其他属性也起到了相同的效果。

在增加这么多新属性新元素的同时,对以前的一些不合适的元素进行修改和淘汰,也是一项必不可少的工作.对于这些标签的重新改进之后，HTML5更是精华版的技术组合了。

现在，HTML5的核心部分包括API以及文档对象模型DOM。

不仅如此，它还对非法文档带有一定的纠错功能.例如在客户端程序中出现语法错误时，它会对其进行提示,以便于处理.

HTML5改进了很多原有的元素，使之产生新的功能和用法，适应现代网站的特点。

这些新提供的标签有些类似于原有的一些,但在速度或者功能上略有不同。

下面介绍几个典型的标记。