js280行代码写2048

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

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


思路:

1. 数组 ,2维数组4x4

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


移动前



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



移动算法分2步:

第一步骤:移动

第二步骤:合并


移动代码参考:

    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);
            
          }
        }
            
    }


合并代码参考:

    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源作者程序。

显示代码:


    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多行。

  • 37
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值