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. newgame();
  3. }
  4.  
  5. function newgame() {
  6.  
  7. }

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

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

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


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

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


	
  1. function newgame() {
  2. //初始化棋盘格
  3. init();
  4. }
  5.  
  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. }
  4.  
  5. function getPosLeft(i, j) {
  6. return (20 + j * 120) / 25 + 'rem';
  7. }

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

 

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

 

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


相关教程