官方源代码:http://jsbin.com/biximuho/6/edit
参考博客: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权威指南》