280行代码：Javascript 写的2048游戏

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

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

思路：

1. 数组 ，2维数组4x4

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

移动前

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

移动算法分2步：

第一步骤：移动

第二步骤：合并

移动代码参考：

[html] view plaincopy

1. function left(t,i)  
2. {  
3.   var j;  
4.   var len = t[i].length;  
5.   for (j=0;j<len-1;j++)  
6.     {  
7.       if (t[i][j] == 0 && t[i][j+1] != 0)  
8.       {  
9. temp = t[i][j];  
10.         t[i][j] = t[i][j+1];  
11.         t[i][j+1] = temp;  
12.         left(t,i);  
14.       }  
15.     }  
17. }  

合并代码参考：

[html] view plaincopy

1. function lcombine(a,i)  
2. {  
3.   var len = a[i].length;  
5.   for(var j=0;j<len-2;j++)  
6.   {  
7.     if (a[i][j] == a[i][j+1])  
8.     {  
9.       a[i][j] *=2;  
10.       a[i][j+1] = 0;  
11.       left(a,i);  
12.       break;  
13.     }  
14.   }  
15. }  

3.显示

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

显示代码：

[html] view plaincopy

1. function display_div ()  
2. {  
3.   var i,j;  
4.   var n = "#d";  
5.   for (i = 0 ;i < 4 ;i++)  
6.   {  
7.     for(j=0;j<4;j++)  
8.     {  
9.       if (a[i][j] !=0)  
10.         $(n+(i*4+j)).html("<div class='tile tile-"+a[i][j]+"'><div class='tile-inner'>"+a[i][j]+"</div></div>");  
11.       else  
12.         $(n+(i*4+j)).html("");  
15.     }  
16.   }  
17. }  

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

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