网页版《2048游戏》教程

《网页版《2048游戏》教程》由会员分享，可在线阅读，更多相关《网页版《2048游戏》教程（21页珍藏版）》请在装配图网上搜索。

1、网页版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自定义版，可以自己定

2、义文字和图片。2048是IOS中流行的一款。1.2. 游戏演示1.3. 使用技术l HTMLl CSSl Javascriptl jQuery1.4. 游戏架构l index.html：游戏页面，引入样式文件及逻辑文件顺序如下：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： 204

3、8 2048 New Game score: 0 创建样式文件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; bac

4、kground-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： 编辑样式文件2048.cs

5、s：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. 初始化棋盘

6、格我们在main.js文件中，创建newgame()方法用于开始新的游戏。而开始新游戏需要完成两件事情，一是初始化棋盘格，一是在随机两个格子生成两个数字。$(function () newgame(););function newgame() /初始化棋盘格 init(); /在随机两个格子生成数字 generateOneNumber(); generateOneNumber();我们通过编写init()方法来完成棋盘格的初始化工作。棋盘格是一个4乘4的16块的方格，所以我们需要创建一个二位数组来表示。var board = new Array();function init() /i表示4乘

7、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, getPosLe

8、ft(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).a

9、ppend(); 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

10、.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(

11、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工具来查看

12、是否初始化成功。3.3. 随机生成数字数字格初始化完成之后，我们需要做的就是在两个随机的数字格中生成两个随机的数字即可。这个需求我利用generateOneNumber()方法来完成，完成这个方法需要进行四步完成：第一步判断当前的格子是否是空的，如果不为空则返回false，否则返回true。function generateOneNumber() if (nospace(board) return false; return true;第二步随机一个格子。function generateOneNumber() /随机一个x坐标的位置 var randx = parseInt(Math.flo

13、or(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); 第三步随机一个数字。functi

14、on generateOneNumber() /随机一个数字 var randNumber = Math.random() 0.5 ? 2 : 4;第四步在随机格子中显示随机数字。function generateOneNumber() /在随机位置显示随机数字 boardrandxrandy = randNumber; /实现随机数字显示的动画 ShowNumberWithAnimation(randx, randy, randNumber);3.4. 初始化基础逻辑在初始化棋盘格和数字格时，我们使用了getPosTop()方法和getPosLeft()方法来完成距顶端和距左端的距离设置。f

15、unction 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:retur

16、n #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:ret

17、urn #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()方法来完成

18、随机数字显示的动画逻辑。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); /设置当前的数字格的

19、显示动画 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;

20、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; );

21、如果可以的话，我们需要做两件事情：一件是生成两个新的随机数字，这个逻辑我们使用之前编写的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 brea

22、k; 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

23、(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的

24、数字格左边的数字格必须值为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的数字格左边的数字格必

25、须值为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

26、. 游戏基础逻辑在完成移动逻辑代码时，我们使用了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。f

27、unction 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-cel

28、l- + 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 nos

29、pace(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(gam

30、eover!);5.2. 加入Score下面，我们增加游戏分数。首先，我们需要在main.js文件定义board变量后，定义score变量来表示游戏分数。在移动数字格时，如果两个数字格的值相等的话，我们就需要更新游戏分数（游戏分数为两个数字格的数字值相加）。我们以向左移动为例，下面的代码就是增加对应的游戏分数：/add scorescore += boardik;updateScore(score);在完成移动逻辑代码时，我们使用了updateScore()方法来实现游戏分数值的更新动画逻辑，此方法我们同样定义在animation.js文件中。function updateScore(scor

31、e) $(#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

32、数组定义为二维数组，并初始化为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

33、 (var i = 0; i 4; i+) for (var j = 0; j 4; j+) $(#grid-container).append(); var numberCell = $(#number-cell- + i + - + j); if (boardij = 0) else hasConflictedij = false; 其四，当我们真正移动数字格，如果两个数字格的值相等时，我们需要增加当前格子是否合并后的判断。else if (boardik = boardij & noBlokHorizontalCol(i, k, j, board)&!hasConflictedik)如果

34、当前两个数字格合并之后，需要将hasConflicted值设置为true，表示当前这个数字格不能再合并。else if (boardik = boardij & noBlokHorizontalCol(i, k, j, board)&!hasConflictedik) /moveshowMoveAnimation(i, j, i, k);/addboardik += boardij;boardij = 0;/add scorescore += boardik;updateScore(score);hasConflictedik = true;continue;5.4. 优化GameOver之前

35、的GameOver，我们只是弹出提示框。效果上并不很好。现在，我们来优化一下GameOver部分，让游戏结束变得更漂亮一些。首先，我们来修改一下gameover()方法。function gameover() $(#grid-container).append(本次得分+score+Restart); var gameover = $(#gameover); gameover.css(width, 500px); gameover.css(height, 500px); gameover.css(background-color, rgba(0, 0, 0, 0.5);然后，我们来设置一下游戏

36、结束提示的样式。.gameover display: block; margin: 0 auto; width: 500px; text-align: center; vertical-align: middle; position: absolute;.gameover p font-family: Arial; font-size: 50px; color: white; margin: 20px auto; margin-top: 150px;.gameover span font-family: Arial; font-size: 50px; color: white; margin:

37、 20px auto;#restartgamebutton display: block; margin: 20px auto; width: 180px; padding: 10px 10px; background-color: #8f7a66; font-family: Arial; font-size: 30px; color: white; border-radius: 10px; text-decoration: none;#restartgamebutton:hover background-color: #9f8b77;其次，我们来完成restartgame()方法的逻辑。function restartgame() $(#gameover).remove(); updateScore(0); newgame();