280行代码:Javascript 写的2048游戏

时间:2021-12-10 21:13:13

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

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

思路:

1. 数组 ,2维数组4x4

2. 移动算法,移动后有数字的对齐,无数字(我用的0,但不显示)补齐。

移动前

280行代码:Javascript 写的2048游戏
280行代码:Javascript 写的2048游戏

280行代码:Javascript 写的2048游戏

移动后(注意程序合并了第一行2个2,并产生了新的2)

280行代码:Javascript 写的2048游戏

移动算法分2步:

第一步骤:移动

第二步骤:合并

移动代码參考:

[html] view plaincopy280行代码:Javascript 写的2048游戏280行代码:Javascript 写的2048游戏
  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);
  13. }
  14. }
  15. }

合并代码參考:

[html] view plaincopy280行代码:Javascript 写的2048游戏280行代码:Javascript 写的2048游戏
  1. function lcombine(a,i)
  2. {
  3. var len = a[i].length;
  4. for(var j=0;j<len-2;j++)
  5. {
  6. if (a[i][j] == a[i][j+1])
  7. {
  8. a[i][j] *=2;
  9. a[i][j+1] = 0;
  10. left(a,i);
  11. break;
  12. }
  13. }
  14. }

;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