实现一个网页版的2048游戏，过程参考了慕课网2048游戏的教程，具体代码如下：html结构：<body><div class=”header”><h2>2048</h2><a href=”javascript:newGame()” id=”newGameBtn”>New Game</a><p>Score:<span id=”score”>0</span></p></div><=”grid-container”><=”grid-cell-0-0″></div><=”grid-cell-0-1″></div><=”grid-cell-0-2″></div><=”grid-cell-0-3″></div><=”grid-cell-1-0″></div><=”grid-cell-1-1″></div><=”grid-cell-1-2″></div><=”grid-cell-1-3″></div><=”grid-cell-2-0″></div><=”grid-cell-2-1″></div><=”grid-cell-2-2″></div><=”grid-cell-2-3″></div><=”grid-cell-3-0″></div><=”grid-cell-3-1″></div><=”grid-cell-3-2″></div><=”grid-cell-3-3″></div></div>一些css样式：.header {margin: 0 auto;width: 100%;font-family: “Microsoft YaHei”, “微软雅黑”;position: relative;clear: both;{font-size: 55px;display: inline-block;color: #776E65;margin: 10px 14px 10px -100px;position: absolute;{text-decoration: none;background: #8F7A66;display: inline-block;height: 45px;width: 120px;line-height: 50px;font-size: 20px;border-radius: 5px;color: #ffffff;text-align: center;margin: 10px;{font-family: “Microsoft YaHei”, “微软雅黑”;font-size: 20px;color: #8F7A66;margin-left: 10px;}.grid-container {margin: 15px auto;background-color: #bbada0;position: relative;}.grid-cell {width: 100px;height: 100px;background: #ccc0b3;border-radius: 10px;position: absolute;}.number-cell {font-family: “Microsoft YaHei”, “微软雅黑”;font-weight: bold;text-align: center;position: absolute;}JavaScript：var board = new Array(),score = 0,hasConflicted = startx, starty, endx, endy;//用于移动端触控操作screenWidth = $(window).width();gridContainerWidth = screenWidth * 0.92;cellWidth = screenWidth * 0.18;cellDistance = screenWidth * 0.04;$(function () {newGame();});{adjustForMobile();//初始化init();}{//调整grid以根据适应移动端；if (screenWidth >= 500) {//适用于网页gridContainerWidth = 500;cellWidth = 100;cellDistance = 20;}//调整header部分样式$(“.header”).css(“width”, gridContainerWidth + “px”);$(“.header”).css(“left”, cellWidth * 3 + “px”);$(“.header h2”).css(“margin-left”, -(gridContainerWidth / 2 – cellDistance) + “px”);//调整grid-containervar theGridContainer = $(“#grid-container”);theGridContainer.css({“width”: gridContainerWidth + “px”,”height”: gridContainerWidth + “px”,”border-radius”: gridContainerWidth * 0.02 + “px”});//调整grid-cell$(“.grid-cell”).css({“height”: cellWidth + “px”,”width”: cellWidth + “px”,”border-radius”: gridContainerWidth * 0.02 + “px”});}{//初始化函数score = 0;updateScore();for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {$(“#grid-cell-” + i + “-” + j).css(“top”, getPosTop(i, j));$(“#grid-cell-” + i + “-” + j).css(“left”, getPosLeft(i, j));}}//初始化board数据for (var i = 0; i < 4; i++) {board[i] = new Array();hasConflicted[i] = new Array();for (var j = 0; j < 4; j++) {board[i][j] = 0;hasConflicted[i][j] = false;}}generateOneNumber();generateOneNumber();updateBoardView();}{//更新页面视图-即根据board生成所有 number-cell$(“.number-cell”).remove();for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {$(“#grid-container”).append(‘<divhljs-string”>’-‘ + j + ‘”></div>’);var theNumberCell = $(“#number-cell-” + i + “-” + j);//表示当前正在操作的cellif (board[i][j] == 0) {//此时不显示数字theNumberCell.css(“width”, 0);theNumberCell.css(“height”, 0);theNumberCell.css(“top”, getPosTop(i, j) + cellWidth / 2);theNumberCell.css(“left”, getPosLeft(i, j) + cellWidth / 2);}else {theNumberCell.css({“width”: cellWidth + “px”,”height”: cellWidth + “px”,”line-height”: cellWidth + “px”,”border-radius”: gridContainerWidth * 0.02 + “px”,”top”: getPosTop(i, j),”left”: getPosLeft(i, j),”background-color”: getNumberBackgroundColor(board[i][j]),”color”: getNumberColor(board[i][j]),”font-size”: cellWidth * 0.65 + “px”});theNumberCell.html(board[i][j]);if (board[i][j] >= 128) {theNumberCell.css(“font-size”, cellWidth * 0.5);}}hasConflicted[i][j] = false;}}}{//随机的在一个位置生成2或者4if (!nospace(board)) {randy = parseInt(Math.floor(Math.random() * 4));var count = 0;while (count < 40) {//只循环40次，避免计算机一直找不到而循环if (board[randx][randy] == 0) {break;}randx = parseInt(Math.floor(Math.random() * 4));randy = parseInt(Math.floor(Math.random() * 4));}if (count == 39) {//查找一个空位置for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {if (board[i][j] == 0) {randx = i;randy = j;}}}}//随机2或4var randNumber = Math.random() < 0.6 ? 2 : 4;//在随机位置显示随机数字board[randx][randy] = randNumber;showNumberWithAnimation(randx, randy, randNumber);}return true;}{if (nospace(board) && noMove(board)) {gameOver(“Just Try Again!”)}}{generateOneNumber();alert(text);}{for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {if (board[i][j] == 2048) {return true;}}}return false;}//键盘操作$(document).keydown((event.keyCode) {case 37://leftevent.preventDefault();//阻止默认的方向键，避免滚动条出现if (moveLeft()) {setTimeout(generateOneNumber(), 220);setTimeout(isGameOver(), 220);}break;case 38://upevent.preventDefault();if (moveUp()) {setTimeout(generateOneNumber(), 210);setTimeout(isGameOver(), 220);}break;case 39://rightevent.preventDefault();if (moveRight()) {setTimeout(generateOneNumber(), 210);setTimeout(isGameOver(), 220);}break;case 40://downevent.preventDefault();if (moveDown()) {setTimeout(generateOneNumber(), 210);setTimeout(isGameOver(), 220);}break;default :}});{if (!canMoveLeft(board)) {generateOneNumber();return false;}for (var i = 0; i < 4; i++) {for (var j = 1; j < 4; j++) {if (board[i][j] != 0) {for (var k = 0; k < j; k++) {if (board[i][k] == 0 && noBlockHorizontal(i, k, j, board)) {//moveshowMoveAnimation(i, j, i, k);board[i][k] = board[i][j];board[i][j] = 0;continue;}if (board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board) && !hasConflicted[i][k]) {//moveshowMoveAnimation(i, j, i, k);//addboard[i][k] += board[i][j];board[i][j] = 0;//add scorescore += board[i][k];updateScore();if (isWinGame(board)) {gameOver(“You Get 2048!”);}continue;}}}}}setTimeout(updateBoardView(), 210);return true;}{if (!canMoveUp(board)) {generateOneNumber();return false;}for (var j = 0; j < 4; j++) {for (var i = 1; i < 4; i++) {if (board[i][j] != 0) {for (var k = 0; k < i; k++) {if (board[k][j] == 0 && noBlockVertical(k, i, j, board)) {//moveshowMoveAnimation(i, j, k, j);board[k][j] = board[i][j];board[i][j] = 0;continue;}if (board[k][j] == board[i][j] && noBlockVertical(k, i, j, board) && !hasConflicted[k][j]) {//moveshowMoveAnimation(i, j, k, j);//addboard[k][j] += board[i][j];board[i][j] = 0;//add scorescore += board[k][j];updateScore();if (isWinGame(board)) {gameOver(“You Get 2048!”);}continue;}}}}}setTimeout(updateBoardView(), 220);return true;}{if (!canMoveRight(board)) {generateOneNumber();return false;}for (var i = 0; i < 4; i++) {for (var j = 2; j >= 0; j–) {if (board[i][j] != 0) {for (var k = 3; k > j; k–) {if (board[i][k] == 0 && noBlockHorizontal(i, j, k, board)) {//moveshowMoveAnimation(i, j, i, k);board[i][k] = board[i][j];board[i][j] = 0;continue;}if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board) && !hasConflicted[i][k]) {//moveshowMoveAnimation(i, j, i, k);//addboard[i][k] += board[i][j];board[i][j] = 0;//add scorescore += board[i][k];updateScore();if (isWinGame(board)) {gameOver(“You Get 2048!”);}continue;}}}}}setTimeout(updateBoardView(), 500);return true;}{if (!canMoveDown(board)) {generateOneNumber();return false;}for (var j = 0; j < 4; j++) {for (var i = 2; i >= 0; i–) {if (board[i][j] != 0) {for (var k = 3; k > i; k–) {if (board[k][j] == 0 && noBlockVertical(i, k, j, board)) {//moveshowMoveAnimation(i, j, k, j);board[k][j] = board[i][j];board[i][j] = 0;continue;}if (board[k][j] == board[i][j] && noBlockVertical(i, k, j, board) && !hasConflicted[k][j]) {//moveshowMoveAnimation(i, j, k, j);//addboard[k][j] += board[i][j];board[i][j] = 0;//add scorescore += board[k][j];updateScore();if (isWinGame(board)) {gameOver(“You Get 2048!”);}continue;}}}}}setTimeout(updateBoardView(), 220);return true;}{//更新分数$(“#score”).html(score);}{return cellDistance + (cellDistance + cellWidth) * i;}{return cellDistance + (cellDistance + cellWidth) * j;}{//根据数字返回背景色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 “#6BADF6”;break;case 512:return “#EBC400”;break;case 1024:return “#EBC400”;break;case 2048:return “#EBC400”;break;}return “#FC6”;}{//根据数字返回前景色if (number <= 4) {return “#776E65”;}return “#F9F6F2”;}{//判断棋盘格里是否还有空间for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {if (board[i][j] == 0) {return false;}}}return true;}{//判断棋盘格里是否还能移动if (canMoveLeft(board) ||canMoveUp(board) ||canMoveRight(board) ||canMoveDown(board)) {return false;}return true;}{for (var i = 0; i < 4; i++) {for (var j = 1; j < 4; j++) {if (board[i][j] != 0) {if (board[i][j – 1] == 0 || board[i][j – 1] == board[i][j]) {return true;}}}}return false;}{for (var i = 1; i < 4; i++) {for (var j = 0; j < 4; j++) {if (board[i][j] != 0) {if (board[i – 1][j] == 0 || board[i – 1][j] == board[i][j]) {return true;}}}}return false;}{for (var i = 0; i < 4; i++) {for (var j = 0; j < 3; j++) {if (board[i][j] != 0) {if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]) {return true;}}}}return false;}{for (var i = 0; i < 3; i++) {for (var j = 0; j < 4; j++) {if (board[i][j] != 0) {if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {return true;}}}}return false;}{//第row行，从col1到col2列没有障碍for (var i = col1 + 1; i < col2; i++) {if (board[row][i] != 0) {return false;}}return true;}{for (var i = row1 + 1; i < row2; i++) {if (board[i][col] != 0) {return false;}}return true;}{var numberCell = $(“#number-cell-” + i + “-” + j);numberCell.css(“background-color”, getNumberBackgroundColor(board[i][j]));numberCell.css(“color”, getNumberColor(board[i][j]));numberCell.css(“border-radius”, gridContainerWidth * 0.02 + “px”);numberCell.css(“line-height”, cellWidth + “px”);numberCell.css(“font-size”, cellWidth * 0.65 + “px”);numberCell.html(board[i][j]);numberCell.animate({width: cellWidth,height: cellWidth,top: getPosTop(i, j),left: getPosLeft(j, j)}, 150)}{var numberCell = $(“#number-cell-” + fromx + “-” + fromy);numberCell.animate({top: getPosTop(tox, toy),left: getPosLeft(tox, toy)}, 100)}ps：
，我想有一天和你去旅行。去那没有去过的地方，
