Web APP-2048游戏.doc
《Web APP-2048游戏.doc》由会员分享,可在线阅读,更多相关《Web APP-2048游戏.doc(16页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、 实 习 设 计(论文)题目名称 Web APP-2048游戏 学生学部(系) 机电与信息工程学部 专业班级 学 号 学生姓名 指导老师 2015 年 01 月 25 日目 录1概念 1.1游戏背景-1 1.2游戏开发-1 1.3论文内容安排-12 功能设计2.1界面设计-2 2.2游戏架构-4 2.3游戏设计-4 3 结果展示 3.1游戏开始界面-11 3.2游戏结束界面-134 结论 4.1结论心得-145 参考文献 5参考文献-141 概述1.1 游戏背景2048的祖先是一款名为Threes(中文名为小3传奇)的手游。小3传奇的两位开发者花了近一年半时间才开发出这个游戏的核心玩法,却在其
2、上架App store后仅21天就被1024抄了过去。最让人意想不到的是,2048则更为迅速,19岁的Gabriele Cirulli只用了一个星期改编前两者游戏,却获得最大的成功,Threes却不被人知。而到了现在,这类游戏从发布到现在,不管是App Store还是Android市场,下载量已经远远超越了千万,网上各种版本的都有,比如朝代版,后宫版,甲乙丙版,生肖版等。1.2 游戏开发由于本人十分喜欢2048这款手游,所以我就想在电脑的浏览器也能玩这款游戏,在此次课程论文的制作过程中,我将运用我学习到的知识以及javascript和jQuery知识通过网上现有的资料尝试完成此次课程的开发,让
3、这款游戏同时支持电脑浏览器和手机浏览器。1.3论文内容安排要开发这一款游戏,要根据以下几步来完成:1) 首先是要对这款游戏的代码分析。对整一个游戏,要将各个部位分割成其对应部位的功能代码,并且逐一去分析实现其中不同的功能。2) 其次是游戏的流程。在做好每一个部分的代码之后,就需要把所创造的各个关键部分拼接起来,因此,就需要先把该游戏的流程一步一步的弄清楚。3) 再者是对2048这一款游戏的算法分析。对于整个游戏而言,最主要的心脏就是这一款游戏的算法。2048这一款游戏的算法分为上下左右自个方向的。4) 2048中每个格子的数据和颜色的刷新。在每一次移动之后,几乎在这4*4的每一个方格上的数据都
4、会变化,因此在每一次移动之后,每一个方格上的数据都要刷新一次。相对的,每一个数的背景颜色是不同的,也就是说,在每一次数据刷新的时候,每一个方格上的颜色也要同样的刷新一次。5) 最后是可不可以继续游戏的检测。当屏幕上没有没有写有数据的方格并且屏幕上的数据没有哪两个相邻的数据是一样的两个数,那么就判定为游戏结束。2 功能设计2.1 设计界面在设计整个2048游戏之前先得设计一个2048的游戏界面,有了游戏界面,才能够进行2048这一款游戏的下一步设计,这是创建2048小游戏的最基础的步骤。2048这一款游戏的界面是4*4方格的,于是就需要在界面上设置4*4的方格,有了这些方格之后才能在方格上面装数
5、字,然后才能继续游戏。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 + cellSideLeng
6、th ); 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; j 4
7、; j+)$(#grid_Container).append();var theNumberCell=$(#number_cell_+i+_+j+);if (boardij=0) theNumberCell.css(width, 0px);theNumberCell.css(height, 0px);theNumberCell.css(left, getLeft(i,j)+cellSideLength/2);theNumberCell.css(top, getTop(i,j)+cellSideLength/2);elsetheNumberCell.css(width, cellSideLeng
8、th);theNumberCell.css(height, cellSideLength);theNumberCell.css(top,getTop(i,j);theNumberCell.css(left,getLeft(i,j);theNumberCell.css(color,getNumberColol(boardij);theNumberCell.css(background-color,getBackgroundColor(boardij); theNumberCell.text(boardij)hasConflictedij=false;$(.number_cell).css(lin
9、e-height,cellSideLength+px)$(.number_cell).css(font-size,0.6*cellSideLength+px)$(.number_cell).css(border-radius,0.1*cellSideLength);/获取数字的背景颜色function getBackgroundColor(number) switch (number) case 2: return #eee4da;break; case 4: return #ede0c8;break; case 8: return #f2b179;break; case 16: return
10、 #f59563;break; case 32: return #f67c5f;break; case 64: return #f65e3b;break; case 128: return #edcf72;break; case 256: return #edcc61;break; case 512: return #9c0;break; case 1024: return #33b5e5;break; case 2048: return #09c;break; case 4096: return #a6c;break; case 8192: return #93c;break; return
11、 black;function getNumberColol(number) if (number = 4) return #776e65; ; return white;页面初始化定义函数generateOneNumber();在16个格子中随机找一个格子生成一个数字function generateOneNumber() if (nospace(board) return false; /取随机位置var randx=parseInt(Math.floor(Math.random()*4);var randy=parseInt(Math.floor(Math.random()*4);var
12、 times=0;while(times50)if(boardrandxrandy=0)break;var randx=parseInt(Math.floor(Math.random()*4);var randy=parseInt(Math.floor(Math.random()*4);times+;if (times=50) for(var i=0;i4;i+)for(var j=0;j4;j+)if (boardij=0) randx=i;randy=j;var randomNum= parseInt(Math.floor(Math.random()*4) +1;if (randomNum
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web APP-2048游戏 APP 2048 游戏
限制150内