关于javascript:2048小游戏JavaScript版-3-初始化数字格

1. 初始化数字格

棋盘格初始化实现后，咱们还须要用一个格子来显示数字。

而用来显示数字的格子应该在棋盘格的根底上的，所以初始化数字格的 updateBoardView() 应该在初始化棋盘格的 init() 办法的最初来执行。

1.  function init() {
2.  // i 示意 4 乘以 4 的格子的行
3.  for(var i=0;i<4;i++){// 初始化格子数组
4.  // 定义了一个二维数组
5.  board[i] = new Array();
6.  // i 示意 4 乘以 4 的格子的列
7.  for(var j=0;j<4;j++){
8.  // 初始化小格子的值为 0
9.  board[i][j] = 0;
10.  // 通过双重遍历获取每个格子元素
11.  var gridCell= document.getElementById("grid-cell-" + i + "-" + j)
12.  // console.log(gridCell)
13.  // 通过 getPosTop() 办法设置每个格子间隔顶端的间隔
14.  gridCell.style.top = getPosTop(i, j);
15.  // 通过 getPosLeft() 办法设置每个格子间隔左端的间隔
16.  gridCell.style.left = getPosLeft(i, j);
17.  }
18.  }
19.  updateBoardView();// 告诉前端对 board 二位数组进行设定。20.  }

22.  function updateBoardView() {// 更新数组的前端款式

24.  }

因为显示数字的格子也是 4×4 的 16 个格子，所以咱们间接就和 init() 办法一样，利用嵌套 for 循环的形式实现每个数字格的设置。

而后就向棋盘格上减少数字格：

1.  function updateBoardView() {// 更新数组的前端款式
2.  for (var i = 0; i < 4; i++) {3.  for (var j = 0; j < 4; j++) {
4.  // 向棋盘格上减少数字格
5.  var para=document.createElement("div");
6.  para.setAttribute("class", "number-cell")
7.  para.setAttribute("id", "number-cell-" + i + "-" + j)
8.  var element=document.getElementById("grid-container");
9.  element.appendChild(para);
10.  }
11.  }
12.  }

而后再通过判断棋盘的值来设置数字格的高和宽，如果值为 0，那么数字格的数字格的高和宽都设置为 0，如果值不为 0 的话，则设置数字格的高和宽并设置背景色和前景色及数字值。

1.  var theNumberCell = document.getElementById('number-cell-' + i + '-' + j)

3.  // 棋盘的值为 0 的话，数字格的高和宽都设置为 0
4.  if (board[i][j] == 0) {
5.  theNumberCell.style.width = '0rem';
6.  theNumberCell.style.height = '0rem';
7.  theNumberCell.style.top = getPosTop(i, j);
8.  theNumberCell.style.left = getPosLeft(i, j);
9.  // 棋盘的值不为 0 的话，则设置数字格的高和宽并设置背景色和前景色及数字值
10.  } else {
11.  theNumberCell.style.width = '4rem';
12.  theNumberCell.style.hegiht = '4rem';
13.  theNumberCell.style.top = getPosTop(i, j);
14.  theNumberCell.style.left = getPosLeft(i, j);
15.  //NumberCell 笼罩
16.  theNumberCell.style.backgroundcolor = getNumberBackgroundColor(board[i][j]);// 返回背景色
17.  theNumberCell.style.color = getNumberColor(board[i][j]);// 返回前景色
18.  theNumberCell.innerHTML = board[i][j];
19.  }

保留刷新网页：

图片起源：手游 http://www.diuxie.com/ 手游

这样就实现了数字格的增加以及款式的设置。