280行代码：Javascript 写的2048游戏

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

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

思路：

1. 数组 ，2维数组4x4

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

移动前

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

移动算法分2步：

第一步骤：移动

第二步骤：合并

移动代码参考：

[html] view plain copy

1. functionleft(t,i)
2. {
3. varj;
4. varlen=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 plain copy

1. functionlcombine(a,i)
2. {
3. varlen=a[i].length;
5. for(varj=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 plain copy

1. functiondisplay_div()
2. {
3. vari,j;
4. varn="#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("<divclass='tiletile-"+a[i][j]+"'><divclass='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