4 lines
37 KiB
HTML
4 lines
37 KiB
HTML
|
|
|
|
|
|
<style> html, body { margin: 0; padding: 0; background: #faf8ef; color: #776e65; font-family: "Microsoft YaHei", sans-serif, "Microsoft Sans Serif","Microsoft JhengHei UI"; font-size: 18px;} body { margin: 80px 0;} input { display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer; font: inherit; border: none; outline: none; box-sizing: border-box; font-weight: bold; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;} input[type="text"], input[type="email"] { cursor: auto; background: #fcfbf9; font-weight: normal; color: #776e65; padding: 0 15px;} input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder { color: #9d948c;} input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder { color: #9d948c;} input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder { color: #9d948c;} .heading:after { content: ""; display: block; clear: both;} h1.title { font-size: 80px; font-weight: bold; margin: 0; display: block; float: left;} @-webkit-keyframes move-up { 0% { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; }} @-moz-keyframes move-up { 0% { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; }} @keyframes move-up { 0% { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; }} .scores-container { float: right; text-align: right;} .score-container, .best-container { position: relative; display: inline-block; background: #bbada0; padding: 15px 25px; font-size: 25px; height: 25px; line-height: 47px; font-weight: bold; border-radius: 3px; color: white; margin-top: 8px; text-align: center;} .score-container:after, .best-container:after { position: absolute; width: 100%; top: 10px; left: 0; text-transform: uppercase; font-size: 13px; line-height: 13px; text-align: center; color: #eee4da;} .score-container .score-addition, .best-container .score-addition { position: absolute; right: 30px; color: red; font-size: 25px; line-height: 25px; font-weight: bold; color: rgba(119, 110, 101, 0.9); z-index: 100; -webkit-animation: move-up 600ms ease-in; -moz-animation: move-up 600ms ease-in; animation: move-up 600ms ease-in; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both;} .score-container:after { content: "Score";} .best-container:after { content: "Best";} p { margin-top: 0; margin-bottom: 10px; line-height: 1.65;} a { color: #776e65; font-weight: bold; text-decoration: underline; cursor: pointer;} strong.important { text-transform: uppercase;} hr { border: none; border-bottom: 1px solid #d8d4d0; margin-top: 20px; margin-bottom: 30px;} .container { width: 500px; margin: 0 auto;} @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }} @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }} @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }} @-webkit-keyframes slide-up { 0% { margin-top: 32%; } 100% { margin-top: 20%; }} @-moz-keyframes slide-up { 0% { margin-top: 32%; } 100% { margin-top: 20%; }} @keyframes slide-up { 0% { margin-top: 32%; } 100% { margin-top: 20%; }} .game-container { margin-top: 40px; position: relative; padding: 15px; cursor: default; -webkit-touch-callout: none; -ms-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; touch-action: none; background: #bbada0; border-radius: 6px; width: 500px; height: 500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .game-message { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 228, 218, 0.73); z-index: 100; padding-top: 40px; text-align: center; -webkit-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms; animation: fade-in 800ms ease 1200ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both;} .game-message p { font-size: 60px; font-weight: bold; height: 60px; line-height: 60px; margin-top: 222px;} .game-message .lower { display: block; margin-top: 29px;} .game-message .mailing-list { margin-top: 52px;} .game-message .mailing-list strong { display: block; margin-bottom: 10px;} .game-message .mailing-list .mailing-list-email-field { width: 230px; margin-right: 5px;} .game-message a { display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer; margin-left: 9px;} .game-message a.keep-playing-button { display: none;} .game-message .score-sharing { display: inline-block; vertical-align: middle; margin-left: 10px;} .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2;} .game-message.game-won a.keep-playing-button { display: inline-block;} .game-message.game-won, .game-message.game-over { display: block;} .game-message.game-won p, .game-message.game-over p { -webkit-animation: slide-up 1.5s ease-in-out 2500ms; -moz-animation: slide-up 1.5s ease-in-out 2500ms; animation: slide-up 1.5s ease-in-out 2500ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both;} .game-message.game-won .mailing-list, .game-message.game-over .mailing-list { -webkit-animation: fade-in 1.5s ease-in-out 2500ms; -moz-animation: fade-in 1.5s ease-in-out 2500ms; animation: fade-in 1.5s ease-in-out 2500ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both;} .grid-container { position: absolute; z-index: 1;} .grid-row { margin-bottom: 15px;} .grid-row:last-child { margin-bottom: 0;} .grid-row:after { content: ""; display: block; clear: both;} .grid-cell { width: 106.25px; height: 106.25px; margin-right: 15px; float: left; border-radius: 3px; background: rgba(238, 228, 218, 0.35);} .grid-cell:last-child { margin-right: 0;} .tile-container { position: absolute; z-index: 2;} .tile, .tile .tile-inner { width: 107px; height: 107px; line-height: 116.25px;} .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px);} .tile.tile-position-1-2 { -webkit-transform: translate(0px, 121px); -moz-transform: translate(0px, 121px); transform: translate(0px, 121px);} .tile.tile-position-1-3 { -webkit-transform: translate(0px, 242px); -moz-transform: translate(0px, 242px); transform: translate(0px, 242px);} .tile.tile-position-1-4 { -webkit-transform: translate(0px, 363px); -moz-transform: translate(0px, 363px); transform: translate(0px, 363px);} .tile.tile-position-2-1 { -webkit-transform: translate(121px, 0px); -moz-transform: translate(121px, 0px); transform: translate(121px, 0px);} .tile.tile-position-2-2 { -webkit-transform: translate(121px, 121px); -moz-transform: translate(121px, 121px); transform: translate(121px, 121px);} .tile.tile-position-2-3 { -webkit-transform: translate(121px, 242px); -moz-transform: translate(121px, 242px); transform: translate(121px, 242px);} .tile.tile-position-2-4 { -webkit-transform: translate(121px, 363px); -moz-transform: translate(121px, 363px); transform: translate(121px, 363px);} .tile.tile-position-3-1 { -webkit-transform: translate(242px, 0px); -moz-transform: translate(242px, 0px); transform: translate(242px, 0px);} .tile.tile-position-3-2 { -webkit-transform: translate(242px, 121px); -moz-transform: translate(242px, 121px); transform: translate(242px, 121px);} .tile.tile-position-3-3 { -webkit-transform: translate(242px, 242px); -moz-transform: translate(242px, 242px); transform: translate(242px, 242px);} .tile.tile-position-3-4 { -webkit-transform: translate(242px, 363px); -moz-transform: translate(242px, 363px); transform: translate(242px, 363px);} .tile.tile-position-4-1 { -webkit-transform: translate(363px, 0px); -moz-transform: translate(363px, 0px); transform: translate(363px, 0px);} .tile.tile-position-4-2 { -webkit-transform: translate(363px, 121px); -moz-transform: translate(363px, 121px); transform: translate(363px, 121px);} .tile.tile-position-4-3 { -webkit-transform: translate(363px, 242px); -moz-transform: translate(363px, 242px); transform: translate(363px, 242px);} .tile.tile-position-4-4 { -webkit-transform: translate(363px, 363px); -moz-transform: translate(363px, 363px); transform: translate(363px, 363px);} .tile { position: absolute; -webkit-transition: 100ms ease-in-out; -moz-transition: 100ms ease-in-out; transition: 100ms ease-in-out; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform;} .tile .tile-inner { border-radius: 3px; background: #eee4da; text-align: center; font-weight: bold; z-index: 10; font-size: 40px;} .tile.tile-2 .tile-inner { background: #eee4da; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);} .tile.tile-4 .tile-inner { background: #ede0c8; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);} .tile.tile-8 .tile-inner { color: #f9f6f2; background: #f2b179;} .tile.tile-16 .tile-inner { color: #f9f6f2; background: #f59563;} .tile.tile-32 .tile-inner { color: #f9f6f2; background: #f67c5f;} .tile.tile-64 .tile-inner { color: #f9f6f2; background: #f65e3b; font-size: 30px;} @media screen and (max-width: 520px) { .tile.tile-64 .tile-inner { font-size: 17px; }} .tile.tile-128 .tile-inner { color: #f9f6f2; background: #edcf72; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); font-size: 25px;} @media screen and (max-width: 520px) { .tile.tile-128 .tile-inner { font-size: 13px; }} .tile.tile-256 .tile-inner { color: #f9f6f2; background: #edcc61; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); font-size: 30px;} @media screen and (max-width: 520px) { .tile.tile-256 .tile-inner { font-size: 17px; }} .tile.tile-512 .tile-inner { color: #f9f6f2; background: #edc850; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); font-size: 30px;} @media screen and (max-width: 520px) { .tile.tile-512 .tile-inner { font-size: 17px; }} .tile.tile-1024 .tile-inner { color: #f9f6f2; background: #edc53f; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); font-size: 30px;} @media screen and (max-width: 520px) { .tile.tile-1024 .tile-inner { font-size: 17px; }} .tile.tile-2048 .tile-inner { color: #f9f6f2; background: #edc22e; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); font-size: 30px;} @media screen and (max-width: 520px) { .tile.tile-2048 .tile-inner { font-size: 17px; }} .tile.tile-super .tile-inner { color: #f9f6f2; background: #3c3a32; font-size: 30px;} @media screen and (max-width: 520px) { .tile.tile-super .tile-inner { font-size: 17px; }} @-webkit-keyframes appear { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }} @-moz-keyframes appear { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }} @keyframes appear { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }} .tile-new .tile-inner { -webkit-animation: appear 200ms ease 100ms; -moz-animation: appear 200ms ease 100ms; animation: appear 200ms ease 100ms; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards;} @-webkit-keyframes pop { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }} @-moz-keyframes pop { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }} @keyframes pop { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }} .tile-merged .tile-inner { z-index: 20; -webkit-animation: pop 200ms ease 100ms; -moz-animation: pop 200ms ease 100ms; animation: pop 200ms ease 100ms; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards;} .above-game:after { content: ""; display: block; clear: both;} .game-intro { float: left; line-height: 42px; margin-bottom: 0;} .restart-button { display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer; display: block; text-align: center; float: right;} .game-explanation { margin-top: 50px;} .sharing { margin-top: 20px; text-align: center;} .sharing > iframe, .sharing > span, .sharing > form { display: inline-block; vertical-align: middle;} @media screen and (max-width: 520px) { html, body { font-size: 15px; } body { margin: 20px 0; padding: 0 20px; } h1.title { font-size: 27px; margin-top: 15px; } .container { width: 280px; margin: 0 auto; } .score-container, .best-container { margin-top: 0; padding: 15px 10px; min-width: 40px; } .heading { margin-bottom: 10px; } .game-intro { width: 55%; display: block; box-sizing: border-box; line-height: 1.65; } .restart-button { width: 42%; padding: 0; display: block; box-sizing: border-box; margin-top: 2px; } .game-container { margin-top: 17px; position: relative; padding: 10px; cursor: default; -webkit-touch-callout: none; -ms-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; touch-action: none; background: #bbada0; border-radius: 6px; width: 280px; height: 280px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .game-message { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 228, 218, 0.73); z-index: 100; padding-top: 40px; text-align: center; -webkit-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms; animation: fade-in 800ms ease 1200ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .game-message p { font-size: 60px; font-weight: bold; height: 60px; line-height: 60px; margin-top: 222px; } .game-message .lower { display: block; margin-top: 29px; } .game-message .mailing-list { margin-top: 52px; } .game-message .mailing-list strong { display: block; margin-bottom: 10px; } .game-message .mailing-list .mailing-list-email-field { width: 230px; margin-right: 5px; } .game-message a { display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer; margin-left: 9px; } .game-message a.keep-playing-button { display: none; } .game-message .score-sharing { display: inline-block; vertical-align: middle; margin-left: 10px; } .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2; } .game-message.game-won a.keep-playing-button { display: inline-block; } .game-message.game-won, .game-message.game-over { display: block; } .game-message.game-won p, .game-message.game-over p { -webkit-animation: slide-up 1.5s ease-in-out 2500ms; -moz-animation: slide-up 1.5s ease-in-out 2500ms; animation: slide-up 1.5s ease-in-out 2500ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .game-message.game-won .mailing-list, .game-message.game-over .mailing-list { -webkit-animation: fade-in 1.5s ease-in-out 2500ms; -moz-animation: fade-in 1.5s ease-in-out 2500ms; animation: fade-in 1.5s ease-in-out 2500ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .grid-container { position: absolute; z-index: 1; } .grid-row { margin-bottom: 10px; } .grid-row:last-child { margin-bottom: 0; } .grid-row:after { content: ""; display: block; clear: both; } .grid-cell { width: 57.5px; height: 57.5px; margin-right: 10px; float: left; border-radius: 3px; background: rgba(238, 228, 218, 0.35); } .grid-cell:last-child { margin-right: 0; } .tile-container { position: absolute; z-index: 2; } .tile, .tile .tile-inner { width: 58px; height: 58px; line-height: 67.5px; } .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); } .tile.tile-position-1-2 { -webkit-transform: translate(0px, 67px); -moz-transform: translate(0px, 67px); transform: translate(0px, 67px); } .tile.tile-position-1-3 { -webkit-transform: translate(0px, 135px); -moz-transform: translate(0px, 135px); transform: translate(0px, 135px); } .tile.tile-position-1-4 { -webkit-transform: translate(0px, 202px); -moz-transform: translate(0px, 202px); transform: translate(0px, 202px); } .tile.tile-position-2-1 { -webkit-transform: translate(67px, 0px); -moz-transform: translate(67px, 0px); transform: translate(67px, 0px); } .tile.tile-position-2-2 { -webkit-transform: translate(67px, 67px); -moz-transform: translate(67px, 67px); transform: translate(67px, 67px); } .tile.tile-position-2-3 { -webkit-transform: translate(67px, 135px); -moz-transform: translate(67px, 135px); transform: translate(67px, 135px); } .tile.tile-position-2-4 { -webkit-transform: translate(67px, 202px); -moz-transform: translate(67px, 202px); transform: translate(67px, 202px); } .tile.tile-position-3-1 { -webkit-transform: translate(135px, 0px); -moz-transform: translate(135px, 0px); transform: translate(135px, 0px); } .tile.tile-position-3-2 { -webkit-transform: translate(135px, 67px); -moz-transform: translate(135px, 67px); transform: translate(135px, 67px); } .tile.tile-position-3-3 { -webkit-transform: translate(135px, 135px); -moz-transform: translate(135px, 135px); transform: translate(135px, 135px); } .tile.tile-position-3-4 { -webkit-transform: translate(135px, 202px); -moz-transform: translate(135px, 202px); transform: translate(135px, 202px); } .tile.tile-position-4-1 { -webkit-transform: translate(202px, 0px); -moz-transform: translate(202px, 0px); transform: translate(202px, 0px); } .tile.tile-position-4-2 { -webkit-transform: translate(202px, 67px); -moz-transform: translate(202px, 67px); transform: translate(202px, 67px); } .tile.tile-position-4-3 { -webkit-transform: translate(202px, 135px); -moz-transform: translate(202px, 135px); transform: translate(202px, 135px); } .tile.tile-position-4-4 { -webkit-transform: translate(202px, 202px); -moz-transform: translate(202px, 202px); transform: translate(202px, 202px); } .tile .tile-inner { font-size: 25px; } .game-message { padding-top: 0; } .game-message p { font-size: 30px !important; height: 30px !important; line-height: 30px !important; margin-top: 32% !important; margin-bottom: 0 !important; } .game-message .lower { margin-top: 10px !important; } .game-message.game-won .score-sharing { margin-top: 10px; } .game-message.game-over .mailing-list { margin-top: 25px; } .game-message .mailing-list { margin-top: 10px; } .game-message .mailing-list .mailing-list-email-field { width: 180px; } .sharing > iframe, .sharing > span, .sharing > form { display: block; margin: 0 auto; margin-bottom: 20px; }} .pp-donate button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; font: inherit; color: inherit; display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer;} .pp-donate button img { vertical-align: -4px; margin-right: 8px;} .btc-donate { position: relative; margin-left: 10px; display: inline-block; background: #8f7a66; border-radius: 3px; padding: 0 20px; text-decoration: none; color: #f9f6f2; height: 40px; line-height: 42px; cursor: pointer;} .btc-donate img { vertical-align: -4px; margin-right: 8px;} .btc-donate a { color: #f9f6f2; text-decoration: none; font-weight: normal;} .btc-donate .address { cursor: auto; position: absolute; width: 340px; right: 50%; margin-right: -170px; padding-bottom: 7px; top: -30px; opacity: 0; pointer-events: none; -webkit-transition: 400ms ease; -moz-transition: 400ms ease; transition: 400ms ease; -webkit-transition-property: top, opacity; -moz-transition-property: top, opacity; transition-property: top, opacity;} .btc-donate .address:after { position: absolute; border-top: 10px solid #bbada0; border-right: 7px solid transparent; border-left: 7px solid transparent; content: ""; bottom: 0px; left: 50%; margin-left: -7px;} .btc-donate .address code { background-color: #bbada0; padding: 10px 15px; width: 100%; border-radius: 3px; line-height: 1; font-weight: normal; font-size: 15px; font-family: Consolas, "Liberation Mono", Courier, monospace; text-align: center;} .btc-donate:hover .address, .btc-donate .address:hover .address { opacity: 1; top: -45px; pointer-events: auto;} @media screen and (max-width: 480px) { .btc-donate { width: 120px; } .btc-donate .address { margin-right: -150px; width: 300px; } .btc-donate .address code { font-size: 13px; } .btc-donate .address:after { left: 50%; bottom: 2px; }}</style><div class="container"> <div class="heading"> <h1 class="title">2048go</h1> <div class="scores-container"> <div class="score-container">104<div class="score-addition">+24</div></div> <div class="best-container">1420</div> </div> </div> <div class="above-game"> <a class="restart-button">New Game</a> </div> <div class="game-container"> <div class="game-message"> <p> </p> <div class="lower"> <a class="keep-playing-button">Keep Going</a> <a class="retry-button">Try Again?</a> <div class="score-sharing"></div> </div> </div> <div class="grid-container"> <div class="grid-row"> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> </div> <div class="grid-row"> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> </div> <div class="grid-row"> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> </div> <div class="grid-row"> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> <div class="grid-cell"> </div> </div> </div> <div class="tile-container"><div class="tile tile-2 tile-position-1-1"><div class="tile-inner">2</div></div><div class="tile tile-8 tile-position-1-2"><div class="tile-inner">6</div></div><div class="tile tile-8 tile-position-1-2"><div class="tile-inner">6</div></div><div class="tile tile-16 tile-position-1-2 tile-merged"><div class="tile-inner">8</div></div><div class="tile tile-16 tile-position-1-3"><div class="tile-inner">8</div></div><div class="tile tile-2 tile-position-1-4"><div class="tile-inner">2</div></div><div class="tile tile-4 tile-position-2-1"><div class="tile-inner">4</div></div><div class="tile tile-4 tile-position-2-1"><div class="tile-inner">4</div></div><div class="tile tile-8 tile-position-2-1 tile-merged"><div class="tile-inner">6</div></div><div class="tile tile-2 tile-position-3-1"><div class="tile-inner">2</div></div><div class="tile tile-2 tile-position-3-3 tile-new"><div class="tile-inner">2</div></div></div> </div> <script>function KeyboardInputManager(){this.events={},window.navigator.msPointerEnabled?(this.eventTouchstart="MSPointerDown",this.eventTouchmove="MSPointerMove",this.eventTouchend="MSPointerUp"):(this.eventTouchstart="touchstart",this.eventTouchmove="touchmove",this.eventTouchend="touchend"),this.listen()}function HTMLActuator(){this.tileContainer=document.querySelector(".tile-container"),this.scoreContainer=document.querySelector(".score-container"),this.bestContainer=document.querySelector(".best-container"),this.messageContainer=document.querySelector(".game-message"),this.sharingContainer=document.querySelector(".score-sharing"),this.score=0}function Grid(t,e){this.size=t,this.cells=e?this.fromState(e):this.empty()}function Tile(t,e){this.x=t.x,this.y=t.y,this.value=e||2,this.previousPosition=null,this.mergedFrom=null}function LocalStorageManager(){this.bestScoreKey="bestScore",this.gameStateKey="gameState";var t=this.localStorageSupported();this.storage=t?window.localStorage:window.fakeStorage}function GameManager(t,e,i,n){this.size=t,this.inputManager=new e,this.storageManager=new n,this.actuator=new i,this.startTiles=2,this.inputManager.on("move",this.move.bind(this)),this.inputManager.on("restart",this.restart.bind(this)),this.inputManager.on("keepPlaying",this.keepPlaying.bind(this)),this.setup()}Function.prototype.bind=Function.prototype.bind||function(t){var e=this;return function(i){i instanceof Array||(i=[i]),e.apply(t,i)}},function(){function t(t){this.el=t;for(var e=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<e.length;i++)n.call(this,e[i])}function e(t,e,i){Object.defineProperty?Object.defineProperty(t,e,{get:i}):t.__defineGetter__(e,i)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var i=Array.prototype,n=i.push,o=i.splice,r=i.join;t.prototype={add:function(t){this.contains(t)||(n.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var e=0;e<this.length&&this[e]!=t;e++);o.call(this,e,1),this.el.className=this.toString()}},toString:function(){return r.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,e(HTMLElement.prototype,"classList",function(){return new t(this)})}}(),function(){for(var t=0,e=["webkit","moz"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e){var i=(new Date).getTime(),n=Math.max(0,16-(i-t)),o=window.setTimeout(function(){e(i+n)},n);return t=i+n,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),KeyboardInputManager.prototype.on=function(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)},KeyboardInputManager.prototype.emit=function(t,e){var i=this.events[t];i&&i.forEach(function(t){t(e)})},KeyboardInputManager.prototype.listen=function(){var t=this,e={38:0,39:1,40:2,37:3,75:0,76:1,74:2,72:3,87:0,68:1,83:2,65:3};document.addEventListener("keydown",function(i){var n=i.altKey||i.ctrlKey||i.metaKey||i.shiftKey,o=e[i.which];t.targetIsInput(i)||(n||void 0!==o&&(i.preventDefault(),t.emit("move",o)),n||82!==i.which||t.restart.call(t,i))}),this.bindButtonPress(".retry-button",this.restart),this.bindButtonPress(".restart-button",this.restart),this.bindButtonPress(".keep-playing-button",this.keepPlaying);var i,n,o=document.getElementsByClassName("game-container")[0];o.addEventListener(this.eventTouchstart,function(e){!window.navigator.msPointerEnabled&&e.touches.length>1||e.targetTouches>1||t.targetIsInput(e)||(window.navigator.msPointerEnabled?(i=e.pageX,n=e.pageY):(i=e.touches[0].clientX,n=e.touches[0].clientY),e.preventDefault())}),o.addEventListener(this.eventTouchmove,function(t){t.preventDefault()}),o.addEventListener(this.eventTouchend,function(e){if(!(!window.navigator.msPointerEnabled&&e.touches.length>0||e.targetTouches>0||t.targetIsInput(e))){var o,r;window.navigator.msPointerEnabled?(o=e.pageX,r=e.pageY):(o=e.changedTouches[0].clientX,r=e.changedTouches[0].clientY);var a=o-i,s=Math.abs(a),c=r-n,l=Math.abs(c);Math.max(s,l)>10&&t.emit("move",s>l?a>0?1:3:c>0?2:0)}})},KeyboardInputManager.prototype.restart=function(t){t.preventDefault(),this.emit("restart")},KeyboardInputManager.prototype.keepPlaying=function(t){t.preventDefault(),this.emit("keepPlaying")},KeyboardInputManager.prototype.bindButtonPress=function(t,e){var i=document.querySelector(t);i.addEventListener("click",e.bind(this)),i.addEventListener(this.eventTouchend,e.bind(this))},KeyboardInputManager.prototype.targetIsInput=function(t){return"input"===t.target.tagName.toLowerCase()},HTMLActuator.prototype.actuate=function(t,e){var i=this;window.requestAnimationFrame(function(){i.clearContainer(i.tileContainer),t.cells.forEach(function(t){t.forEach(function(t){t&&i.addTile(t)})}),i.updateScore(e.score),i.updateBestScore(e.bestScore),e.terminated&&(e.over?i.message(!1):e.won&&i.message(!0))})},HTMLActuator.prototype.continueGame=function(){"undefined"!=typeof ga&&ga("send","event","game","restart"),this.clearMessage()},HTMLActuator.prototype.clearContainer=function(t){for(;t.firstChild;)t.removeChild(t.firstChild)},HTMLActuator.prototype.tileHTML=["2","4","8","16","32","64","128","256","512","1024","2048"],HTMLActuator.prototype.addTile=function(t){var e=this,i=document.createElement("div"),n=document.createElement("div"),o=t.previousPosition||{x:t.x,y:t.y},r=this.positionClass(o),a=["tile","tile-"+t.value,r];t.value>2048&&a.push("tile-super"),this.applyClasses(i,a),n.classList.add("tile-inner"),n.textContent=HTMLActuator.prototype.tileHTML[Math.log(t.value)/Math.LN2-1]||t.value,t.previousPosition?window.requestAnimationFrame(function(){a[2]=e.positionClass({x:t.x,y:t.y}),e.applyClasses(i,a)}):t.mergedFrom?(a.push("tile-merged"),this.applyClasses(i,a),t.mergedFrom.forEach(function(t){e.addTile(t)})):(a.push("tile-new"),this.applyClasses(i,a)),i.appendChild(n),this.tileContainer.appendChild(i)},HTMLActuator.prototype.applyClasses=function(t,e){t.setAttribute("class",e.join(" "))},HTMLActuator.prototype.normalizePosition=function(t){return{x:t.x+1,y:t.y+1}},HTMLActuator.prototype.positionClass=function(t){return t=this.normalizePosition(t),"tile-position-"+t.x+"-"+t.y},HTMLActuator.prototype.updateScore=function(t){this.clearContainer(this.scoreContainer);var e=t-this.score;if(this.score=t,this.scoreContainer.textContent=this.score,e>0){var i=document.createElement("div");i.classList.add("score-addition"),i.textContent="+"+e,this.scoreContainer.appendChild(i)}},HTMLActuator.prototype.updateBestScore=function(t){this.bestContainer.textContent=t},HTMLActuator.prototype.message=function(t){var e=t?"game-won":"game-over",i=t?"You Win!":"Game Over!";"undefined"!=typeof ga&&ga("send","event","game","end",e,this.score),this.messageContainer.classList.add(e),this.messageContainer.getElementsByTagName("p")[0].textContent=i,this.clearContainer(this.sharingContainer),this.sharingContainer.appendChild(this.scoreTweetButton())},HTMLActuator.prototype.clearMessage=function(){this.messageContainer.classList.remove("game-won"),this.messageContainer.classList.remove("game-over")},HTMLActuator.prototype.scoreTweetButton=function(){var t=document.createElement("a");t.classList.add("twitter-share-button"),t.setAttribute("href","https://github.com/Browncha023/Vengeance"),t.setAttribute("data-via","gabrielecirulli"),t.setAttribute("data-url","https://git.io/2048"),t.setAttribute("data-counturl","https://gabrielecirulli.github.io/2048/"),t.textContent="Github";var e="I scored "+this.score+" points at 2048, a game where you join numbers to score high! #2048game";t.setAttribute("target", "_blank");return t.setAttribute("data-text",e),t},Grid.prototype.empty=function(){for(var t=[],e=0;e<this.size;e++)for(var i=t[e]=[],n=0;n<this.size;n++)i.push(null);return t},Grid.prototype.fromState=function(t){for(var e=[],i=0;i<this.size;i++)for(var n=e[i]=[],o=0;o<this.size;o++){var r=t[i][o];n.push(r?new Tile(r.position,r.value):null)}return e},Grid.prototype.randomAvailableCell=function(){var t=this.availableCells();return t.length?t[Math.floor(Math.random()*t.length)]:void 0},Grid.prototype.availableCells=function(){var t=[];return this.eachCell(function(e,i,n){n||t.push({x:e,y:i})}),t},Grid.prototype.eachCell=function(t){for(var e=0;e<this.size;e++)for(var i=0;i<this.size;i++)t(e,i,this.cells[e][i])},Grid.prototype.cellsAvailable=function(){return!!this.availableCells().length},Grid.prototype.cellAvailable=function(t){return!this.cellOccupied(t)},Grid.prototype.cellOccupied=function(t){return!!this.cellContent(t)},Grid.prototype.cellContent=function(t){return this.withinBounds(t)?this.cells[t.x][t.y]:null},Grid.prototype.insertTile=function(t){this.cells[t.x][t.y]=t},Grid.prototype.removeTile=function(t){this.cells[t.x][t.y]=null},Grid.prototype.withinBounds=function(t){return t.x>=0&&t.x<this.size&&t.y>=0&&t.y<this.size},Grid.prototype.serialize=function(){for(var t=[],e=0;e<this.size;e++)for(var i=t[e]=[],n=0;n<this.size;n++)i.push(this.cells[e][n]?this.cells[e][n].serialize():null);return{size:this.size,cells:t}},Tile.prototype.savePosition=function(){this.previousPosition={x:this.x,y:this.y}},Tile.prototype.updatePosition=function(t){this.x=t.x,this.y=t.y},Tile.prototype.serialize=function(){return{position:{x:this.x,y:this.y},value:this.value}},window.fakeStorage={_data:{},setItem:function(t,e){return this._data[t]=String(e)},getItem:function(t){return this._data.hasOwnProperty(t)?this._data[t]:void 0},removeItem:function(t){return delete this._data[t]},clear:function(){return this._data={}}},LocalStorageManager.prototype.localStorageSupported=function(){var t="test",e=window.localStorage;try{return e.setItem(t,"1"),e.removeItem(t),!0}catch(i){return!1}},LocalStorageManager.prototype.getBestScore=function(){return this.storage.getItem(this.bestScoreKey)||0},LocalStorageManager.prototype.setBestScore=function(t){this.storage.setItem(this.bestScoreKey,t)},LocalStorageManager.prototype.getGameState=function(){var t=this.storage.getItem(this.gameStateKey);return t?JSON.parse(t):null},LocalStorageManager.prototype.setGameState=function(t){this.storage.setItem(this.gameStateKey,JSON.stringify(t))},LocalStorageManager.prototype.clearGameState=function(){this.storage.removeItem(this.gameStateKey)},GameManager.prototype.restart=function(){this.storageManager.clearGameState(),this.actuator.continueGame(),this.setup()},GameManager.prototype.keepPlaying=function(){this.keepPlaying=!0,this.actuator.continueGame()},GameManager.prototype.isGameTerminated=function(){return this.over||this.won&&!this.keepPlaying?!0:!1},GameManager.prototype.setup=function(){var t=this.storageManager.getGameState();t?(this.grid=new Grid(t.grid.size,t.grid.cells),this.score=t.score,this.over=t.over,this.won=t.won,this.keepPlaying=t.keepPlaying):(this.grid=new Grid(this.size),this.score=0,this.over=!1,this.won=!1,this.keepPlaying=!1,this.addStartTiles()),this.actuate()},GameManager.prototype.addStartTiles=function(){for(var t=0;t<this.startTiles;t++)this.addRandomTile()},GameManager.prototype.addRandomTile=function(){if(this.grid.cellsAvailable()){var t=Math.random()<.9?2:4,e=new Tile(this.grid.randomAvailableCell(),t);this.grid.insertTile(e)}},GameManager.prototype.actuate=function(){this.storageManager.getBestScore()<this.score&&this.storageManager.setBestScore(this.score),this.over?this.storageManager.clearGameState():this.storageManager.setGameState(this.serialize()),this.actuator.actuate(this.grid,{score:this.score,over:this.over,won:this.won,bestScore:this.storageManager.getBestScore(),terminated:this.isGameTerminated()})},GameManager.prototype.serialize=function(){return{grid:this.grid.serialize(),score:this.score,over:this.over,won:this.won,keepPlaying:this.keepPlaying}},GameManager.prototype.prepareTiles=function(){this.grid.eachCell(function(t,e,i){i&&(i.mergedFrom=null,i.savePosition())})},GameManager.prototype.moveTile=function(t,e){this.grid.cells[t.x][t.y]=null,this.grid.cells[e.x][e.y]=t,t.updatePosition(e)},GameManager.prototype.move=function(t){var e=this;if(!this.isGameTerminated()){var i,n,o=this.getVector(t),r=this.buildTraversals(o),a=!1;this.prepareTiles(),r.x.forEach(function(t){r.y.forEach(function(r){if(i={x:t,y:r},n=e.grid.cellContent(i)){var s=e.findFarthestPosition(i,o),c=e.grid.cellContent(s.next);if(c&&c.value===n.value&&!c.mergedFrom){var l=new Tile(s.next,2*n.value);l.mergedFrom=[n,c],e.grid.insertTile(l),e.grid.removeTile(n),n.updatePosition(s.next),e.score+=l.value,2048===l.value&&(e.won=!0)}else e.moveTile(n,s.farthest);e.positionsEqual(i,n)||(a=!0)}})}),a&&(this.addRandomTile(),this.movesAvailable()||(this.over=!0),this.actuate())}},GameManager.prototype.getVector=function(t){var e={0:{x:0,y:-1},1:{x:1,y:0},2:{x:0,y:1},3:{x:-1,y:0}};return e[t]},GameManager.prototype.buildTraversals=function(t){for(var e={x:[],y:[]},i=0;i<this.size;i++)e.x.push(i),e.y.push(i);return 1===t.x&&(e.x=e.x.reverse()),1===t.y&&(e.y=e.y.reverse()),e},GameManager.prototype.findFarthestPosition=function(t,e){var i;do i=t,t={x:i.x+e.x,y:i.y+e.y};while(this.grid.withinBounds(t)&&this.grid.cellAvailable(t));return{farthest:i,next:t}},GameManager.prototype.movesAvailable=function(){return this.grid.cellsAvailable()||this.tileMatchesAvailable()},GameManager.prototype.tileMatchesAvailable=function(){for(var t,e=this,i=0;i<this.size;i++)for(var n=0;n<this.size;n++)if(t=this.grid.cellContent({x:i,y:n}))for(var o=0;4>o;o++){var r=e.getVector(o),a={x:i+r.x,y:n+r.y},s=e.grid.cellContent(a);if(s&&s.value===t.value)return!0}return!1},GameManager.prototype.positionsEqual=function(t,e){return t.x===e.x&&t.y===e.y},window.requestAnimationFrame(function(){new GameManager(4,KeyboardInputManager,HTMLActuator,LocalStorageManager)});</script></div> |