VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 2048小游戏(JavaScript版) (4) 初始化数字格

作者:@小灰灰
本文为作者原创,转载请注明出处:https://www.cnblogs.com/liuhui0308/p/14423639.html


回到顶部(go to top)

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. }
  21.  
  22. function updateBoardView() {//更新数组的前端样式
  23.  
  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)
  2.  
  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. }

保存刷新网页:

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


相关教程