标签：style 数字 JavaScript 2048 theNumberCell 小游戏 设置 var 棋盘

1. 初始化数字格

棋盘格初始化完成后，我们还需要用一个格子来显示数字。

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

function init() {
    //i表示4乘以4的格子的行
    for(var i=0;i<4;i++){//初始化格子数组
        //定义了一个二维数组
        board[i] = new Array();
        //i表示4乘以4的格子的列
        for(var j=0;j<4;j++){
            //初始化小格子的值为0
            board[i][j] = 0;
            //通过双重遍历获取每个格子元素
            var gridCell= document.getElementById("grid-cell-" + i + "-" + j)
//            console.log(gridCell)
            //通过getPosTop()方法设置每个格子距离顶端的距离
            gridCell.style.top = getPosTop(i, j);
            //通过getPosLeft()方法设置每个格子距离左端的距离
              gridCell.style.left = getPosLeft(i, j);
        }
    }
    updateBoardView();//通知前端对board二位数组进行设定。
}

function updateBoardView() {//更新数组的前端样式

}

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

然后就向棋盘格上增加数字格：

function updateBoardView() {//更新数组的前端样式
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            //向棋盘格上增加数字格
            var para=document.createElement("div");
            para.setAttribute("class", "number-cell")
            para.setAttribute("id", "number-cell-" + i + "-" + j)
            var element=document.getElementById("grid-container");
            element.appendChild(para);
        }
    }
}

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

var theNumberCell = document.getElementById('number-cell-' + i + '-' + j)
                
//棋盘的值为0的话，数字格的高和宽都设置为0
if (board[i][j] == 0) {
    theNumberCell.style.width = '0rem';
    theNumberCell.style.height = '0rem';
    theNumberCell.style.top = getPosTop(i, j);
    theNumberCell.style.left = getPosLeft(i, j);
//棋盘的值不为0的话，则设置数字格的高和宽并设置背景色和前景色及数字值    
} else {
    theNumberCell.style.width = '4rem';
    theNumberCell.style.hegiht = '4rem';
    theNumberCell.style.top = getPosTop(i, j);
    theNumberCell.style.left = getPosLeft(i, j);
    //NumberCell覆盖
    theNumberCell.style.backgroundcolor = getNumberBackgroundColor(board[i][j]);//返回背景色
    theNumberCell.style.color = getNumberColor(board[i][j]);//返回前景色
    theNumberCell.innerHTML = board[i][j];
}

保存刷新网页：

这样就完成了数字格的添加以及样式的设置。 

标签：style,数字,JavaScript,2048,theNumberCell,小游戏,设置,var,棋盘
来源： https://www.cnblogs.com/liuhui0308/p/14423639.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。