280行代码：Javascript 写的2048游戏

时间：2014-07-09 00:38:51 阅读：252 评论：0 收藏：0 [点我收藏+]

标签：style blog http java color strong

2048 原作者就是用Js写的，一直想尝试，但久久未动手。

昨天教学生学习JS代码。最好还是就做个有趣的游戏好了。2048这么火，是一个不错的选择。

思路：

1. 数组，2维数组4x4

2. 移动算法，移动后有数字的对齐，无数字（我用的0，但不显示）补齐。

移动前

移动后（注意程序合并了第一行2个2，并产生了新的2）

bubuko.com,布布扣

移动算法分2步：

第一步骤：移动

第二步骤：合并

移动代码參考：

[html]view plaincopy
function left(t,i)  
{  
  var j;  
  var len = t[i].length;  
  for (j=0;j<len-1;j++)  
    {  
      if (t[i][j] == 0 && t[i][j+1] != 0)  
      {  
        temp = t[i][j];  
        t[i][j] = t[i][j+1];  
        t[i][j+1] = temp;  
        left(t,i);  
          
      }  
    }  
          
}  

合并代码參考：

[html]view plaincopy
function lcombine(a,i)  
{  
  var len = a[i].length;  
    
  for(var j=0;j<len-2;j++)  
  {  
    if (a[i][j] == a[i][j+1])  
    {  
      a[i][j] *=2;  
      a[i][j+1] = 0;  
      left(a,i);  
      break;  
    }  
  }  
}  

3.显示

显示部分CSS来源 2048源作者程序。

显示代码：

[html]view plaincopy
function display_div ()  
{  
  var i,j;  
  var n = "#d";  
  for (i = 0 ;i < 4 ;i++)  
  {  
    for(j=0;j<4;j++)  
    {  
      if (a[i][j] !=0)  
        $(n+(i*4+j)).html("<div class=‘tile tile-"+a[i][j]+"‘><div class=‘tile-inner‘>"+a[i][j]+"</div></div>");  
      else  
        $(n+(i*4+j)).html("");  
        
        
    }  
  }  
}  

这段代码是把数组内容显示到 4x4表格内。

源码及在线演示：http://jsbin.com/biximuho/6/edit

280行代码：Javascript 写的2048游戏,布布扣,bubuko.com

280行代码：Javascript 写的2048游戏

标签：style blog http java color strong

原文地址：http://www.cnblogs.com/mengfanrong/p/3830137.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行