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. 
		
  2. 
			//i表示4乘以4的格子的行
    3. 
		
  3. 
			for(var i=0;i<4;i++){//初始化格子数组
    4. 
		
  4. 
			//定义了一个二维数组
    5. 
		
  5. 
			board[i] = new Array();
    6. 
		
  6. 
			//i表示4乘以4的格子的列
    7. 
		
  7. 
			for(var j=0;j<4;j++){
    8. 
		
  8. 
			//初始化小格子的值为0
    9. 
		
  9. 
			board[i][j] = 0;
    10. 
		
  10. 
			//通过双重遍历获取每个格子元素
    11. 
		
  11. 
			var gridCell= document.getElementById("grid-cell-" + i + "-" + j)
    12. 
		
  12. 
			// console.log(gridCell)
    13. 
		
  13. 
			//通过getPosTop()方法设置每个格子距离顶端的距离
    14. 
		
  14. 
			gridCell.style.top = getPosTop(i, j);
    15. 
		
  15. 
			//通过getPosLeft()方法设置每个格子距离左端的距离
    16. 
		
  16. 
			gridCell.style.left = getPosLeft(i, j);
    17. 
		
  17. 
			}
    18. 
		
  18. 
			}
    19. 
		
  19. 
			updateBoardView();//通知前端对board二位数组进行设定。
    20. 
		
  20. 
			}
    21. 
		
  21. 
			 
    22. 
		
  22. 
			function updateBoardView() {//更新数组的前端样式
    23. 
		
  23. 
			 
    24. 
		
  24. 
			}
    25. 
	





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



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



	

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





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



	

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





	保存刷新网页：



	



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


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程