网页版《2048游戏》教程.doc
网页版2048游戏教程1. 课程介绍1.1. 关于20482048是比较流行的一款数字游戏。原版2048首先在github上发布，原作者是Gabriele Cirulli。它是基于1024和小3传奇的玩法开发而成的新型数字游戏。随后2048便出现各种版本，走各大平台。由Ketchapp公司移植到IOS的版本最为火热，现在约有1000万下载，其名字跟原版一模一样。衍生版中最出名的是2048六边形版本，先后在全球81个国家中的board game中排进了前200。安卓版非常火爆的有挑战2048，其2.0.0版以后还加入了双人对战。其次比较特别的有2048中国朝代版。更有2048自定义版，可以自己定义文字和图片。2048是IOS中流行的一款。1.2. 游戏演示1.3. 使用技术l HTMLl CSSl Javascriptl jQuery1.4. 游戏架构l index.html：游戏页面，引入样式文件及逻辑文件顺序如下：<link rel="stylesheet" type="text/css" href="2048.css"><script type="text/javascript" src="jquery-1.11.0.js"></script><script type="text/javascript" src="support.js"></script><script type="text/javascript" src="animation.js"></script><script type="text/javascript" src="main.js"></script><script type="text/javascript" src="game.js"></script>l 2048.css：游戏样式l jquery.js：jQuery文件l support.js：游戏基础逻辑文件l animation.js：游戏动画逻辑文件l main.js：游戏主逻辑文件l game.js：游戏交互逻辑文件2. 构建页面2.1. 游戏标题2048游戏的标题包含游戏名称、开始新游戏的按钮和游戏分数等三项内容。创建游戏页面index.html：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>2048</title> <link rel="stylesheet" type="text/css" href="2048.css"></head><body> <header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">New Game</a> <p>score: <span id="score">0</span></p> </header></body></html>创建样式文件2048.css：l 设置游戏标题样式header display: block; margin: 0 auto; width: 100%; text-align: center;l 设置游戏名称样式header h1 font-family: Arial; font-size: 40px; font-weight: bold;l 设置游戏按钮样式header #newgamebutton display: block; margin: 20px auto; width: 100px; padding: 10px 10px; background-color: #8f7a66; font-family: Arial; color: white; border-radius: 10px; text-decoration: none;l 设置游戏按钮鼠标悬浮样式header #newgamebutton:hover background-color: #9f8b77;l 设置游戏分数样式header p font-family: Arial; font-size: 25px; margin: 20px auto;2.2. 游戏主体2048游戏的主体包含16个方块。编辑游戏页面index.html：<div id="grid-container"> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div></div>编辑样式文件2048.css：l 设置16个方块的主体方块样式#grid-container width: 460px; height: 460px; padding: 20px; margin: 50px auto; background-color: #bbada0; border-radius: 10px; position: relative;l 设置16个方块的样式.grid-cell width: 100px; height: 100px; border-radius: 6px; background-color: #ccc0b3; position: absolute;3. 游戏初始化3.1. 初始化棋盘格我们在main.js文件中，创建newgame()方法用于开始新的游戏。而开始新游戏需要完成两件事情，一是初始化棋盘格，一是在随机两个格子生成两个数字。$(function () newgame(););function newgame() /初始化棋盘格 init(); /在随机两个格子生成数字 generateOneNumber(); generateOneNumber();我们通过编写init()方法来完成棋盘格的初始化工作。棋盘格是一个4乘4的16块的方格，所以我们需要创建一个二位数组来表示。var board = new Array();function init() /i表示4乘4的格子中的行for (var i = 0; i < 4; i+) boardi = new Array(); /j表示4乘4的格子中的列 for (var j = 0; j < 4; j+) /将每个格子的值初始化为0 boardij = 0; /通过双重遍历获取每个格子元素 var gridCell = $("#grid-cell-" + i + "-" + j); /通过getPosTop()方法设置每个格子距顶端的距离 gridCell.css("top", getPosTop(i, j); /通过getPosLeft()方法设置每个格子距左端的距离 gridCell.css("left", getPosLeft(i, j); 完成以上步骤，我们就将棋盘格的初始化工作完成了。3.2. 初始化数字格仅仅初始化棋盘格是不够的，我们还需要一个4乘4的格子用来显示数字。而用来显示数字的格子应该在棋盘格的基础上的，所以初始化数字格的updateBoardView()应该在初始化棋盘格的init()方法最后来执行。function updateBoardView() /首先清空之前的数字格布局内容$(".number-cell").remove(); for (var i = 0; i < 4; i+) for (var j = 0; j < 4; j+) /向棋盘格上增加数字格 $("#grid-container").append("<div class='number-cell' id='number-cell-" + i + "-" + j + "'></div>"); var numberCell = $("#number-cell-" + i + "-" + j); /如果棋盘格的值为0的话,设置数字格为高宽都为0 if (boardij = 0) numberCell.css("width", "0px"); numberCell.css("height", "0px"); numberCell.css("top", getPosTop(i, j) + 100); numberCell.css("left", getPosLeft(i, j) + 100); /如果棋盘格的值不为0的话,设置数字格为高宽为75并设置背景色和前景色及数字值 else numberCell.css("width", "100px"); numberCell.css("height", "100px"); numberCell.css("top", getPosTop(i, j); numberCell.css("left", getPosLeft(i, j); numberCell.css("background-color", getNumberBackgroundColor(boardij); numberCell.css("color", getNumberColor(boardij); numberCell.text(boardij); /设置数字值的字体样式 $(".number-cell").css("line-height", "100px"); $(".number-cell").css("font-size", "60px");我们还需要在2048.css样式文件中，为number-cell数字格设置一些样式。.number-cell border-radius: 6px; font-family: Arial; font-weight: bold; font-size: 60px; line-height: 100px; text-align: center; position: absolute;数字格被初始化完毕之后，我们在页面效果上是看不到的。所以，我们要使用火狐浏览器的Firebug工具来查看是否初始化成功。3.3. 随机生成数字数字格初始化完成之后，我们需要做的就是在两个随机的数字格中生成两个随机的数字即可。这个需求我利用generateOneNumber()方法来完成，完成这个方法需要进行四步完成：第一步判断当前的格子是否是空的，如果不为空则返回false，否则返回true。function generateOneNumber() if (nospace(board) return false; return true;第二步随机一个格子。function generateOneNumber() /随机一个x坐标的位置 var randx = parseInt(Math.floor(Math.random() * 4); /随机一个y坐标的位置 var randy = parseInt(Math.floor(Math.random() * 4); /定义一个死循环,完成生成随机空格子 while (true) /如果当前格子的值为0,满足条件 if (boardrandxrandy = 0) break; /否则重新随机一个位置 var randx = parseInt(Math.floor(Math.random() * 4); var randy = parseInt(Math.floor(Math.random() * 4); 第三步随机一个数字。function generateOneNumber() /随机一个数字 var randNumber = Math.random() < 0.5 ? 2 : 4;第四步在随机格子中显示随机数字。function generateOneNumber() /在随机位置显示随机数字 boardrandxrandy = randNumber; /实现随机数字显示的动画 ShowNumberWithAnimation(randx, randy, randNumber);3.4. 初始化基础逻辑在初始化棋盘格和数字格时，我们使用了getPosTop()方法和getPosLeft()方法来完成距顶端和距左端的距离设置。function getPosTop(i, j) return 20 + i * 120;function getPosLeft(i, j) return 20 + j * 120;在初始化数字格时，我们使用了getNumberBackgroundColor()方法来设置数字的背景色，使用getNumberColor()方法来设置数字的前景色。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; case 4096:return "#a6c"break; case 8192:return "#93c"break; function getNumberColor(number) if (number <= 4) return "#776e65" return "white"在生成随机数字时，我们使用nospace()方法来判断当前格子是否为空。function nospace(board) for (var i = 0; i < 4; i+) for (var j = 0; j < 4; j+) if (boardij = 0) return false; return true;3.5. 初始化动画逻辑在生成随机数字时，我们使用ShowNumberWithAnimation()方法来完成随机数字显示的动画逻辑。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);4. 游戏逻辑4.1. 捕获键盘事件2048游戏的操作主要是依靠键盘的上、下、左、右来完成，首先我们需要在game.js文件中捕获键盘响应的事件。$(document).keydown(function (event) switch (event.keyCode) case 37:/left break; case 38:/up break; case 39:/right break; case 40:/down break; default : break; );键盘事件捕获到后，我们需要完成具体的游戏逻辑。首先，我们以向左移动为例，分析一下向左的事情逻辑内容。首先，我们需要判断是否可以向左移动，这里我们使用if判断语句完成。$(document).keydown(function (event) switch (event.keyCode) case 37:/left if (moveLeft() break; case 38:/up break; case 39:/right break; case 40:/down break; default : break; );如果可以的话，我们需要做两件事情：一件是生成两个新的随机数字，这个逻辑我们使用之前编写的generateOneNumber()方法完成；一件是判断当移动之后游戏是否结束，这个逻辑我们编写isgameover()方法完成。$(document).keydown(function (event) switch (event.keyCode) case 37:/left if (moveLeft() generateOneNumber(); isgameover(); break; case 38:/up break; case 39:/right break; case 40:/down break; default : break; );4.2. 完成移动逻辑下面我们以向左移动为例，来讲解具体的移动逻辑内容，完成moveLeft()方法逻辑。首先，我们需要判断是否可以向左移动，我们使用canMoveLeft()方法来完成。function moveLeft() if (!canMoveLeft(board) return false; return true;如果可以向左移动的话，第一步，遍历数字格，判断除第一列外有哪些数字格的值是不为0的。function moveLeft() if (!canMoveLeft(board) return false; /moveLeft for (var i = 0; i < 4; i+) for (var j = 1; j < 4; j+) if (boardij != 0) return true;第二步，遍历当前值不为0的数字格左边数字格。function moveLeft() if (!canMoveLeft(board) return false; /moveLeft for (var i = 0; i < 4; i+) for (var j = 1; j < 4; j+) if (boardij != 0) for (var k = 0; k < j; k+) return true;第三步，向左移动逻辑还要分成两种情况，一种是当前值不为0的数字格左边的数字格必须值为0并且中间的数字格必须值也为0，一种是当前值不为0的数字格与左边的数字格值相等并且中间的数字格必须值也为0。/判断当前值不为0的数字格左边的数字格必须值为0并且中间的数字格必须值也为0if (boardik = 0 && noBlokHorizontalCol(i, k, j, board) continue; /判断当前值不为0的数字格与左边的数字格值相等并且中间的数字格必须值也为0else if (boardik = boardij && noBlokHorizontalCol(i, k, j, board) continue;如果是当前值不为0的数字格左边的数字格必须值为0并且中间的数字格必须值也为0，具体逻辑如下：/moveshowMoveAnimation(i, j, i, k);boardik = boardij;boardij = 0;如果是当前值不为0的数字格与左边的数字格值相等并且中间的数字格必须值也为0，具体逻辑如下：/moveshowMoveAnimation(i, j, i, k);/addboardik += boardij;boardij = 0;/add scorescore += boardik;updateScore(score);当完成向左移动逻辑之后，我们需要重新初始化数字格布局。updateBoardView();4.3. 游戏基础逻辑在完成移动逻辑代码时，我们使用了canMoveLeft()方法来判断是否可以向左移动。我们将此方法定义在suppot.js文件中。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;在完成移动逻辑代码时，我们使用了noBlokHorizontalCol()方法来判断当前数字格左边的数字格是否值为0。function noBlokHorizontalCol(row, col1, col2, board) for (var i = col1 + 1; i < col2; i+) if (boardrowi != 0) return false; return true;4.4. 游戏动画逻辑在完成移动逻辑代码时，我们使用了showMoveAnimation()方法来实现数字格移动的动画逻辑，此方法我们定义在animation.js文件中。function showMoveAnimation(fromx, fromy, tox, toy) var numberCell = $("#number-cell-" + fromx + "-" + fromy); numberCell.animate( top: getPosTop(tox, toy), left: getPosLeft(tox, toy) , 200);5. 游戏优化5.1. GameOver部分下面我们来分析游戏是如何结束的。一种情况是棋盘格中没有空的格子了，一种情况是棋盘格中没有可以移动的格子了。首先，完成isgameover()方法的逻辑。function isgameover() if (nospace(board) && nomove(board) gameover(); 其次，完成棋盘格中没有空的格子。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 nomove(board) if (canMoveDown(board) | canMoveLeft(board) | canMoveRight(board) | canMoveUp(board) return false; return true;最后，完成游戏结束的逻辑。function gameover() alert("gameover!");5.2. 加入Score下面，我们增加游戏分数。首先，我们需要在main.js文件定义board变量后，定义score变量来表示游戏分数。在移动数字格时，如果两个数字格的值相等的话，我们就需要更新游戏分数（游戏分数为两个数字格的数字值相加）。我们以向左移动为例，下面的代码就是增加对应的游戏分数：/add scorescore += boardik;updateScore(score);在完成移动逻辑代码时，我们使用了updateScore()方法来实现游戏分数值的更新动画逻辑，此方法我们同样定义在animation.js文件中。function updateScore(score) $("#score").text(score);5.3. 让游戏和原版一致到此，我们的2048游戏中，还有一个bug。就是当一行的4个格子的值为2、2、4、8的时候，如果向左移动，原版游戏的结果为4、4、8，而我们现在的游戏为16。导致这个问题的原因是2和2合并后为4,4又和第三个格子中的4进行合并为8,8再和第四个格子里的8进行合并。而原版游戏中，只能合并一次。所以，我们还需要加以控制。首先，我们在main.js文件中，同样定义一个二维数组hasConflicted。var hasConflicted = new Array();其次，我们在init()方法中，将hasConflicted数组定义为二维数组，并初始化为false。function init() for (var i = 0; i < 4; i+) boardi = new Array(); hasConflictedi = new Array(); for (var j = 0; j < 4; j+) boardij = 0; hasConflictedij = false; 其三，我们需要在初始化数字格updateBoardView()方法中，将每一个数字格的hasConflicted的值设置为false。function updateBoardView() $(".number-cell").remove(); for (var i = 0; i < 4; i+) for (var j = 0; j < 4; j+) $("#grid-container").append("<div class='number-cell' id='number-cell-" + i + "-" + j + "'></div>"); var numberCell = $("#number-cell-" + i + "-" + j); if (boardij = 0) else hasConflictedij = false;
