main2048.js

var board = new Array();
var score = 0;
var hasConflicated = new Array();

//设置初始函数
$(document).ready(function() {
  newgame();
});

function newgame() {
  //1.初始化棋盘格
  init();
  //2.在随机两个格子生成数字，并且每次移动都会产生一个数字格子，所以我们单独封装一个生成
  // 数字的函数
  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));
    }
  }
  for (i = 0; i < 4; i++) {
    board[i] = new Array();
    hasConflicated[i] = new Array();
    for (j = 0; j < 4; j++) {
      board[i][j] = 0;
      hasConflicated[i][j] = false;
    }
  }
  score = 0;
  updateScore();
  updateBoardView();
}

function updateBoardView() {
  // 将数字格子清除，并重新添加新格子
  $(".number-cell").remove(); //.和#要切记不要写错
  for (var i = 0; i < 4; i++)
    for (var j = 0; j < 4; j++) {
      // 每个格子的排布和gridcell类似
      $("#grid-container").append(
        '<div class="number-cell" id="number-cell-' + i + "-" + j + '"></div>'
      );
      var theNumberCell = $("#number-cell-" + i + "-" + j); //number-cell后面的-忘记写，会导致就只有第一个可以被修改样式

      if (board[i][j] == 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(board[i][j])
        );
        theNumberCell.css("color", getNumberColor(board[i][j]));
        theNumberCell.text(board[i][j]);
      }
      hasConflicated[i][j] = false;
    }
}

function generateOneNumber() {
  // 判断此时是否还能生成数字
  if (nospace(board))
    //如果还有空间返回false，则离开if
    return false;

  //生成随机位置
  var randx = parseInt(Math.floor(Math.random() * 4));
  var randy = parseInt(Math.floor(Math.random() * 4));
  //判断这个位置是否为空
  var flag = 0;
  while ( flag < 50 ) {
    if (board[randx][randy] == 0) break; //如果此格子为空则结束循环，并对其赋值，如果不为空则继续生成随机数

    randx = parseInt(Math.floor(Math.random() * 4));
    randy = parseInt(Math.floor(Math.random() * 4));
    flag++;
  }
  for( var i = 0; i < 4; i ++ )
    for( var j = 0; j < 4; j ++ ) 
      if( board[i][j] == 0 ) {
        randx = i;
        randy = j;
      }

  //随机生成一个数字
  var randNumber = Math.random() < 0.5 ? 2 : 4;

  //给随机位置赋值
  board[randx][randy] = randNumber;
  showNumberWithAnimation(randx, randy, randNumber);

  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:
      //default
      break;
  }
});

function isgameover() {
  if (nospace(board) && nomove(board)) {
    gameover();
  }
}

function gameover() {
  alert("gameover!");
}

function moveLeft() {
  if (!canMoveLeft(board)) return false;

  //moveLeft
  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) && 
            !hasConflicated[i][k]
            ) {
            //move
            showMoveAnimation(i, j, i, k);
            //add
            board[i][k] += board[i][j];
            board[i][j] = 0;
            score += board[i][k];
            updateScore();
            hasConflicated[i][k] = true;
            continue;
          }
        }
      }
    }
  setTimeout("updateBoardView()", 200);
  return true;
}

function moveRight() {
  if (!canMoveRight(board)) return false;

  //moveRight
  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)) {
            //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) &&
            !hasConflicated[i][k]
          ) {
            //move
            showMoveAnimation(i, j, i, k);
            //add
            board[i][k] += board[i][j];
            board[i][j] = 0;
            score += board[i][k];
            updateScore();
            hasConflicated[i][k] = true;
            continue;
          }
        }
      }
    }
  setTimeout("updateBoardView()", 200);
  return true;
}

function moveUp() {
  if (!canMoveUp(board)) return false;

  //moveUp
  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(j, k, i, board)) {
            showMoveAnimation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            continue;
          } else if (
            board[k][j] == board[i][j] &&
            noBlockVertical(j, k, i, board) &&
            !hasConflicated[k][j]
          ) {
            showMoveAnimation(i, j, k, j);
            board[k][j] *= 2;
            board[i][j] = 0;
            score += board[k][j];
            updateScore(); 
            hasConflicated[k][j] = true;
            continue;
          }
        }
      }
    }

  setTimeout("updateBoardView()", 200);
  return true;
}

function moveDown() {
  if (!canMoveDown(board)) return false;

  //moveDown
  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(j, i, k, board)) {
            showMoveAnimation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            continue;
          } else if (
            board[k][j] == board[i][j] &&
            noBlockVertical(j, i, k, board) &&
            !hasConflicated[k][j]
          ) {
            showMoveAnimation(i, j, k, j);
            board[k][j] *= 2;
            board[i][j] = 0;
            score += board[k][j];
            updateScore();
            hasConflicated[k][j] = true;
            continue;
          }
        }
      }
    }

  setTimeout("updateBoardView()", 200);
  return true;
}