关于javascript:2048小游戏JavaScript版-2-初始化棋盘格

1. 初始化棋盘格

咱们在index.html文件中，做了一个从新开始按钮，调用了一个newgame()办法用来开始新游戏，然而咱们没有编写这个办法，目前点击按钮控制台会报错。

而开始新游戏须要实现两件事件，一是初始化棋盘格，二是在随机的两个格子生成2或4两个数字。

初始化棋盘的代码咱们就放在main.js这个游戏主逻辑文件当中。

首先是当页面加载实现后应该调用newgame()办法：

1.  window.onload = function(){
2.  newgame();
3.  }

5.  function newgame() {

7.  }

每次newgame()，咱们都要初始化一遍棋盘格，来确保界面不会呈现任何残留数据。

通过编写init()办法来实现棋盘格的初始化工作，棋盘格是一个4×4的16块的方格，所以咱们须要插件一个二维数组来示意。

在最下面定义一个空数组：

1.  //定义一个JavaScript数组
2.  var board = new Array();

而后咱们在init()中，利用嵌套for循环的形式实现每个格子的设置。

1.  function newgame() {
2.  //初始化棋盘格
3.  init();
4.  }

6.  function init() {
7.  //i示意4乘以4的格子的行
8.  for(var i=0;i<4;i++){//初始化格子数组
9.  //定义了一个二维数组
10.  board[i] = new Array();
11.  //i示意4乘以4的格子的列
12.  for(var j=0;j<4;j++){
13.  //初始化小格子的值为0
14.  board[i][j] = 0;
15.  //通过双重遍历获取每个格子元素
16.  var gridCell= document.getElementById("grid-cell-" + i + "-" + j)
17.  console.log(gridCell)
18.  }
19.  }
20.  }

保留刷新页面，F12关上控制台：

咱们获取到了每个格子元素。

之后咱们就要设置每个格子间隔顶端和左端间隔了，这里也是大佬给我设计好的，所以大家抄就完事了，程序员的事，能叫抄吗，这叫copy！

在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.  }

而后咱们来定义getPosTop()和getPosLeft()。

这两个办法是属于游戏平台的根本逻辑了，所以咱们把这两个办法写在support.js外面。

support.js：

1.  function getPosTop(i, j) {
2.  return (20 + i * 120) / 25 + 'rem';
3.  }

5.  function getPosLeft(i, j) {
6.  return (20 + j * 120) / 25 + 'rem';
7.  }

此时保留再刷新页面，格子的初始化就实现了。

然而咱们的初始化还缺了随机地位的2或4两个数字，下一章咱们就来实现这个性能吧。