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 两个数字，下一章咱们就来实现这个性能吧。