物联网工程课程设计-2048游戏改进版的设计与实现（源代码）.doc

源代码加153893706课程设计报告（ 2015 / 2016 学年 第1学期）题 目： 2048游戏改进版的设计与实现 专 业 物联网工程 姓 名 学 号 指导教师 指导单位 物联网学院 日 期 2016.01.15 评分细则评分项成绩遵守机房规章制度（5分）上机时的表现（5分）学习态度（5分）程序准备情况（5分）程序设计能力（10分）团队合作精神（5分）课题功能实现情况（10分）算法设计合理性（10分）用户界面设计（10分）报告书写认真程度（5分）内容详实程度（10分）文字表达熟练程度（10分）回答问题准确度（10分）简短评语教师签名：年月日评分等级备注评分等级有五种：优秀、良好、中等、及格、不及格2048游戏改进版的设计与实现一、 课题内容和要求2048是一款单人在线和移动端游戏，由19岁的意大利人Gabriele Cirulli于2014年3月开发的一款数字益智游戏。要求实现的最基本的功能如下： 在基本2048游戏基础上增加存档、读档和后退等功能； 改进基本2048游戏的界面美观及趣味性； 增加微博等在线社交软件的分享功能；设计并实现基于web的改进版2048游戏。二、需求分析1、引言1.1、项目背景2048是一款老少皆宜的益智游戏，由现年19岁的意大利人Gabriele Cirulli，于2014年3月将2048的开源版本放到了Github上，由此引发了风靡全球的狂潮，各种衍生版本层出不穷。1.4、参考资料W3CSchool文档、JQuery文档、GitHub上的开源项目2、 任务概述2.1、目标（1）设计并实现基于web的改进版2048游戏；（2）改进基本2048游戏的界面美观；（3）在基本2048游戏基础上增加存档、读档和后退功能；（4）增加在线软件的分享功能。2.2、运行环境Chrome浏览器，JQuery.js3、 数据概述以动态的二维数组为主，包括游戏当前显示的数据、备份的数据、存档的数据。少量的静态数据，如存档名称。4、 功能需求4.1、功能划分（1）基本功能；（2）存档功能；（3）读档功能；（4）后退功能；（5）分享功能。4.2、功能描述4.2.1基本功能在游戏开始时随机产生2个数，2或4，并将其显示出来，其余方格的值为0，并且不显示出来；通过键盘的,控制数字的移动。每次按方向键后，逐行（列）计算移动后的方格值，如有方格合并时，将其值累计到游戏总分中；一次移动结束后，在其他值为0的方格中随机生成一个2或4的值；当所有方格值不为0且无法移动时，则游戏结束。4.2.2存档功能保存当前的游戏状态，包括当前的方格数值、分数等。4.2.3读档功能读取保存的游戏状态，进行还原。4.2.4后退功能读取上一步的游戏状态，进行还原。4.2.5分享功能分享游戏。5、 运行需求最好运行在类似Chrome的浏览器上，以取得较好的显示效果。某些显示效果需要JQuery.js的支持。三、概要设计 四、详细设计/新游戏function newgame() /初始化格子 init(); /在两个格子中随机生成数字 generateOneNumber(); generateOneNumber();/游戏初始化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, getPosTop(i, j); gridCell.css(left, getPosLeft(i, j); /初始化数组并赋值为0 for(var i = 0; i 4; i+) boardi = new Array(); hasConflictedi = new Array(); for(var j = 0; j 4; j+) boardij = 0;/判断是否发生过合并 hasConflictedij = false; /备份for(var i = 0; i 4; i+) board_backi = new Array(); hasConflicted_backi = new Array(); /存档for(var i = 0; i 4; i+)board_save0i = new Array();hasConflicted_save0i = new Array();for(var i = 0; i 4; i+)board_save1i = new Array();hasConflicted_save1i = new Array();for(var i = 0; i 4; i+)board_save2i = new Array();hasConflicted_save2i = new Array();/更新数值层 updateBoardView();/重置分数score = 0;updateScore(score, score_max);/根据board变量的值对前端的theNumberCell进行操作function updateBoardView()/清空缓存 $(.number-cell).remove();/更新数值层 for(var i = 0; i 4; i+) for(var j = 0; j 4; j+)/数值层 $(#grid-container).append(); var theNumberCell = $(#number-cell- + i + - + j);/数值层是否显示 if(boardij = 0) theNumberCell.css(width, 0px); theNumberCell.css(height, 0px); theNumberCell.css(top, getPosTop(i,j) + 50); theNumberCell.css(left , getPosLeft(i,j) + 50); else theNumberCell.css(width, 100px); theNumberCell.css(height, 100px); theNumberCell.css(top, getPosTop(i,j); theNumberCell.css(left , getPosLeft(i,j); theNumberCell.css(background-color, getNumberBackgroundColor(boardij); theNumberCell.css(color, getNumberColor(boardij); theNumberCell.text(boardij); hasConflictedij = false; /在格子中随机生成一个数字function generateOneNumber()/判断是否有位置 if(nospace(board) return false; /随机一个位置 var randx = parseInt(Math.floor(Math.random() * 4); var randy = parseInt(Math.floor(Math.random() * 4); var times = 0;/加times提高运行效率，避免长时间找不到位置 while(times 20) if(boardrandxrandy = 0) break; randx = parseInt(Math.floor(Math.random() * 4); randy = parseInt(Math.floor(Math.random() * 4); times +; if(times = 20) for(var i = 0; i 4; i+) for(var j = 0; j 4; j+) if(boardij = 0) randx = i; randy = j; /随机一个数字 var randNumber = Math.random() 0.5 ? 2 : 4; /在随机位置显示随机数字 boardrandxrandy = randNumber; showNumberWithAnimation(randx, randy, randNumber); return true;/格子的按键控制$(document).keydown(function(event) switch(event.keyCode)/左 case 37: /判断是否能向左移动 if(moveLeft() setTimeout(generateOneNumber(), 210); setTimeout(isgameover(), 300); break;/上 case 38: /判断是否能向上移动 if(moveUp() setTimeout(generateOneNumber(), 210); setTimeout(isgameover(), 300); break;/右 case 39: /判断是否能向右移动 if(moveRight() setTimeout(generateOneNumber(), 210); setTimeout(isgameover(), 300); break;/下 case 40: /判断是否能向下移动 if(moveDown() setTimeout(generateOneNumber(), 210); setTimeout(isgameover(), 300); break;/其他键无响应 default: break; );/判断游戏是否结束function isgameover()/没有位置且无法移动 if(nospace(board) & nomove(board) gameover(); /游戏结束function gameover() alert(gameover!);/向左移动function moveLeft()/判断是否能向左移动 if(!canMoveLeft(board) return false;for(var i = 0; i 4; i+)for(var j = 0; j 4; j+)board_backij = boardij;hasConflicted_backij = hasConflictedij;score_back = score;score_max_back = score_max; for(var i = 0; i 4; i+) for(var j = 1; j 4; j+) if(boardij != 0) for(var k = 0; k score_max)score_max = score; updateScore(score, score_max); hasConflictedik = true; continue; /给动画留有显示时间 setTimeout(updateBoardView(), 200); return true;/向右移动function moveRight()/判断是否能向右移动 if(!canMoveRight(board) ) return false;for(var i = 0; i 4; i+)for(var j = 0; j 4; j+)board_backij = boardij;hasConflicted_backij = hasConflictedij;score_back = score;score_max_back = score_max; for(var i = 0; i = 0; j-) if(boardij != 0) for(var k = 3; k j; k-)/判断右边是否为空（或相等）且无障碍 if(boardik = 0 & noBlockHorizontal(i, j, k, board) /移动 showMoveAnimation(i, j, i, k); boardik = boardij; boardij = 0; continue; else if(boardik = boardij & noBlockHorizontal(i, j, k, board) & !hasConflictedik) /移动动画 showMoveAnimation(i, j, i, k); /相加 boardik += boardij; boardij = 0; /增加分数 score += boardik; if(score score_max)score_max = score; updateScore(score, score_max); hasConflictedik = true; continue; /给动画留有显示时间 setTimeout(updateBoardView(), 200); return true;/向上移动function moveUp()/判断是否能向上移动 if(!canMoveUp(board) return false;for(var i = 0; i 4; i+)for(var j = 0; j 4; j+)board_backij = boardij;hasConflicted_backij = hasConflictedij;score_back = score;score_max_back = score_max; for(var j = 0; j 4; j+) for(var i = 1; i 4; i+) if(boardij != 0) for(var k = 0; k score_max)score_max = score; updateScore(score, score_max); hasConflictedkj = true; continue; /给动画留有显示时间 setTimeout(updateBoardView(), 200); return true;/向下移动function moveDown()/判断是否能向下移动 if(!canMoveDown(board) return false;for(var i = 0; i 4; i+)for(var j = 0; j 4; j+)board_backij = boardij;hasConflicted_backij = hasConflictedij;score_back = score;score_max_back = score_max; for(var j = 0; j = 0; i-) if( boardij != 0 ) for(var k = 3; k i; k-)/判断下边是否为空（或相等）且无障碍 if( boardkj = 0 & noBlockVertical(j, i, k, board) /移动 showMoveAnimation(i, j, k, j); boardkj = boardij; boardij = 0; continue; else if(boardkj = boardij & noBlockVertical(j, i, k, board) & !hasConflictedkj) /移动动画 showMoveAnimation(i, j, k, j); /相加 boardkj += boardij; boardij = 0; /增加分数 score += boardkj; if(score score_max)score_max = score; updateScore(score, score_max); hasConflictedkj = true; continue; /给动画留有显示时间 setTimeout(updateBoardView(), 200); return true;/显示动画function showNumberWithAnimation(i, j, randNumber)/获取数据层元素 var numberCell = $(#number-cell- + i + - + j ); numberCell.css(background-color, getNumberBackgroundColor(randNumber); numberCell.css(color, getNumberColor(randNumber); numberCell.text(randNumber);/动画效果 numberCell.animate( width:100px, height:100px, top:getPosTop(i, j), left:getPosLeft(i, j) ,50);/移动动画function showMoveAnimation(fromx, fromy, tox, toy) var numberCell = $(#number-cell- + fromx + - + fromy ); numberCell.animate( top:getPosTop(tox, toy), left:getPosLeft(tox, toy) ,200);/更新分数function updateScore(score, score_max) $(#score).text(score);$(#score_max).text(score_max);function updateSaveFile(numbers, name)if(numbers - 1) % 3 = 0)$(#savename1).text(name);else if(numbers - 1) % 3 = 1)$(#savename2).text(name);else if(numbers - 1) % 3 = 2)$(#savename3).text(name);/定位格子元素function getPosTop(i , j) return 20 + i * 120;function getPosLeft(i , j) return 20 + j * 120;/根据board的值显示不同的背景颜色function getNumberBackgroundColor(number) switch(number) case 2:return #eee4da;break; case 4:return #ede0c8;break; case 8:return #f2b179;break; case 16:return #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; return black;/根据board的值显示不同的前景色function getNumberColor(number) if(number = 4) return #776e65; return white;/判断格子是否还有空间function nospace(board) for(var i = 0; i 4; i+) for(var j = 0; j 4; j+) if(boardij = 0) return false; return true;/判断是否能向左移动function canMoveLeft(board) for(var i = 0; i 4; i+) for(var j = 1; j 4; j+) if(boardij != 0)/判断左边的数是否为空或相等 if(boardij-1 = 0 | boardij-1 = boardij) return true; return false;/判断是否能向右移动function canMoveRight(board) for(var i = 0; i = 0; j-) if(boardij != 0)/判断右边的数是否为空或相等 if(boardij+1 = 0 | boardij+1 = boardij) return true; return false;/判断是否能向上移动function canMoveUp(board) for(var j = 0; j 4; j+) for(var i = 1; i 4; i+) if(boardij != 0)/判断上边的数是否为空或相等 if(boardi-1j =