VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 2048小游戏(JavaScript版) (3) 初始化棋盘格

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

回到顶部(go to top)

1. 初始化棋盘格

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

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

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

首先是当页面加载完成后应该调用newgame()方法：


	
    
		
  1. 
			window.onload = function(){
    2. 
		
  2. 
			newgame();
    3. 
		
  3. 
			}
    4. 
		
  4. 
			 
    5. 
		
  5. 
			function newgame() {
    6. 
		
  6. 
			 
    7. 
		
  7. 
			}
    8. 
	





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



	通过编写init()方法来完成棋盘格的初始化工作，棋盘格是一个4×4的16块的方格，所以我们需要插件一个二维数组来表示。



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



	

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





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



	

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





	保存刷新页面，F12打开控制台：



	



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



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



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





	然后我们来定义getPosTop()和getPosLeft()。



	这两个方法是属于游戏的基本逻辑了，所以我们把这两个方法写在support.js里面。



	support.js：



	

	
    
		
  1. 
			function getPosTop(i, j) {
    2. 
		
  2. 
			return (20 + i * 120) / 25 + 'rem';
    3. 
		
  3. 
			}
    4. 
		
  4. 
			 
    5. 
		
  5. 
			function getPosLeft(i, j) {
    6. 
		
  6. 
			return (20 + j * 120) / 25 + 'rem';
    7. 
		
  7. 
			}
    8. 
	





	此时保存再刷新页面，格子的初始化就完成了。



	



	 



	但是我们的初始化还缺了随机位置的2或4两个数字，下一章我们就来实现这个功能吧。



	 



	出处：https://www.cnblogs.com/liuhui0308/p/14422943.html


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程