/** * @Description:main,js * @Author:LCore */ //4*4格子 var board = new Array(); var score = 0; var topScore = 0; var hasConflicted = new Array(); var direction = { left: 1, up: 2, down: 3, right: 4 }; $(function () { prepareForMobile(); //为移动端 newGame(); }); function prepareForMobile() { if (documentWidth > 500) { //web端 gridContainerWidth = 500; cellSpace = 20; cellSideLength = 100; headerWidth = 500; } $('#grid-container').css('width', gridContainerWidth - 2 * cellSpace); $('#grid-container').css('height', gridContainerWidth - 2 * cellSpace); $('#grid-container').css('padding', cellSpace); $('#grid-container').css('border-radius', 0.02 * gridContainerWidth); $('.grid-cell').css('width', cellSideLength); $('.grid-cell').css('height', cellSideLength); $('.grid-cell').css('border-radius', 0.02 * cellSideLength); //设置头部 // alert(headerWidth); headerWidth = headerWidth * 0.92; $('.header').css('width', headerWidth); $('#newGame').css('width', headerWidth * 0.20 + 'px'); $('#topScore').css('width', headerWidth * 0.40 * 0.90 + 'px'); } function newGame() { //初始化棋盘格 init(); //在随机两个格子生成数字 generateOneNumber(); generateOneNumber(); updateBoardView(); score = 0; $("#score").text(0); } 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", getPostionTop(i, j)); gridCell.css("left", getPostionLeft(i, j)); } } //初始化棋盘 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; } } // console.log(board); //更新面板 updateBoardView(); } function updateBoardView() { $(".number-cell").remove(); //更新之前先删除元素 for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { //重新生成16个number-cell,并添加到容器中 $("#grid-container").append('
'); var numberCell = $("#number-cell-" + i + j); if (board[i][j] == 0) { //设置居中且"不可见" numberCell.css({ "width": "0px", "height": "0px", "top": getPostionTop(i, j) + cellSideLength / 2, "left": getPostionLeft(i, j) + cellSideLength / 2 }); } else { numberCell.css({ "width": cellSideLength, "height": cellSideLength, "top": getPostionTop(i, j), "left": getPostionLeft(i, j) }); //根据数字颜色设置器背景色 numberCell.css("background-color", getBackgroundColorByNum(board[i][j])); //设置前景是 numberCell.css("color", getPreColorByNum(board[i][j])); //显示数字 numberCell.text(getShowTextByNum(board[i][j])); hasConflicted[i][j] = false; } } } $('.number-cell').css('line-height', cellSideLength + 'px'); // $('.number-cell').css('font-size',0.6*cellSideLength+'px'); $('.number-cell').css('font-size', 0.2 * cellSideLength + 'px'); } function generateOneNumber() { if (isNoSpace(board)) { return false; } //随机一个位置 var randx = parseInt(Math.floor(Math.random() * 4)); var randy = parseInt(Math.floor(Math.random() * 4)); //判断生成的坐标是否合理(若果该坐标存在了值,即不合理) while (true) { if (board[randx][randy] === 0) break; //继续生成随机一个位置 randx = parseInt(Math.floor(Math.random() * 4)); randy = parseInt(Math.floor(Math.random() * 4)); } //随机一个数字 var randNum = Math.random() < 0.5 ? 2 : 4; board[randx][randy] = randNum; showNumberWithAnimation(randx, randy, randNum); return true; } //按键处理 $(document).keydown(function (event) { switch (event.keyCode) { case 37: //left if (moveLeft()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; case 38: //up if (moveUp()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; case 39: //right if (moveRight()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; case 40: //down if (moveDown()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; default: break; } }); function moveLeft() { if (!canMove(board, direction.left)) 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)) { //move showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if (board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board) && !hasConflicted[i][k]) { //move showMoveAnimation(i, j, i, k); //add board[i][k] += board[i][j]; board[i][j] = 0; var element = $("#grid-cell-" + i + k); anp(element, board[i][k]) score += board[i][k]; updateScore(score); updateTopScore(score); continue; } } } } setTimeout('updateBoardView()', 200); //等待200在执行更新面板操作,避免动画效果被冲掉 return true } function moveRight() { if (!canMove(board, direction.right)) return false; //右移 for (var i = 3; i >= 0; i--) { for (var j = 2; j >= 0; j--) { //该位置不等于0即可进行移动 if (board[i][j] != 0) for (var k = 3; k > j; k--) { //如果可以一次移动多个格子 if (board[i][k] == 0 && noBlockHorizontal(i, j, k, board)) { //move showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board) && !hasConflicted[i][k]) { //move showMoveAnimation(i, j, i, k); //add board[i][k] += board[i][j]; board[i][j] = 0; score += board[i][k]; var element = $("#grid-cell-" + i + k); anp(element, board[i][k]) updateScore(score); updateTopScore(score); continue; } } } } setTimeout('updateBoardView()', 200); //等待200在执行更新面板操作,避免动画效果被冲掉 return true } function isGameOver() { if (isNoSpace(board) && !cavMoveAll(board)) { gameOver(); } } function gameOver() { alert("游戏结束!"); } /** 先判断第一列*/ function moveUp() { if (!canMove(board, direction.up)) return false; for (var i = 0; i < 4; i++) { for (var j = 1; j < 4; j++) { //该位置不为0即可进行移动 if (board[j][i] != 0) { for (var k = 0; k < j; k++) { if (board[k][i] == 0 && noBlockVectal(i, k, j, board)) { //move showMoveAnimation(j, i, k, i); board[k][i] = board[j][i]; board[j][i] = 0; continue; } else if (board[k][i] == board[j][i] && noBlockVectal(i, k, j, board) && !hasConflicted[k][i]) { //move showMoveAnimation(j, i, k, i); board[k][i] += board[j][i]; board[j][i] = 0; score += board[k][i]; var element = $("#grid-cell-" + k + i); anp(element, board[k][i]) updateScore(score); updateTopScore(score); continue; } } } } } setTimeout('updateBoardView()', 200); //等待200在执行更新面板操作,避免动画效果被冲掉 return true } /** 先判断第一列*/ function moveDown() { if (!canMove(board, direction.down)) return false; for (var i = 3; i >= 0; i--) { for (var j = 2; j >= 0; j--) { //该位置不为0即可进行移动 if (board[j][i] != 0) { for (var k = 3; k > j; k--) { if (board[k][i] == 0 && noBlockVectal(i, j, k, board)) { //move showMoveAnimation(j, i, k, i); board[k][i] = board[j][i]; board[j][i] = 0; continue; } else if (board[k][i] == board[j][i] && noBlockVectal(i, j, k, board) && !hasConflicted[k][i]) { //move showMoveAnimation(j, i, k, i); board[k][i] += board[j][i]; board[j][i] = 0; score += board[k][i]; var element = $("#grid-cell-" + k + i); anp(element, board[k][i]) updateScore(score); updateTopScore(score); continue; } } } } } setTimeout('updateBoardView()', 200); //等待200在执行更新面板操作,避免动画效果被冲掉 return true } /** * 滑动处理 1, 左滑; 2, 上滑, 3, 右滑; 4, 下滑 */ function slideDirection(numm) { switch (numm) { case 1: //left if (moveLeft()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; case 2: //up if (moveUp()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; case 3: //right if (moveRight()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; case 4: //down if (moveDown()) { setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } break; default: break; } } /** * * 更新最高分数 */ function updateTopScore(score) { if (topScore