Web APP-2048游戏.docVIP

实 习 设 计（论文） 题目名称 Web APP-2048游戏 学生学部（系） 机电与信息工程学部 专业班级 学 ?号 学生姓名 指导老师 2015 年 01 月 25 日 目 录 1概念 1.1游戏背景1 1.2游戏开发1 1.3论文内容安排1 2 功能设计 2.1界面设计2 2.2游戏架构 3 结果展示 3.1游戏开始界面11 3.2游戏结束界面13 4 结论 4.1结论心得14 5 参考文献 5参考文献14 1 概述 1.1 游戏背景 《2048》的祖先是一款名为《Threes》（中文名为《小3传奇》）的手游。《小3传奇》的两位开发者花了近一年半时间才开发出这个游戏的核心玩法，却在其上架App store后仅21天就被《1024》抄了过去。最让人意想不到的是，《2048》则更为迅速，19岁的Gabriele Cirulli只用了一个星期改编前两者游戏，却获得最大的成功，《Threes》却不被人知。 而到了现在，这类游戏从发布到现在，不管是App Store还是Android市场，下载量已经远远超越了千万，网上各种版本的都有，比如朝代版，后宫版，甲乙丙版，生肖版等。 1.2 游戏开发 由于本人十分喜欢《2048》这款手游，所以我就想电脑浏览器也能玩这款游戏，javascript和jQuery知识通过网上现有的资料尝试完成此次课程的开发，让这款游戏同时支持电脑浏览器和手机浏览器 1.3论文内容安排 要开发这一款游戏，要根据以下几步来完成： 首先是要对这款游戏的代码分析。对整一个游戏，要将各个部位分割成其对应部位的功能代码，并且逐一去分析实现其中不同的功能。 其次是游戏的流程。在做好每一个部分的代码之后，就需要把所创造的各个关键部分拼接起来，因此，就需要先把该游戏的流程一步一步的弄清楚。 再者是对《2048》这一款游戏的算法分析。对于整个游戏而言，最主要的心脏就是这一款游戏的算法。《2048》这一款游戏的算法分为上下左右自个方向的。 《2048》中每个格子的数据和颜色的刷新。在每一次移动之后，几乎在这4*4的每一个方格上的数据都会变化，因此在每一次移动之后，每一个方格上的数据都要刷新一次。相对的，每一个数的背景颜色是不同的，也就是说，在每一次数据刷新的时候，每一个方格上的颜色也要同样的刷新一次。 最后是可不可以继续游戏的检测。当屏幕上没有没有写有数据的方格并且屏幕上的数据没有哪两个相邻的数据是一样的两个数，那么就判定为游戏结束。 2 功能设计 2.1 设计界面 在设计整个2048游戏之前先得设计一个2048的游戏界面，有了游戏界面，才能够进行2048这一款游戏的下一步设计，这是创建2048小游戏的最基础的步骤。 2048这一款游戏的界面是4*4方格的，于是就需要在界面上设置4*4的方格，有了这些方格之后才能在方格上面装数字，然后才能继续游戏。 main.js部分代码：function newGame(){ init();//初始化棋盘 } function init(){ for (var i = 0; i 4; i++) { for (var j = 0; j 4;j++) { var gridCell=$(#grid_cell_+i+_+j); gridCell.css(top,getTop(i,j)); gridCell.css(left,getLeft(i,j)); } } support.js部分代码： function getTop(i, j) { var top = cellSpace + i *( cellSpace + cellSideLength ); return top; }function getLeft(i, j) { return cellSpace + j *( cellSpace + cellSideLength ); } 2.2 游戏架构 2.3 游戏设计 游戏逻辑 定义board数组，调用updateBoardView();变量board的值NumberCell元素进行操作，动态的把NumberCell到index.html中。 function updateBoardView(){$(.number_cell).remove(); for (var i = 0; i 4; i++) { for (var j = 0;