2048游戏设计论文.docx

26铜 陵 职 业 技 术 学 院毕 业 设 计班级名称 13级计算机应用技术（1） 专业名称 计算机应用技术 所属系部 信息工程系 课题名称 HTML5小游戏 学生姓名 侯钰恺 指导教师 崔莹 铜 陵 职 业 技 术 学 院 教 务 处 印 制 目 录1. 绪论1.1开发背景41.2开发内容52. 游戏开发的相关技术2.1开发工具介绍6 2.1.1 visual studio 2013介绍 62.2开发运用技术介绍7 2.2.1 HTML5介绍 7 2.2.2 javascript介绍 8 2.2.3 jquery介绍 83. 功能3.1游戏功能结构图 103.2游戏代码结构114. 设计内容2048游戏代码125. 运行测试游戏过程截图 20参考文献 21结束语、致谢 22目录不是自动生成，字体宋体，字号太大，导致一行放不下！请在这里分页！ 摘 要 2048是比较流行的一款数字游戏。原版2048首先在GitHub上发布，原作者是Gabriele Cirulli。它是基于1024和小3传奇的玩法开发而成的新型数字游戏。2014年Gabriele Cirulli利用周末的时间写2048这个游戏的程序，仅仅只是好玩而已。他想用一种不同的视觉展现效果和更快速的动画来创造属于我自己的游戏版本。作者的初衷就是觉得好玩，在将其开源版本放到Github上后，意外在网络上走红。各大平台的开发者基于原版的2048开发出了各种各样的2048版本，有传统版，六边形版，朝代版，2048 3D中文版，2048后宫版等等。但是，美中不足的是该游戏的是作为移动游戏开发的，PC玩家起初是无法玩的，这次，我便把2048的原版游戏在PC通过HTML5和javascript技术来实现。该游戏保持了原版游戏的规则，由于PC端操作方式的限制，游戏暂时无法通过触控的方式来玩，玩家可以通过用鼠标模拟手指操作手机的方式来玩这个游戏。该游戏是在浏览器端实现的，推荐使用Chrome 或 火狐 浏览器的较新的版本，这样游戏的体验性会达到最好。本游戏主要采用当前最为流行的html5技术，CSS技术和javascript技术开发。Html5和 CSS3主要用来开发游戏界面，javascript主要用来编写游戏的代码，实现游戏用到的各种算法。摘要200-300字左右，写你做的事情，怎么做的，优点，缺点是什么！关键字 ：HTML5,CSS,javascript,2048,游戏格式不对 请分页 ！1. 绪论1.1 开发背景伴随着技术的革新，手机也面临着一次次的更新换代，每一次的技术革新，都将被很多人关注，手机更新的浪潮也是不断袭来。第一代iPhone于2007年发布，2008年7月11日，苹果公司推出iPhone 3G。自此，智能手机的发展开启了新的时代。紧随其后，谷歌发布了Android智能手机操作系统。随后，智能手机席卷全球，在全球各地区掀起了一股换机热潮。智能手机，顾名思义，“智能”两个字是其最大的特点。智能手机，是指像个人电脑一样，具有独立的操作系统，独立的运行空间，可以由用户自行安装软件、游戏、导航等第三方服务商提供的程序，并可以通过移动通讯网络来实现无线网络接入手机类型的总称。在第三方应用程序中，游戏占据了很大的比重。正是因此，全球的开发者近几年越来越多的转向移动游戏的开发。Gabriele Cirulli利用周末的时间写2048这个游戏的程序，起初仅仅只是好玩而已，但没想到上传到网络以后使其意外走红。但是，该游戏是为手机端开发的。鉴于有些玩家跟喜欢在PC端玩游戏，这次，我便想把2048这个风靡全球的小游戏在PC端通过浏览器在本地实现。废话太多，这个游戏是什么内容，给谁玩的，怎么玩1.2 开发内容本游戏在PC端的实现主要是依靠浏览器实现。开发平台主要采用visual studio 2013和谷歌chrome浏览器。语言主要采用了还HTML5和javascript相结合的方式，目的是为了达到更好的游戏效果。HTML5和CSS相结合构建游戏界面，借用javascript和jquery库来对游戏进行编码。2. 游戏开发的相关技术2.1 开发工具介绍 本游戏的开发工具选择visual studio 2013来进行来发。用HTML5和javascript作为主要语言，其中还用到了CSS的排版布局以及调用jquery类库。2.1.1 visual studio 2013介绍Visual Studio 2013美国软件巨头微软开发的一款功能强大的IDE，适用于各种开发人员。通过使用单个 IDE，可以创建面向 Windows、iOS、Android 等的多平台应用。 Web、移动和云开发工具 构建面向 Windows、Android 和 iOS 的应用 集成的设计器、编辑器、调试器和探查器 采用 C#、C+、JavaScript、Python、TypeScript、Visual Basic、F# 等进行编码 能够部署、调试和管理 Microsoft Azure 服务 成千上万的扩展（从 PHP 到游戏）2.2 开发运用技术介绍 2.2.1 HTML5介绍 HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、MicrosoftSilverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。格式：正文，宋体5号字，无边框，下划线等网上拷贝的格式！具体来说，HTML5添加了许多新的语法特征，其中包括、和元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如、和则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像、和被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。2.2.2 javascript介绍JavaScript是一种互联网终端的扩建的语言。它由网景的LiveScript进化而来，具有原模原样的继承、面向对象、非静态类型、分辨大小写等特点。解决服务器端语言问题是其主要的目的。增添JavaScript可以为网景的网页查看器Navigator供给检验数据的一些最基础的功用。2.2.3 jquery介绍 jQuery是开源软件，使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。jQuery有下列特色： 跨浏览器的DOM元素选择 DOM巡访与更改：支持CSS 1-3 事件（Events） CSS操纵 特效和动画（移动显示位置、淡入、淡出） Ajax 延伸性（Extensibility） 工具：例如浏览器版本（已取消内置，改由jQuery Migrate plugin外挂提供）和each函数。 JavaScript插件 轻量级jQuery 1.8.0版时（内置Sizzle.js）：文件行数大小jquery-1.8.0.min.js291KBjquery-1.8.0.js9228254KB DHTMLDOM选择器与链式语法经由jQuery的DHTML DOM选择器，可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象，并可用链式语法对同一对象的不同属性进行操作。这才是正文的格式！例如：$(p.surprise).addClass(ohmy).show(slow);相当于1. 查找HTML的标签，且其class为surprise的DHTML DOM对象2. 将其Class属性多加上一个ohmy（通常是配CSS的定义做显示时的配色修改）3. 打开显示 CSS 1-3选择器：支持CSS选择器选定DOM对象。 跨浏览器：跨浏览器的AJAX解决方式，支持Internet Explorer 6.0+、Opera9.0+、Firefox2+、Safari2.0+、Google Chrome1.0+ 简单：较其它JavaScript库更易于入门。3.功能3.1游戏功能结构图每张图都要有名称，如3.1游戏结构功能图3.2游戏代码结构： 同上 4. 设计内容2048游戏代码：此处要说明游戏怎么计算得分，最好画上流程图 ，随机数怎么得来，不是要拷贝代码！代码请单独压缩成压缩包。 /*根据移动方向做处理*/ move: function (direction) switch (direction) case up: this.moveUp(); break; case right: this.moveRight(); break; case down: this.moveDown(); break; case left: this.moveLeft(); break; , 上边： moveUp: function () /i代表行号，j代表列号 for (var j = 0; j 4; j+) for (var m = 0; m 3; m+) /最差的情况是2,0,0,0移动到最右侧需要3次，所有最差的情况是怎么样，文字说明！代码部分，左边，右边要一个即可。同理，上，下要一个代码即可。在列上做一个3次循环 for (var i = 0; i 3; i+) /把非0数字依次往上排 if (this.dataij = 0 & this.datai + 1j != 0) this.dataij = this.datai + 1j; this.datai + 1j = 0; this.slide = true; /有移动说明是可以滑动的 for (var j = 0; j 4; j+) for (var i = 0; i 3; i+) if (this.dataij != 0 & (this.dataij = this.datai + 1j) this.dataij = 2 * this.dataij; /合并 this.datai + 1j = 0; this.score += this.dataij; this.slide = true; /有合并的就说明产生的新的0位置 for (var j = 0; j 4; j+) for (var m = 0; m 2; m+) /最差的情况是0,4,0,0移动到最右侧需要2次，所有在列上做一个2次循环 for (var i = 0; i 3; i+) /把非0数字依次往上排 if (this.dataij = 0 & this.datai + 1j != 0) this.dataij = this.datai + 1j; this.datai + 1j = 0; if (this.slide) /滑动后,0的位置生成一个随机数 this.randomNum(); this.slide = false; this.repraint(); , for (var j = 0; j 0; i-) if (this.dataij != 0 & (this.dataij = this.datai - 1j) this.dataij = 2 * this.dataij; /合并 this.datai - 1j = 0; this.score += this.dataij; this.slide = true; /有合并的就说明产生的新的0位置 for (var j = 0; j 4; j+) for (var m = 0; m 0; i-) /把非0数字依次往下排 if (this.dataij = 0 & this.datai - 1j != 0) this.dataij = this.datai - 1j; this.datai - 1j = 0; if (this.slide) /滑动后,0的位置生成一个随机数 this.randomNum(); this.slide = false; this.repraint(); ,右边 ： moveRight: function () /i代表行号，j代表列号 for (var j = 0; j 4; j+) for (var m = 0; m 0; i-) if (this.dataji = 0 & this.dataji - 1 != 0) this.dataji = this.dataji - 1; this.dataji - 1 = 0; this.slide = true; /有移动说明是可以滑动的 for (var j = 0; j 0; i-) if (this.dataji != 0 & (this.dataji = this.dataji - 1) this.dataji = 2 * this.dataji; /合并两个想的数，即其中任意一个数的值乘以2 this.dataji - 1 = 0; this.score += this.dataji; this.slide = true; /有合并的就说明产生的新的0位置 for (var j = 0; j 4; j+) for (var m = 0; m 0; i-) if (this.dataji = 0 & this.dataji - 1 != 0) this.dataji = this.dataji - 1; this.da