1. 程式人生 > >js280行代碼寫2048

js280行代碼寫2048

昨天 產生 rfi isp img -s 第一步 n-1 程序

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

js280行代碼寫2048