风靡世界的小游戏2048源代码

参考博客：http://blog.csdn.net/asmcos/article/details/25605207

游戏原作者是用JavaScript写的，编程爱好者可以看一下，很简单，阅读源代码胜过一切，这里不多说了。

上代码：

第一部分（HTML和内嵌的JavaScript）

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  5   <meta charset="utf-8">
  6   <title>JS Bin</title>
  7 </head>
  8   <script>
  9   var a = new Array();
 10     
 11   for (i = 0 ;i < 4 ; i++)
 12   {    
 13     a[i] = new Array();
 14     
 15     for (j = 0 ; j < 4 ; j ++)
 16         a[i][j] = Math.floor(Math.random() * 2+1)*2;
 17    }
 18 
 19     function display_div ()
 20     {
 21       var i,j;
 22       var n = "#d";
 23       for (i = 0 ;i < 4 ;i++)
 24       {
 25         for(j=0;j<4;j++)
 26         {
 27           if (a[i][j] !=0)
 28             $(n+(i*4+j)).html("<div class='tile tile-"+a[i][j]+"'><div class='tile-inner'>"+a[i][j]+"</div></div>");
 29           else
 30             $(n+(i*4+j)).html("");
 31           
 32           
 33         }
 34       }
 35     }
 36     function dump(t)
 37     {var i,j;
 38        console.log("-------");
 39       for (i=0;i<4;i++)
 40       {
 41         console.log(t[i]);
 42       }
 43        console.log("-------");
 44     }
 45     dump(a);
 46     
 47     function left(t,i)
 48     {
 49       var j;
 50       var len = t[i].length;
 51       for (j=0;j<len-1;j++)
 52         {
 53           if (t[i][j] == 0 && t[i][j+1] != 0)
 54           {
 55             temp = t[i][j];
 56             t[i][j] = t[i][j+1];
 57             t[i][j+1] = temp;
 58             left(t,i);
 59             
 60           }
 61         }
 62             
 63     }
 64     function right(t,i)
 65     {
 66       var len = t[i].length;
 67       for (var j=len-1;j>0;j--)
 68         {
 69           if (t[i][j] == 0 && t[i][j-1] != 0)
 70           {
 71             temp = t[i][j];
 72             t[i][j] = t[i][j-1];
 73             t[i][j-1] = temp;
 74             right(t,i);
 75             
 76           }
 77         }      
 78     }
 79     
 80     function up(t,j)
 81     {
 82       var len = t.length;
 83       
 84       for (var i=0;i<len-1;i++)
 85        {
 86           if (t[i][j] == 0 && t[i+1][j] != 0)
 87           {
 88             temp = t[i][j];
 89             t[i][j] = t[i+1][j];
 90             t[i+1][j] = temp;
 91             up(t,j);
 92             
 93           }
 94         }
 95     }
 96    
 97    function down(t,j)
 98     {
 99       var len = t.length;
100       
101       for (var i=len-1;i>0;i--)
102        {
103           if (t[i][j] == 0 && t[i-1][j] != 0)
104           {
105             temp = t[i][j];
106             t[i][j] = t[i-1][j];
107             t[i-1][j] = temp;
108             down(t,j);
109             
110           }
111         }
112     }
113     
114     function lcombine(a,i)
115     {
116       var len = a[i].length;
117       
118       for(var j=0;j<len-2;j++)
119       {
120         if (a[i][j] == a[i][j+1])
121         {
122           a[i][j] *=2;
123           a[i][j+1] = 0;
124           left(a,i);
125           break;
126         }
127       }
128     }
129     
130    function rcombine(a,i)
131     {
132       var len = a[i].length;
133       
134       for(var j=len-1;j>0;j--)
135       {
136         if (a[i][j] == a[i][j-1])
137         {
138           a[i][j] *=2;
139           a[i][j-1] = 0;
140           right(a,i);
141           break;
142         }
143       }
144     }
145     
146     function ucombine(a,j)
147     {
148       var len=a.length;
149       
150       for (var i=0;i<len-2;i++)
151         {
152           if (a[i][j]==a[i+1][j])
153             {
154               a[i][j] *=2;
155               a[i+i][j] = 0;
156               up(a,j);
157               break;
158             }
159           
160         }
161       
162     }
163     
164    function dcombine(a,j)
165     {
166       var len=a.length;
167       
168       for (var i=len-1;i>0;i--)
169         {
170           if (a[i][j]==a[i-1][j])
171             {
172               a[i][j] *=2;
173               a[i-1][j] = 0;
174               down(a,j);
175               break;
176             }
177           
178         }
179       
180     }
181     
182     function addnew(){
183       while (1){
184        pos = Math.floor(Math.random() * 16);
185        var i = Math.floor(pos/4);
186        var j = Math.floor(pos%4);
187        
188        if (a[i][j] == 0)
189          {
190            a[i][j] = Math.floor(Math.random() * 2+1)*2;
191            break;
192            
193          }
194       }
195     }
196     
197     $(document).ready(function(){
198       $("p").click(function(){
199            
200           display_div();
201         });
202       
203     $(document).keyup(function(l){
204       console.log(l.keyCode);
205        if (l.keyCode==37)
206          {
207                for (var i=0;i<4;i++)
208                     left(a,i);
209       
210                for (var i=0;i<4;i++)
211                     lcombine(a,i);
212            
213                addnew();
214                display_div();
215              
216          }
217       
218        if (l.keyCode==38)
219          {
220                for (var j=0;j<4;j++)
221                     up(a,j);
222       
223                for (var j=0;j<4;j++)
224                     ucombine(a,j);
225                addnew();
226                display_div();
227          }
228       
229         if (l.keyCode==39)
230          {
231                for (var i=0;i<4;i++)
232                     right(a,i);
233       
234                for (var i=0;i<4;i++)
235                     rcombine(a,i);
236                addnew();
237                display_div();
238          }
239       
240       if (l.keyCode==40)
241          {
242                for (var j=0;j<4;j++)
243                     down(a,j);
244       
245                for (var j=0;j<4;j++)
246                     dcombine(a,j);
247                addnew();
248                display_div();
249          }
250       
251     });
252       
253     });
254     
255   </script>
256   
257 <body>
258   
259   <div class="grid-container" style="left:20px;bottom:20px;">
260         <div class="grid-row">
261           <div class="grid-cell" id="d0"></div>
262           <div class="grid-cell" id="d1"></div>
263           <div class="grid-cell" id="d2"></div>
264           <div class="grid-cell" id="d3"></div>
265         </div>
266         <div class="grid-row">
267          <div class="grid-cell" id="d4"></div>
268           <div class="grid-cell" id="d5"></div>
269           <div class="grid-cell" id="d6"></div>
270           <div class="grid-cell" id="d7"></div>
271         </div>
272         <div class="grid-row">
273           <div class="grid-cell" id="d8"></div>
274           <div class="grid-cell" id="d9"></div>
275           <div class="grid-cell" id="d10"></div>
276           <div class="grid-cell" id="d11"></div>
277         </div>
278         <div class="grid-row">
279           <div class="grid-cell" id="d12"></div>
280           <div class="grid-cell" id="d13"></div>
281           <div class="grid-cell" id="d14"></div>
282           <div class="grid-cell" id="d15"></div>
283         </div>
284       </div>
285 
286 </body>
287 </html>

第二部分（CSS）

   1 @import url(fonts/clear-sans.css);
   2 html, body {
   3   margin: 0;
   4   padding: 0;
   5   background: #faf8ef;
   6   color: #776e65;
   7   font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
   8   font-size: 18px; }
   9 
  10 body {
  11   margin: 80px 0; }
  12 
  13 input {
  14   display: inline-block;
  15   background: #8f7a66;
  16   border-radius: 3px;
  17   padding: 0 20px;
  18   text-decoration: none;
  19   color: #f9f6f2;
  20   height: 40px;
  21   line-height: 42px;
  22   cursor: pointer;
  23   font: inherit;
  24   border: none;
  25   outline: none;
  26   box-sizing: border-box;
  27   font-weight: bold;
  28   margin: 0;
  29   -webkit-appearance: none;
  30   -moz-appearance: none;
  31   appearance: none; }
  32   input[type="text"], input[type="email"] {
  33     cursor: auto;
  34     background: #fcfbf9;
  35     font-weight: normal;
  36     color: #776e65;
  37     padding: 0 15px; }
  38     input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder {
  39       color: #9d948c; }
  40     input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder {
  41       color: #9d948c; }
  42     input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder {
  43       color: #9d948c; }
  44 
  45 .tile{
  46   background: #Ede0c8;
  47   height:100%;
  48   border-radius: 3px;
  49 
  50 text-align: center;
  51 font-weight: bold;
  52 z-index: 10;
  53 font-size: 55px;
  54   
  55 }
  56 .heading:after {
  57   content: "";
  58   display: block;
  59   clear: both; }
  60 
  61 h1.title {
  62   font-size: 80px;
  63   font-weight: bold;
  64   margin: 0;
  65   display: block;
  66   float: left; }
  67 
  68 @-webkit-keyframes move-up {
  69   0% {
  70     top: 25px;
  71     opacity: 1; }
  72 
  73   100% {
  74     top: -50px;
  75     opacity: 0; } }
  76 @-moz-keyframes move-up {
  77   0% {
  78     top: 25px;
  79     opacity: 1; }
  80 
  81   100% {
  82     top: -50px;
  83     opacity: 0; } }
  84 @keyframes move-up {
  85   0% {
  86     top: 25px;
  87     opacity: 1; }
  88 
  89   100% {
  90     top: -50px;
  91     opacity: 0; } }
  92 .scores-container {
  93   float: right;
  94   text-align: right; }
  95 
  96 .score-container, .best-container {
  97   position: relative;
  98   display: inline-block;
  99   background: #bbada0;
 100   padding: 15px 25px;
 101   font-size: 25px;
 102   height: 25px;
 103   line-height: 47px;
 104   font-weight: bold;
 105   border-radius: 3px;
 106   color: white;
 107   margin-top: 8px;
 108   text-align: center; }
 109   .score-container:after, .best-container:after {
 110     position: absolute;
 111     width: 100%;
 112     top: 10px;
 113     left: 0;
 114     text-transform: uppercase;
 115     font-size: 13px;
 116     line-height: 13px;
 117     text-align: center;
 118     color: #eee4da; }
 119   .score-container .score-addition, .best-container .score-addition {
 120     position: absolute;
 121     right: 30px;
 122     color: red;
 123     font-size: 25px;
 124     line-height: 25px;
 125     font-weight: bold;
 126     color: rgba(119, 110, 101, 0.9);
 127     z-index: 100;
 128     -webkit-animation: move-up 600ms ease-in;
 129     -moz-animation: move-up 600ms ease-in;
 130     animation: move-up 600ms ease-in;
 131     -webkit-animation-fill-mode: both;
 132     -moz-animation-fill-mode: both;
 133     animation-fill-mode: both; }
 134 
 135 .score-container:after {
 136   content: "Score"; }
 137 
 138 .best-container:after {
 139   content: "Best"; }
 140 
 141 p {
 142   margin-top: 0;
 143   margin-bottom: 10px;
 144   line-height: 1.65; }
 145 
 146 a {
 147   color: #776e65;
 148   font-weight: bold;
 149   text-decoration: underline;
 150   cursor: pointer; }
 151 
 152 strong.important {
 153   text-transform: uppercase; }
 154 
 155 hr {
 156   border: none;
 157   border-bottom: 1px solid #d8d4d0;
 158   margin-top: 20px;
 159   margin-bottom: 30px; }
 160 
 161 .container {
 162   width: 500px;
 163   margin: 0 auto; }
 164 
 165 @-webkit-keyframes fade-in {
 166   0% {
 167     opacity: 0; }
 168 
 169   100% {
 170     opacity: 1; } }
 171 @-moz-keyframes fade-in {
 172   0% {
 173     opacity: 0; }
 174 
 175   100% {
 176     opacity: 1; } }
 177 @keyframes fade-in {
 178   0% {
 179     opacity: 0; }
 180 
 181   100% {
 182     opacity: 1; } }
 183 @-webkit-keyframes slide-up {
 184   0% {
 185     margin-top: 32%; }
 186 
 187   100% {
 188     margin-top: 20%; } }
 189 @-moz-keyframes slide-up {
 190   0% {
 191     margin-top: 32%; }
 192 
 193   100% {
 194     margin-top: 20%; } }
 195 @keyframes slide-up {
 196   0% {
 197     margin-top: 32%; }
 198 
 199   100% {
 200     margin-top: 20%; } }
 201 .game-container {
 202   margin-top: 40px;
 203   position: relative;
 204   padding: 15px;
 205   cursor: default;
 206   -webkit-touch-callout: none;
 207   -ms-touch-callout: none;
 208   -webkit-user-select: none;
 209   -moz-user-select: none;
 210   -ms-user-select: none;
 211   -ms-touch-action: none;
 212   touch-action: none;
 213   background: #bbada0;
 214   border-radius: 6px;
 215   width: 500px;
 216   height: 500px;
 217   -webkit-box-sizing: border-box;
 218   -moz-box-sizing: border-box;
 219   box-sizing: border-box; }
 220 
 221 .game-message {
 222   display: none;
 223   position: absolute;
 224   top: 0;
 225   right: 0;
 226   bottom: 0;
 227   left: 0;
 228   background: rgba(238, 228, 218, 0.73);
 229   z-index: 100;
 230   padding-top: 40px;
 231   text-align: center;
 232   -webkit-animation: fade-in 800ms ease 1200ms;
 233   -moz-animation: fade-in 800ms ease 1200ms;
 234   animation: fade-in 800ms ease 1200ms;
 235   -webkit-animation-fill-mode: both;
 236   -moz-animation-fill-mode: both;
 237   animation-fill-mode: both; }
 238   .game-message p {
 239     font-size: 60px;
 240     font-weight: bold;
 241     height: 60px;
 242     line-height: 60px;
 243     margin-top: 222px; }
 244   .game-message .lower {
 245     display: block;
 246     margin-top: 29px; }
 247   .game-message .mailing-list {
 248     margin-top: 52px; }
 249     .game-message .mailing-list strong {
 250       display: block;
 251       margin-bottom: 10px; }
 252     .game-message .mailing-list .mailing-list-email-field {
 253       width: 230px;
 254       margin-right: 5px; }
 255   .game-message a {
 256     display: inline-block;
 257     background: #8f7a66;
 258     border-radius: 3px;
 259     padding: 0 20px;
 260     text-decoration: none;
 261     color: #f9f6f2;
 262     height: 40px;
 263     line-height: 42px;
 264     cursor: pointer;
 265     margin-left: 9px; }
 266     .game-message a.keep-playing-button {
 267       display: none; }
 268   .game-message .score-sharing {
 269     display: inline-block;
 270     vertical-align: middle;
 271     margin-left: 10px; }
 272   .game-message.game-won {
 273     background: rgba(237, 194, 46, 0.5);
 274     color: #f9f6f2; }
 275     .game-message.game-won a.keep-playing-button {
 276       display: inline-block; }
 277   .game-message.game-won, .game-message.game-over {
 278     display: block; }
 279     .game-message.game-won p, .game-message.game-over p {
 280       -webkit-animation: slide-up 1.5s ease-in-out 2500ms;
 281       -moz-animation: slide-up 1.5s ease-in-out 2500ms;
 282       animation: slide-up 1.5s ease-in-out 2500ms;
 283       -webkit-animation-fill-mode: both;
 284       -moz-animation-fill-mode: both;
 285       animation-fill-mode: both; }
 286     .game-message.game-won .mailing-list, .game-message.game-over .mailing-list {
 287       -webkit-animation: fade-in 1.5s ease-in-out 2500ms;
 288       -moz-animation: fade-in 1.5s ease-in-out 2500ms;
 289       animation: fade-in 1.5s ease-in-out 2500ms;
 290       -webkit-animation-fill-mode: both;
 291       -moz-animation-fill-mode: both;
 292       animation-fill-mode: both; }
 293 
 294 .grid-container {
 295   position: absolute;
 296   z-index: 1; }
 297 
 298 .grid-row {
 299   margin-bottom: 15px; }
 300   .grid-row:last-child {
 301     margin-bottom: 0; }
 302   .grid-row:after {
 303     content: "";
 304     display: block;
 305     clear: both; }
 306 
 307 .grid-cell {
 308   width: 106.25px;
 309   height: 106.25px;
 310   margin-right: 15px;
 311   float: left;
 312   border-radius: 3px;
 313   background: rgba(238, 228, 218, 0.35); }
 314   .grid-cell:last-child {
 315     margin-right: 0; }
 316 
 317 .tile-container {
 318   position: absolute;
 319   z-index: 2; }
 320 
 321 .tile, .tile .tile-inner {
 322   width: 107px;
 323   height: 107px;
 324   line-height: 116.25px; }
 325 .tile.tile-position-1-1 {
 326   -webkit-transform: translate(0px, 0px);
 327   -moz-transform: translate(0px, 0px);
 328   transform: translate(0px, 0px); }
 329 .tile.tile-position-1-2 {
 330   -webkit-transform: translate(0px, 121px);
 331   -moz-transform: translate(0px, 121px);
 332   transform: translate(0px, 121px); }
 333 .tile.tile-position-1-3 {
 334   -webkit-transform: translate(0px, 242px);
 335   -moz-transform: translate(0px, 242px);
 336   transform: translate(0px, 242px); }
 337 .tile.tile-position-1-4 {
 338   -webkit-transform: translate(0px, 363px);
 339   -moz-transform: translate(0px, 363px);
 340   transform: translate(0px, 363px); }
 341 .tile.tile-position-2-1 {
 342   -webkit-transform: translate(121px, 0px);
 343   -moz-transform: translate(121px, 0px);
 344   transform: translate(121px, 0px); }
 345 .tile.tile-position-2-2 {
 346   -webkit-transform: translate(121px, 121px);
 347   -moz-transform: translate(121px, 121px);
 348   transform: translate(121px, 121px); }
 349 .tile.tile-position-2-3 {
 350   -webkit-transform: translate(121px, 242px);
 351   -moz-transform: translate(121px, 242px);
 352   transform: translate(121px, 242px); }
 353 .tile.tile-position-2-4 {
 354   -webkit-transform: translate(121px, 363px);
 355   -moz-transform: translate(121px, 363px);
 356   transform: translate(121px, 363px); }
 357 .tile.tile-position-3-1 {
 358   -webkit-transform: translate(242px, 0px);
 359   -moz-transform: translate(242px, 0px);
 360   transform: translate(242px, 0px); }
 361 .tile.tile-position-3-2 {
 362   -webkit-transform: translate(242px, 121px);
 363   -moz-transform: translate(242px, 121px);
 364   transform: translate(242px, 121px); }
 365 .tile.tile-position-3-3 {
 366   -webkit-transform: translate(242px, 242px);
 367   -moz-transform: translate(242px, 242px);
 368   transform: translate(242px, 242px); }
 369 .tile.tile-position-3-4 {
 370   -webkit-transform: translate(242px, 363px);
 371   -moz-transform: translate(242px, 363px);
 372   transform: translate(242px, 363px); }
 373 .tile.tile-position-4-1 {
 374   -webkit-transform: translate(363px, 0px);
 375   -moz-transform: translate(363px, 0px);
 376   transform: translate(363px, 0px); }
 377 .tile.tile-position-4-2 {
 378   -webkit-transform: translate(363px, 121px);
 379   -moz-transform: translate(363px, 121px);
 380   transform: translate(363px, 121px); }
 381 .tile.tile-position-4-3 {
 382   -webkit-transform: translate(363px, 242px);
 383   -moz-transform: translate(363px, 242px);
 384   transform: translate(363px, 242px); }
 385 .tile.tile-position-4-4 {
 386   -webkit-transform: translate(363px, 363px);
 387   -moz-transform: translate(363px, 363px);
 388   transform: translate(363px, 363px); }
 389 
 390 .tile {
 391   position: absolute;
 392   -webkit-transition: 100ms ease-in-out;
 393   -moz-transition: 100ms ease-in-out;
 394   transition: 100ms ease-in-out;
 395   -webkit-transition-property: -webkit-transform;
 396   -moz-transition-property: -moz-transform;
 397   transition-property: transform; }
 398   .tile .tile-inner {
 399     border-radius: 3px;
 400     background: #eee4da;
 401     text-align: center;
 402     font-weight: bold;
 403     z-index: 10;
 404     font-size: 55px; }
 405   .tile.tile-2 .tile-inner {
 406     background: #eee4da;
 407     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
 408   .tile.tile-4 .tile-inner {
 409     background: #ede0c8;
 410     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
 411   .tile.tile-8 .tile-inner {
 412     color: #f9f6f2;
 413     background: #f2b179; }
 414   .tile.tile-16 .tile-inner {
 415     color: #f9f6f2;
 416     background: #f59563; }
 417   .tile.tile-32 .tile-inner {
 418     color: #f9f6f2;
 419     background: #f67c5f; }
 420   .tile.tile-64 .tile-inner {
 421     color: #f9f6f2;
 422     background: #f65e3b; }
 423   .tile.tile-128 .tile-inner {
 424     color: #f9f6f2;
 425     background: #edcf72;
 426     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
 427     font-size: 45px; }
 428     @media screen and (max- 520px) {
 429       .tile.tile-128 .tile-inner {
 430         font-size: 25px; } }
 431   .tile.tile-256 .tile-inner {
 432     color: #f9f6f2;
 433     background: #edcc61;
 434     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
 435     font-size: 45px; }
 436     @media screen and (max- 520px) {
 437       .tile.tile-256 .tile-inner {
 438         font-size: 25px; } }
 439   .tile.tile-512 .tile-inner {
 440     color: #f9f6f2;
 441     background: #edc850;
 442     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
 443     font-size: 45px; }
 444     @media screen and (max- 520px) {
 445       .tile.tile-512 .tile-inner {
 446         font-size: 25px; } }
 447   .tile.tile-1024 .tile-inner {
 448     color: #f9f6f2;
 449     background: #edc53f;
 450     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
 451     font-size: 35px; }
 452     @media screen and (max- 520px) {
 453       .tile.tile-1024 .tile-inner {
 454         font-size: 15px; } }
 455   .tile.tile-2048 .tile-inner {
 456     color: #f9f6f2;
 457     background: #edc22e;
 458     box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
 459     font-size: 35px; }
 460     @media screen and (max- 520px) {
 461       .tile.tile-2048 .tile-inner {
 462         font-size: 15px; } }
 463   .tile.tile-super .tile-inner {
 464     color: #f9f6f2;
 465     background: #3c3a32;
 466     font-size: 30px; }
 467     @media screen and (max- 520px) {
 468       .tile.tile-super .tile-inner {
 469         font-size: 10px; } }
 470 
 471 @-webkit-keyframes appear {
 472   0% {
 473     opacity: 0;
 474     -webkit-transform: scale(0);
 475     -moz-transform: scale(0);
 476     transform: scale(0); }
 477 
 478   100% {
 479     opacity: 1;
 480     -webkit-transform: scale(1);
 481     -moz-transform: scale(1);
 482     transform: scale(1); } }
 483 @-moz-keyframes appear {
 484   0% {
 485     opacity: 0;
 486     -webkit-transform: scale(0);
 487     -moz-transform: scale(0);
 488     transform: scale(0); }
 489 
 490   100% {
 491     opacity: 1;
 492     -webkit-transform: scale(1);
 493     -moz-transform: scale(1);
 494     transform: scale(1); } }
 495 @keyframes appear {
 496   0% {
 497     opacity: 0;
 498     -webkit-transform: scale(0);
 499     -moz-transform: scale(0);
 500     transform: scale(0); }
 501 
 502   100% {
 503     opacity: 1;
 504     -webkit-transform: scale(1);
 505     -moz-transform: scale(1);
 506     transform: scale(1); } }
 507 .tile-new .tile-inner {
 508   -webkit-animation: appear 200ms ease 100ms;
 509   -moz-animation: appear 200ms ease 100ms;
 510   animation: appear 200ms ease 100ms;
 511   -webkit-animation-fill-mode: backwards;
 512   -moz-animation-fill-mode: backwards;
 513   animation-fill-mode: backwards; }
 514 
 515 @-webkit-keyframes pop {
 516   0% {
 517     -webkit-transform: scale(0);
 518     -moz-transform: scale(0);
 519     transform: scale(0); }
 520 
 521   50% {
 522     -webkit-transform: scale(1.2);
 523     -moz-transform: scale(1.2);
 524     transform: scale(1.2); }
 525 
 526   100% {
 527     -webkit-transform: scale(1);
 528     -moz-transform: scale(1);
 529     transform: scale(1); } }
 530 @-moz-keyframes pop {
 531   0% {
 532     -webkit-transform: scale(0);
 533     -moz-transform: scale(0);
 534     transform: scale(0); }
 535 
 536   50% {
 537     -webkit-transform: scale(1.2);
 538     -moz-transform: scale(1.2);
 539     transform: scale(1.2); }
 540 
 541   100% {
 542     -webkit-transform: scale(1);
 543     -moz-transform: scale(1);
 544     transform: scale(1); } }
 545 @keyframes pop {
 546   0% {
 547     -webkit-transform: scale(0);
 548     -moz-transform: scale(0);
 549     transform: scale(0); }
 550 
 551   50% {
 552     -webkit-transform: scale(1.2);
 553     -moz-transform: scale(1.2);
 554     transform: scale(1.2); }
 555 
 556   100% {
 557     -webkit-transform: scale(1);
 558     -moz-transform: scale(1);
 559     transform: scale(1); } }
 560 .tile-merged .tile-inner {
 561   z-index: 20;
 562   -webkit-animation: pop 200ms ease 100ms;
 563   -moz-animation: pop 200ms ease 100ms;
 564   animation: pop 200ms ease 100ms;
 565   -webkit-animation-fill-mode: backwards;
 566   -moz-animation-fill-mode: backwards;
 567   animation-fill-mode: backwards; }
 568 
 569 .above-game:after {
 570   content: "";
 571   display: block;
 572   clear: both; }
 573 
 574 .game-intro {
 575   float: left;
 576   line-height: 42px;
 577   margin-bottom: 0; }
 578 
 579 .restart-button {
 580   display: inline-block;
 581   background: #8f7a66;
 582   border-radius: 3px;
 583   padding: 0 20px;
 584   text-decoration: none;
 585   color: #f9f6f2;
 586   height: 40px;
 587   line-height: 42px;
 588   cursor: pointer;
 589   display: block;
 590   text-align: center;
 591   float: right; }
 592 
 593 .game-explanation {
 594   margin-top: 50px; }
 595 
 596 .sharing {
 597   margin-top: 20px;
 598   text-align: center; }
 599   .sharing > iframe, .sharing > span, .sharing > form {
 600     display: inline-block;
 601     vertical-align: middle; }
 602 
 603 @media screen and (max- 520px) {
 604   html, body {
 605     font-size: 15px; }
 606 
 607   body {
 608     margin-top: 0;
 609     padding: 20px; }
 610 
 611   h1.title {
 612     font-size: 27px;
 613     margin-top: 15px; }
 614 
 615   .container {
 616     width: 280px;
 617     margin: 0 auto; }
 618 
 619   .score-container, .best-container {
 620     margin-top: 0;
 621     padding: 15px 10px;
 622     min-width: 40px; }
 623 
 624   .heading {
 625     margin-bottom: 10px; }
 626 
 627   .game-intro {
 628     width: 55%;
 629     display: block;
 630     box-sizing: border-box;
 631     line-height: 1.65; }
 632 
 633   .restart-button {
 634     width: 42%;
 635     padding: 0;
 636     display: block;
 637     box-sizing: border-box;
 638     margin-top: 2px; }
 639 
 640   .game-container {
 641     margin-top: 17px;
 642     position: relative;
 643     padding: 10px;
 644     cursor: default;
 645     -webkit-touch-callout: none;
 646     -ms-touch-callout: none;
 647     -webkit-user-select: none;
 648     -moz-user-select: none;
 649     -ms-user-select: none;
 650     -ms-touch-action: none;
 651     touch-action: none;
 652     background: #bbada0;
 653     border-radius: 6px;
 654     width: 280px;
 655     height: 280px;
 656     -webkit-box-sizing: border-box;
 657     -moz-box-sizing: border-box;
 658     box-sizing: border-box; }
 659 
 660   .game-message {
 661     display: none;
 662     position: absolute;
 663     top: 0;
 664     right: 0;
 665     bottom: 0;
 666     left: 0;
 667     background: rgba(238, 228, 218, 0.73);
 668     z-index: 100;
 669     padding-top: 40px;
 670     text-align: center;
 671     -webkit-animation: fade-in 800ms ease 1200ms;
 672     -moz-animation: fade-in 800ms ease 1200ms;
 673     animation: fade-in 800ms ease 1200ms;
 674     -webkit-animation-fill-mode: both;
 675     -moz-animation-fill-mode: both;
 676     animation-fill-mode: both; }
 677     .game-message p {
 678       font-size: 60px;
 679       font-weight: bold;
 680       height: 60px;
 681       line-height: 60px;
 682       margin-top: 222px; }
 683     .game-message .lower {
 684       display: block;
 685       margin-top: 29px; }
 686     .game-message .mailing-list {
 687       margin-top: 52px; }
 688       .game-message .mailing-list strong {
 689         display: block;
 690         margin-bottom: 10px; }
 691       .game-message .mailing-list .mailing-list-email-field {
 692         width: 230px;
 693         margin-right: 5px; }
 694     .game-message a {
 695       display: inline-block;
 696       background: #8f7a66;
 697       border-radius: 3px;
 698       padding: 0 20px;
 699       text-decoration: none;
 700       color: #f9f6f2;
 701       height: 40px;
 702       line-height: 42px;
 703       cursor: pointer;
 704       margin-left: 9px; }
 705       .game-message a.keep-playing-button {
 706         display: none; }
 707     .game-message .score-sharing {
 708       display: inline-block;
 709       vertical-align: middle;
 710       margin-left: 10px; }
 711     .game-message.game-won {
 712       background: rgba(237, 194, 46, 0.5);
 713       color: #f9f6f2; }
 714       .game-message.game-won a.keep-playing-button {
 715         display: inline-block; }
 716     .game-message.game-won, .game-message.game-over {
 717       display: block; }
 718       .game-message.game-won p, .game-message.game-over p {
 719         -webkit-animation: slide-up 1.5s ease-in-out 2500ms;
 720         -moz-animation: slide-up 1.5s ease-in-out 2500ms;
 721         animation: slide-up 1.5s ease-in-out 2500ms;
 722         -webkit-animation-fill-mode: both;
 723         -moz-animation-fill-mode: both;
 724         animation-fill-mode: both; }
 725       .game-message.game-won .mailing-list, .game-message.game-over .mailing-list {
 726         -webkit-animation: fade-in 1.5s ease-in-out 2500ms;
 727         -moz-animation: fade-in 1.5s ease-in-out 2500ms;
 728         animation: fade-in 1.5s ease-in-out 2500ms;
 729         -webkit-animation-fill-mode: both;
 730         -moz-animation-fill-mode: both;
 731         animation-fill-mode: both; }
 732 
 733   .grid-container {
 734     position: absolute;
 735     z-index: 1; }
 736 
 737   .grid-row {
 738     margin-bottom: 10px; }
 739     .grid-row:last-child {
 740       margin-bottom: 0; }
 741     .grid-row:after {
 742       content: "";
 743       display: block;
 744       clear: both; }
 745 
 746   .grid-cell {
 747     width: 57.5px;
 748     height: 57.5px;
 749     margin-right: 10px;
 750     float: left;
 751     border-radius: 3px;
 752     background: rgba(238, 228, 218, 0.35); }
 753     .grid-cell:last-child {
 754       margin-right: 0; }
 755 
 756   .tile-container {
 757     position: absolute;
 758     z-index: 2; }
 759 
 760   .tile, .tile .tile-inner {
 761     width: 58px;
 762     height: 58px;
 763     line-height: 67.5px; }
 764   .tile.tile-position-1-1 {
 765     -webkit-transform: translate(0px, 0px);
 766     -moz-transform: translate(0px, 0px);
 767     transform: translate(0px, 0px); }
 768   .tile.tile-position-1-2 {
 769     -webkit-transform: translate(0px, 67px);
 770     -moz-transform: translate(0px, 67px);
 771     transform: translate(0px, 67px); }
 772   .tile.tile-position-1-3 {
 773     -webkit-transform: translate(0px, 135px);
 774     -moz-transform: translate(0px, 135px);
 775     transform: translate(0px, 135px); }
 776   .tile.tile-position-1-4 {
 777     -webkit-transform: translate(0px, 202px);
 778     -moz-transform: translate(0px, 202px);
 779     transform: translate(0px, 202px); }
 780   .tile.tile-position-2-1 {
 781     -webkit-transform: translate(67px, 0px);
 782     -moz-transform: translate(67px, 0px);
 783     transform: translate(67px, 0px); }
 784   .tile.tile-position-2-2 {
 785     -webkit-transform: translate(67px, 67px);
 786     -moz-transform: translate(67px, 67px);
 787     transform: translate(67px, 67px); }
 788   .tile.tile-position-2-3 {
 789     -webkit-transform: translate(67px, 135px);
 790     -moz-transform: translate(67px, 135px);
 791     transform: translate(67px, 135px); }
 792   .tile.tile-position-2-4 {
 793     -webkit-transform: translate(67px, 202px);
 794     -moz-transform: translate(67px, 202px);
 795     transform: translate(67px, 202px); }
 796   .tile.tile-position-3-1 {
 797     -webkit-transform: translate(135px, 0px);
 798     -moz-transform: translate(135px, 0px);
 799     transform: translate(135px, 0px); }
 800   .tile.tile-position-3-2 {
 801     -webkit-transform: translate(135px, 67px);
 802     -moz-transform: translate(135px, 67px);
 803     transform: translate(135px, 67px); }
 804   .tile.tile-position-3-3 {
 805     -webkit-transform: translate(135px, 135px);
 806     -moz-transform: translate(135px, 135px);
 807     transform: translate(135px, 135px); }
 808   .tile.tile-position-3-4 {
 809     -webkit-transform: translate(135px, 202px);
 810     -moz-transform: translate(135px, 202px);
 811     transform: translate(135px, 202px); }
 812   .tile.tile-position-4-1 {
 813     -webkit-transform: translate(202px, 0px);
 814     -moz-transform: translate(202px, 0px);
 815     transform: translate(202px, 0px); }
 816   .tile.tile-position-4-2 {
 817     -webkit-transform: translate(202px, 67px);
 818     -moz-transform: translate(202px, 67px);
 819     transform: translate(202px, 67px); }
 820   .tile.tile-position-4-3 {
 821     -webkit-transform: translate(202px, 135px);
 822     -moz-transform: translate(202px, 135px);
 823     transform: translate(202px, 135px); }
 824   .tile.tile-position-4-4 {
 825     -webkit-transform: translate(202px, 202px);
 826     -moz-transform: translate(202px, 202px);
 827     transform: translate(202px, 202px); }
 828 
 829   .tile .tile-inner {
 830     font-size: 35px; }
 831 
 832   .game-message {
 833     padding-top: 0; }
 834     .game-message p {
 835       font-size: 30px !important;
 836       height: 30px !important;
 837       line-height: 30px !important;
 838       margin-top: 32% !important;
 839       margin-bottom: 0 !important; }
 840     .game-message .lower {
 841       margin-top: 10px !important; }
 842     .game-message.game-won .score-sharing {
 843       margin-top: 10px; }
 844     .game-message.game-over .mailing-list {
 845       margin-top: 25px; }
 846     .game-message .mailing-list {
 847       margin-top: 10px; }
 848       .game-message .mailing-list .mailing-list-email-field {
 849         width: 180px; }
 850 
 851   .sharing > iframe, .sharing > span, .sharing > form {
 852     display: block;
 853     margin: 0 auto;
 854     margin-bottom: 20px; } }
 855 .pp-donate button {
 856   -webkit-appearance: none;
 857   -moz-appearance: none;
 858   appearance: none;
 859   border: none;
 860   font: inherit;
 861   color: inherit;
 862   display: inline-block;
 863   background: #8f7a66;
 864   border-radius: 3px;
 865   padding: 0 20px;
 866   text-decoration: none;
 867   color: #f9f6f2;
 868   height: 40px;
 869   line-height: 42px;
 870   cursor: pointer; }
 871   .pp-donate button img {
 872     vertical-align: -4px;
 873     margin-right: 8px; }
 874 
 875 .btc-donate {
 876   position: relative;
 877   margin-left: 10px;
 878   display: inline-block;
 879   background: #8f7a66;
 880   border-radius: 3px;
 881   padding: 0 20px;
 882   text-decoration: none;
 883   color: #f9f6f2;
 884   height: 40px;
 885   line-height: 42px;
 886   cursor: pointer; }
 887   .btc-donate img {
 888     vertical-align: -4px;
 889     margin-right: 8px; }
 890   .btc-donate a {
 891     color: #f9f6f2;
 892     text-decoration: none;
 893     font-weight: normal; }
 894   .btc-donate .address {
 895     cursor: auto;
 896     position: absolute;
 897     width: 340px;
 898     right: 50%;
 899     margin-right: -170px;
 900     padding-bottom: 7px;
 901     top: -30px;
 902     opacity: 0;
 903     pointer-events: none;
 904     -webkit-transition: 400ms ease;
 905     -moz-transition: 400ms ease;
 906     transition: 400ms ease;
 907     -webkit-transition-property: top, opacity;
 908     -moz-transition-property: top, opacity;
 909     transition-property: top, opacity; }
 910     .btc-donate .address:after {
 911       position: absolute;
 912       border-top: 10px solid #bbada0;
 913       border-right: 7px solid transparent;
 914       border-left: 7px solid transparent;
 915       content: "";
 916       bottom: 0px;
 917       left: 50%;
 918       margin-left: -7px; }
 919     .btc-donate .address code {
 920       background-color: #bbada0;
 921       padding: 10px 15px;
 922       width: 100%;
 923       border-radius: 3px;
 924       line-height: 1;
 925       font-weight: normal;
 926       font-size: 15px;
 927       font-family: Consolas, "Liberation Mono", Courier, monospace;
 928       text-align: center; }
 929   .btc-donate:hover .address, .btc-donate .address:hover .address {
 930     opacity: 1;
 931     top: -45px;
 932     pointer-events: auto; }
 933   @media screen and (max- 520px) {
 934     .btc-donate {
 935       width: 120px; }
 936       .btc-donate .address {
 937         margin-right: -150px;
 938         width: 300px; }
 939         .btc-donate .address code {
 940           font-size: 13px; }
 941         .btc-donate .address:after {
 942           left: 50%;
 943           bottom: 2px; } }
 944 
 945 @-webkit-keyframes pop-in-big {
 946   0% {
 947     -webkit-transform: scale(0) translateZ(0);
 948     -moz-transform: scale(0) translateZ(0);
 949     transform: scale(0) translateZ(0);
 950     opacity: 0;
 951     margin-top: -56px; }
 952 
 953   100% {
 954     -webkit-transform: scale(1) translateZ(0);
 955     -moz-transform: scale(1) translateZ(0);
 956     transform: scale(1) translateZ(0);
 957     opacity: 1;
 958     margin-top: 30px; } }
 959 @-moz-keyframes pop-in-big {
 960   0% {
 961     -webkit-transform: scale(0) translateZ(0);
 962     -moz-transform: scale(0) translateZ(0);
 963     transform: scale(0) translateZ(0);
 964     opacity: 0;
 965     margin-top: -56px; }
 966 
 967   100% {
 968     -webkit-transform: scale(1) translateZ(0);
 969     -moz-transform: scale(1) translateZ(0);
 970     transform: scale(1) translateZ(0);
 971     opacity: 1;
 972     margin-top: 30px; } }
 973 @keyframes pop-in-big {
 974   0% {
 975     -webkit-transform: scale(0) translateZ(0);
 976     -moz-transform: scale(0) translateZ(0);
 977     transform: scale(0) translateZ(0);
 978     opacity: 0;
 979     margin-top: -56px; }
 980 
 981   100% {
 982     -webkit-transform: scale(1) translateZ(0);
 983     -moz-transform: scale(1) translateZ(0);
 984     transform: scale(1) translateZ(0);
 985     opacity: 1;
 986     margin-top: 30px; } }
 987 @-webkit-keyframes pop-in-small {
 988   0% {
 989     -webkit-transform: scale(0) translateZ(0);
 990     -moz-transform: scale(0) translateZ(0);
 991     transform: scale(0) translateZ(0);
 992     opacity: 0;
 993     margin-top: -76px; }
 994 
 995   100% {
 996     -webkit-transform: scale(1) translateZ(0);
 997     -moz-transform: scale(1) translateZ(0);
 998     transform: scale(1) translateZ(0);
 999     opacity: 1;
1000     margin-top: 10px; } }
1001 @-moz-keyframes pop-in-small {
1002   0% {
1003     -webkit-transform: scale(0) translateZ(0);
1004     -moz-transform: scale(0) translateZ(0);
1005     transform: scale(0) translateZ(0);
1006     opacity: 0;
1007     margin-top: -76px; }
1008 
1009   100% {
1010     -webkit-transform: scale(1) translateZ(0);
1011     -moz-transform: scale(1) translateZ(0);
1012     transform: scale(1) translateZ(0);
1013     opacity: 1;
1014     margin-top: 10px; } }
1015 @keyframes pop-in-small {
1016   0% {
1017     -webkit-transform: scale(0) translateZ(0);
1018     -moz-transform: scale(0) translateZ(0);
1019     transform: scale(0) translateZ(0);
1020     opacity: 0;
1021     margin-top: -76px; }
1022 
1023   100% {
1024     -webkit-transform: scale(1) translateZ(0);
1025     -moz-transform: scale(1) translateZ(0);
1026     transform: scale(1) translateZ(0);
1027     opacity: 1;
1028     margin-top: 10px; } }
1029 .app-notice {
1030   position: relative;
1031   -webkit-animation: pop-in-big 700ms ease 2s both;
1032   -moz-animation: pop-in-big 700ms ease 2s both;
1033   animation: pop-in-big 700ms ease 2s both;
1034   background: #edc53f;
1035   color: white;
1036   padding: 18px;
1037   margin-top: 30px;
1038   height: 56px;
1039   box-sizing: border-box;
1040   border-radius: 3px; }
1041   .app-notice:after {
1042     content: "";
1043     display: block;
1044     clear: both; }
1045   .app-notice .notice-close-button {
1046     float: right;
1047     font-weight: bold;
1048     cursor: pointer;
1049     margin-left: 10px;
1050     opacity: 0.7; }
1051   .app-notice p {
1052     margin-bottom: 0; }
1053   .app-notice, .app-notice p {
1054     line-height: 20px; }
1055   .app-notice a {
1056     color: white; }
1057   @media screen and (max- 520px) {
1058     .app-notice {
1059       -webkit-animation: pop-in-small 700ms ease 2s both;
1060       -moz-animation: pop-in-small 700ms ease 2s both;
1061       animation: pop-in-small 700ms ease 2s both;
1062       margin-top: 10px;
1063       height: 76px; } }

学习JavaScript的参考书：《JavaScript权威指南》

推荐网站：http://www.w3school.com.cn