Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>

<head>
    <title>2048</title>
    <style>
    #center{
    max-width:500px;
    margin:auto;
}
@import url(fonts/clear-sans.css);
html, body {
  margin: 100px;
  padding: 0;
  background:#ffaa80;
  color: #776e65;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;}
body {
  margin: 80px 0; }

.heading:after {
  content: "";
  display: block;
  clear: both; }

h1.title {
  font-size: 80px;
  font-weight: bold;
  margin: 0;
  display: block;
  float: left; }
  h1.title a {
    text-decoration: none; }

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

.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-container .game-message {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(238, 228, 218, 0.5);
    z-index: 100;
    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-container .game-message p {
      font-size: 60px;
      font-weight: bold;
      height: 60px;
      line-height: 60px;
      margin-top: 222px; }
    .game-container .game-message .lower {
      display: block;
      margin-top: 59px; }
    .game-container .game-message a {
      display: inline-block;
      background: #8f7a66;
      border-radius: 3px;
      padding: 0 20px;
      text-decoration: none;
      color: #f9f6f2;
      height: 40px;
      line-height: 42px;
      margin-left: 9px; }
      .game-container .game-message a.keep-playing-button {
        display: none; }
    .game-container .game-message.game-won {
      background: rgba(237, 194, 46, 0.5);
      color: #f9f6f2; }
      .game-container .game-message.game-won a.keep-playing-button {
        display: inline-block; }
    .game-container .game-message.game-won, .game-container .game-message.game-over {
      display: block; }

.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: skyblue; }
  .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: 55px; }
  .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; }
  .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: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-128 .tile-inner {
        font-size: 25px; } }
  .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: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-256 .tile-inner {
        font-size: 25px; } }
  .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: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-512 .tile-inner {
        font-size: 25px; } }
  .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: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-1024 .tile-inner {
        font-size: 15px; } }
  .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: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-2048 .tile-inner {
        font-size: 15px; } }
  .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: 10px; } }

@-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;
  display: block;
  text-align: center;
  float: right; }

.game-explanation {
  margin-top: 50px; }

@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-container .game-message {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(238, 228, 218, 0.5);
      z-index: 100;
      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-container .game-message p {
        font-size: 60px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        margin-top: 222px; }
      .game-container .game-message .lower {
        display: block;
        margin-top: 59px; }
      .game-container .game-message a {
        display: inline-block;
        background: #8f7a66;
        border-radius: 3px;
        padding: 0 20px;
        text-decoration: none;
        color: #f9f6f2;
        height: 40px;
        line-height: 42px;
        margin-left: 9px; }
        .game-container .game-message a.keep-playing-button {
          display: none; }
      .game-container .game-message.game-won {
        background: rgba(237, 194, 46, 0.5);
        color: #f9f6f2; }
        .game-container .game-message.game-won a.keep-playing-button {
          display: inline-block; }
      .game-container .game-message.game-won, .game-container .game-message.game-over {
        display: block; }

.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: 35px; }

.game-message p {
    font-size: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin-top: 90px !important; }
  .game-message .lower {
    margin-top: 30px !important; } }
.right {
  float: right; }

.left {
  float: left; }

.clearfix {
  clear: both; }

.play-now {
  margin-top: 22px; }
  .play-now a {
    border-radius: 6px;
    padding: 12px;
    text-decoration: none;
    background-color: #bbada0;
    color: white; }
    .play-now a:hover {
      text-decoration: underline; }

body {
  margin: 30px 0;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 15px;
  position: relative; }

footer {
  padding-bottom: 30px; }

p {
  line-height: 1.45; }

.heading {
  margin-bottom: 20px; }

.side-column {
  background-image: url(/img/pattern/amam.png);
  background-position: 0px 0px;
  background-repeat: repeat-y;
  width: 180px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0; }

.side-column-left {
  left: 0;
  border-right: 1px solid white; }

.side-column-right {
  right: 0;
  border-left: 1px solid white;
  background-position: -19px 0px; }

.side-ad {
  margin-top: 360px;
  margin-left: 10px; }
  @media (min-height: 769px) {
    .side-ad {
      margin-top: 400px; } }
  .side-ad .sponsored {
    text-transform: uppercase;
    font-size: 10px; }

.game-container {
  margin-top: 25px; }

.grammarly-box {
  padding: 20px;
  background: #fff;
  margin-bottom: 30px;
  border: solid 1px #eee;
  border-top: solid 2px #F08150; }
  .grammarly-box .caption {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 10px;
    display: inline-block; }
  .grammarly-box p {
    margin-bottom: 0;
    line-height: 1.3;
    font-size: 14px; }

.bold {
  font-weight: bold; }

.box-shadow {
  background: #fff;
  position: relative; }

.box-shadow:after,
.box-shadow:before {
  top: 80%;
  left: 5px;
  width: 50%;
  z-index: -1;
  content: "";
  bottom: 15px;
  max-width: 300px;
  background: #999;
  position: absolute; }

.shadow-effect {
  position: relative; }

.shadow-effect:after, .shadow-effect:before {
  transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  box-shadow: 0 15px 10px #999;
  -moz-box-shadow: 0 15px 10px #999;
  -webkit-box-shadow: 0 15px 10px #999; }

.shadow-effect:after {
  left: auto;
  right: 5px;
  transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg); }

.top-link-ads-wrapper {
  border-bottom: 1px solid #D7C7B9;
  padding: 4px;
  margin-bottom: 15px; }

.top-link-ads {
  height: 15px; }

.text-center {
  text-align: center; }

h2.subtitle {
  font-size: 1em;
  margin: 0; }

.game-intro {
  line-height: inherit;
  float: none;
  width: 100% !important; }

.game-explanation {
  margin-top: 0px; }

.focus-line {
  background-color: #ffc;
  text-align: center;
  padding: 5px 0; }

.ads-button {
  margin-top: 15px;
  margin-bottom: 10px; }

.fb-line {
  margin-bottom: 20px;
  float: right;
  width: 160px; }
  .fb-line .game-explanation {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: justify; }
  .fb-line p {
    margin-bottom: 0px;
    float: none; }
  .fb-line .fb-like-wrapper {
    height: 30px; }

.ads-bellow-game {
  margin-bottom: 20px;
  height: 250px;
  overflow: hidden;
  float: left; }

.share-img-container {
  padding-right: 25px; }

.share-img {
  display: inline-block; }

.share-img-small {
  display: none; }

.facebook-share-button {
  color: #394F9F;
  font-size: 14px;
  display: block;
  float: left; }

.twitter-button-wrapper {
  float: left;
  font-size: 14px;
  margin-right: 10px;
  width: 61px; }

.unstyled {
  margin: 0px;
  padding-left: 0px; }
  .unstyled li {
    list-style: none; }

h1.title-internal {
  font-size: 40px; }

.shop-learn-more {
  padding: 10px 0px;
  border: 1px solid #d8d4d0;
  text-align: center;
  display: block; }
  .shop-learn-more:hover {
    background-color: #d8d4d0; }

.tips-and-tricks {
  clear: both; }
  .tips-and-tricks li {
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
    border: 1px solid #d8d4d0; }
    .tips-and-tricks li a {
      display: inline-block;
      padding: 10px 0px;
      width: 242px;
      text-align: center; }
      .tips-and-tricks li a:hover {
        background-color: #d8d4d0; }
  .tips-and-tricks li.even {
    margin-right: 0px; }

.shop-list .item-link img {
  width: 195px;
  height: 195px; }
.shop-list .item-link .title {
  margin: 5px 0; }

.quotes .quote {
  margin-bottom: 20px; }

.iframe-main {
  position: absolute;
  background: transparent;
  width: 100%;
  height: 100%;
  top: 50px;
  padding: 0; }

.score-sharing {
  display: inline-block;
  margin-left: 10px; }

footer {
  font-size: 17px; }

#flappy-thirds-wrapper {
  text-align: center; }
  #flappy-thirds-wrapper canvas {
    border: 1px solid #d8d4d0; }

.choose-language, .solitaire-ad {
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px; }

.solitaire-ad {
  padding-left: 5px; }
  .solitaire-ad img {
    margin-left: 15px; }

/* patch flag icons */
.choose-language span.flag-icon {
  border: 1px solid #776e65; }

.flag-icon-en {
  background-image: url(../flags/4x3/us.svg); }

.mobile-top {
  position: relative;
  display: none;
  margin-bottom: 15px;
  color: #f9f6f2; }
  .mobile-top .open {
    background-color: #776e65;
    padding: 10px 0; }
  .mobile-top .closed {
    display: none;
    height: 20px; }
  .mobile-top .ad {
    width: 320px;
    height: 100px;
    margin: 0 auto;
    background-color: white; }
  .mobile-top .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    color: white;
    text-decoration: none; }

.mobile-top-alt {
  display: none; }

@media screen and (max-width: 860px) {
  .side-column {
    width: 130px; }

.side-ad {
    display: none; }

.solitaire-ad img {
    width: 100px; }

.side-column-left {
    background-position: -60px 0px; } }
@media screen and (max-width: 760px) {
  .side-column {
    display: none; }

.mobile-top {
    display: block; }

body {
    padding: 0px; } }
@media screen and (min-width: 481px) {
  .tile .tile-inner {
    line-height: 107px; }

h1.title {
    font-size: 74px;
    line-height: 66px; } }
@media screen and (max-height: 768px) and (min-width: 481px) {
  .heading {
    margin-bottom: 15px; }

h1.title-internal {
    font-size: 40px;
    line-height: 64px; }

.container {
    width: 450px; }

.game-container {
    margin-top: 40px;
    position: relative;
    padding: 12px;
    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: 450px;
    height: 450px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .game-container .game-message {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(238, 228, 218, 0.5);
      z-index: 100;
      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-container .game-message p {
        font-size: 60px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        margin-top: 222px; }
      .game-container .game-message .lower {
        display: block;
        margin-top: 59px; }
      .game-container .game-message a {
        display: inline-block;
        background: #8f7a66;
        border-radius: 3px;
        padding: 0 20px;
        text-decoration: none;
        color: #f9f6f2;
        height: 40px;
        line-height: 42px;
        margin-left: 9px; }
        .game-container .game-message a.keep-playing-button {
          display: none; }
      .game-container .game-message.game-won {
        background: rgba(237, 194, 46, 0.5);
        color: #f9f6f2; }
        .game-container .game-message.game-won a.keep-playing-button {
          display: inline-block; }
      .game-container .game-message.game-won, .game-container .game-message.game-over {
        display: block; }

.grid-container {
    position: absolute;
    z-index: 1; }

.grid-row {
    margin-bottom: 12px; }
    .grid-row:last-child {
      margin-bottom: 0; }
    .grid-row:after {
      content: "";
      display: block;
      clear: both; }

.grid-cell {
    width: 97.5px;
    height: 97.5px;
    margin-right: 12px;
    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: 98px;
    height: 98px;
    line-height: 107.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, 109px);
    -moz-transform: translate(0px, 109px);
    transform: translate(0px, 109px); }
  .tile.tile-position-1-3 {
    -webkit-transform: translate(0px, 219px);
    -moz-transform: translate(0px, 219px);
    transform: translate(0px, 219px); }
  .tile.tile-position-1-4 {
    -webkit-transform: translate(0px, 328px);
    -moz-transform: translate(0px, 328px);
    transform: translate(0px, 328px); }
  .tile.tile-position-2-1 {
    -webkit-transform: translate(109px, 0px);
    -moz-transform: translate(109px, 0px);
    transform: translate(109px, 0px); }
  .tile.tile-position-2-2 {
    -webkit-transform: translate(109px, 109px);
    -moz-transform: translate(109px, 109px);
    transform: translate(109px, 109px); }
  .tile.tile-position-2-3 {
    -webkit-transform: translate(109px, 219px);
    -moz-transform: translate(109px, 219px);
    transform: translate(109px, 219px); }
  .tile.tile-position-2-4 {
    -webkit-transform: translate(109px, 328px);
    -moz-transform: translate(109px, 328px);
    transform: translate(109px, 328px); }
  .tile.tile-position-3-1 {
    -webkit-transform: translate(219px, 0px);
    -moz-transform: translate(219px, 0px);
    transform: translate(219px, 0px); }
  .tile.tile-position-3-2 {
    -webkit-transform: translate(219px, 109px);
    -moz-transform: translate(219px, 109px);
    transform: translate(219px, 109px); }
  .tile.tile-position-3-3 {
    -webkit-transform: translate(219px, 219px);
    -moz-transform: translate(219px, 219px);
    transform: translate(219px, 219px); }
  .tile.tile-position-3-4 {
    -webkit-transform: translate(219px, 328px);
    -moz-transform: translate(219px, 328px);
    transform: translate(219px, 328px); }
  .tile.tile-position-4-1 {
    -webkit-transform: translate(328px, 0px);
    -moz-transform: translate(328px, 0px);
    transform: translate(328px, 0px); }
  .tile.tile-position-4-2 {
    -webkit-transform: translate(328px, 109px);
    -moz-transform: translate(328px, 109px);
    transform: translate(328px, 109px); }
  .tile.tile-position-4-3 {
    -webkit-transform: translate(328px, 219px);
    -moz-transform: translate(328px, 219px);
    transform: translate(328px, 219px); }
  .tile.tile-position-4-4 {
    -webkit-transform: translate(328px, 328px);
    -moz-transform: translate(328px, 328px);
    transform: translate(328px, 328px); }

.tile .tile-inner {
    font-size: 53px;
    line-height: 98px; }

.tile-128 .tile-inner, .tile-256 .tile-inner, .tile-512 .tile-inner {
    font-size: 43px !important; }

.tile-1024 .tile-inner, .tile-2048 .tile-inner {
    font-size: 33px !important; }

.game-intro {
    font-size: 17px; }

.restart-button {
    padding: 0 14px; }

.game-container {
    margin-top: 10px; }

.tips-and-tricks li a {
    width: 218px; }

footer {
    font-size: 16px; } }
@media screen and (max-width: 480px) {
  html, body {
    font-size: 15px; }

body {
    margin: 0 0 20px 0; }

#flappy-thirds-wrapper canvas {
    width: 100%; }

.restart-button {
    width: 35%; }

.game-container {
    margin-top: 10px; }

.score-container:after, .best-container:after {
    font-size: 11px; }

.approved img {
    width: 280px; }

.play-now a {
    padding: 8px; }

h1.title-internal {
    font-size: 24px; }

.share-img {
    display: none; }

.share-img-small {
    display: none; }

.tips-and-tricks li a {
    width: 280px; }
  .tips-and-tricks li a.even {
    margin-right: 0px; }

.top-link-ads-wrapper {
    display: none; }

.fb-line {
    float: left;
    width: 100%;
    font-size: 15px; }

.ads-bellow-game {
    margin-top: 30px;
    text-align: center;
    float: none;
    width: 100%; } }

</style>
</head>
<script>
Function.prototype.bind = Function.prototype.bind || function(a) { var b = this; return function(c) { c instanceof Array || (c = [c]); b.apply(a, c) } } ; (function() { function a(a) { this.el = a; a = a.className.replace(/^\s+|\s+$/g, "").split(/\s+/); for (var b = 0; b < a.length; b++) d.call(this, a[b]) } function b(a, b, c) { Object.defineProperty ? Object.defineProperty(a, b, { get: c }) : a.__defineGetter__(b, c) } if (!("undefined" === typeof window.Element || "classList"in document.documentElement)) { var c = Array.prototype , d = c.push , e = c.splice , f = c.join; a.prototype = { add: function(a) { this.contains(a) || (d.call(this, a), this.el.className = this.toString()) }, contains: function(a) { return -1 != this.el.className.indexOf(a) }, item: function(a) { return this[a] || null }, remove: function(a) { if (this.contains(a)) { for (var b = 0; b < this.length && this[b] != a; b++) ; e.call(this, b, 1); this.el.className = this.toString() } }, toString: function() { return f.call(this, " ") }, toggle: function(a) { this.contains(a) ? this.remove(a) : this.add(a); return this.contains(a) } }; window.DOMTokenList = a; b(HTMLElement.prototype, "classList", function() { return new a(this) }) } })(); (function() { for (var a = 0, b = ["webkit", "moz"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"]; window.requestAnimationFrame || (window.requestAnimationFrame = function(b, c) { var f = (new Date).getTime() , h = Math.max(0, 16 - (f - a)) , g = window.setTimeout(function() { b(f + h) }, h); a = f + h; return g } ); window.cancelAnimationFrame || (window.cancelAnimationFrame = function(a) { clearTimeout(a) } ) })(); 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() } KeyboardInputManager.prototype.on = function(a, b) { this.events[a] || (this.events[a] = []); this.events[a].push(b) } ; KeyboardInputManager.prototype.emit = function(a, b) { var c = this.events[a]; c && c.forEach(function(a) { a(b) }) } ; KeyboardInputManager.prototype.listen = function() { var a = this , b = { 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(c) { var d = c.altKey || c.ctrlKey || c.metaKey || c.shiftKey , e = b[c.which]; d || void 0 === e || (c.preventDefault(), a.emit("move", e)); d || 82 !== c.which || a.restart.call(a, c) }); this.bindButtonPress(".retry-button", this.restart); this.bindButtonPress(".restart-button", this.restart); this.bindButtonPress(".keep-playing-button", this.keepPlaying); var c, d, e = document.getElementsByClassName("game-container")[0]; e.addEventListener(this.eventTouchstart, function(a) { !window.navigator.msPointerEnabled && 1 < a.touches.length || 1 < a.targetTouches || (window.navigator.msPointerEnabled ? (c = a.pageX, d = a.pageY) : (c = a.touches[0].clientX, d = a.touches[0].clientY), a.preventDefault()) }); e.addEventListener(this.eventTouchmove, function(a) { a.preventDefault() }); e.addEventListener(this.eventTouchend, function(b) { if (!(!window.navigator.msPointerEnabled && 0 < b.touches.length || 0 < b.targetTouches)) { var e, g; window.navigator.msPointerEnabled ? (e = b.pageX, g = b.pageY) : (e = b.changedTouches[0].clientX, g = b.changedTouches[0].clientY); e -= c; b = Math.abs(e); g -= d; var m = Math.abs(g); 10 < Math.max(b, m) && a.emit("move", b > m ? 0 < e ? 1 : 3 : 0 < g ? 2 : 0) } }) } ; KeyboardInputManager.prototype.restart = function(a) { a.preventDefault(); this.emit("restart") } ; KeyboardInputManager.prototype.keepPlaying = function(a) { a.preventDefault(); this.emit("keepPlaying") } ; KeyboardInputManager.prototype.bindButtonPress = function(a, b) { var c = document.querySelector(a); c.addEventListener("click", b.bind(this)); c.addEventListener(this.eventTouchend, b.bind(this)) } ; 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 } HTMLActuator.prototype.actuate = function(a, b) { var c = this; window.requestAnimationFrame(function() { c.clearContainer(c.tileContainer); a.cells.forEach(function(a) { a.forEach(function(a) { a && c.addTile(a) }) }); c.updateScore(b.score); c.updateBestScore(b.bestScore); b.terminated && (b.over ? c.message(!1) : b.won && c.message(!0)) }) } ; HTMLActuator.prototype.continueGame = function() { this.clearMessage() } ; HTMLActuator.prototype.clearContainer = function(a) { for (; a.firstChild; ) a.removeChild(a.firstChild) } ; HTMLActuator.prototype.addTile = function(a) { var b = this , c = document.createElement("div") , d = document.createElement("div") , e = this.positionClass(a.previousPosition || { x: a.x, y: a.y }) , f = ["tile", "tile-" + a.value, e]; 2048 < a.value && f.push("tile-super"); this.applyClasses(c, f); d.classList.add("tile-inner"); d.textContent = a.value; a.previousPosition ? window.requestAnimationFrame(function() { f[2] = b.positionClass({ x: a.x, y: a.y }); b.applyClasses(c, f) }) : a.mergedFrom ? (f.push("tile-merged"), this.applyClasses(c, f), a.mergedFrom.forEach(function(a) { b.addTile(a) })) : (f.push("tile-new"), this.applyClasses(c, f)); c.appendChild(d); this.tileContainer.appendChild(c) } ; HTMLActuator.prototype.applyClasses = function(a, b) { a.setAttribute("class", b.join(" ")) } ; HTMLActuator.prototype.normalizePosition = function(a) { return { x: a.x + 1, y: a.y + 1 } } ; HTMLActuator.prototype.positionClass = function(a) { a = this.normalizePosition(a); return "tile-position-" + a.x + "-" + a.y } ; HTMLActuator.prototype.updateScore = function(a) { this.clearContainer(this.scoreContainer); var b = a - this.score; this.score = a; this.scoreContainer.textContent = this.score; 0 < b && (a = document.createElement("div"), a.classList.add("score-addition"), a.textContent = "+" + b, this.scoreContainer.appendChild(a)) } ; HTMLActuator.prototype.updateBestScore = function(a) { this.bestContainer.textContent = a } ; HTMLActuator.prototype.message = function(a) { var b = a ? "You win!" : "Game over!"; this.messageContainer.classList.add(a ? "game-won" : "game-over"); this.messageContainer.getElementsByTagName("p")[0].textContent = b; this.clearContainer(this.sharingContainer); this.sharingContainer.appendChild(this.scoreTweetButton()); twttr.widgets.load() } ; HTMLActuator.prototype.clearMessage = function() { this.messageContainer.classList.remove("game-won"); this.messageContainer.classList.remove("game-over") } ; HTMLActuator.prototype.scoreTweetButton = function() { var a = document.createElement("a"); a.classList.add("twitter-share-button"); a.setAttribute("href", "https://twitter.com/share"); a.setAttribute("data-url", "http://2048game.com"); a.setAttribute("data-counturl", "http://2048game.com"); a.textContent = "Tweet"; a.setAttribute("data-text", "I scored " + this.score + " points at 2048, a game where you join numbers to score high! #2048game"); return a } ; function Grid(a, b) { this.size = a; this.cells = b ? this.fromState(b) : this.empty() } Grid.prototype.empty = function() { for (var a = [], b = 0; b < this.size; b++) for (var c = a[b] = [], d = 0; d < this.size; d++) c.push(null); return a } ; Grid.prototype.fromState = function(a) { for (var b = [], c = 0; c < this.size; c++) for (var d = b[c] = [], e = 0; e < this.size; e++) { var f = a[c][e]; d.push(f ? new Tile(f.position,f.value) : null) } return b } ; Grid.prototype.randomAvailableCell = function() { var a = this.availableCells(); if (a.length) return a[Math.floor(Math.random() * a.length)] } ; Grid.prototype.availableCells = function() { var a = []; this.eachCell(function(b, c, d) { d || a.push({ x: b, y: c }) }); return a } ; Grid.prototype.eachCell = function(a) { for (var b = 0; b < this.size; b++) for (var c = 0; c < this.size; c++) a(b, c, this.cells[b][c]) } ; Grid.prototype.cellsAvailable = function() { return !!this.availableCells().length } ; Grid.prototype.cellAvailable = function(a) { return !this.cellOccupied(a) } ; Grid.prototype.cellOccupied = function(a) { return !!this.cellContent(a) } ; Grid.prototype.cellContent = function(a) { return this.withinBounds(a) ? this.cells[a.x][a.y] : null } ; Grid.prototype.insertTile = function(a) { this.cells[a.x][a.y] = a } ; Grid.prototype.removeTile = function(a) { this.cells[a.x][a.y] = null } ; Grid.prototype.withinBounds = function(a) { return 0 <= a.x && a.x < this.size && 0 <= a.y && a.y < this.size } ; Grid.prototype.serialize = function() { for (var a = [], b = 0; b < this.size; b++) for (var c = a[b] = [], d = 0; d < this.size; d++) c.push(this.cells[b][d] ? this.cells[b][d].serialize() : null); return { size: this.size, cells: a } } ; function Tile(a, b) { this.x = a.x; this.y = a.y; this.value = b || 2; this.mergedFrom = this.previousPosition = null } Tile.prototype.savePosition = function() { this.previousPosition = { x: this.x, y: this.y } } ; Tile.prototype.updatePosition = function(a) { this.x = a.x; this.y = a.y } ; Tile.prototype.serialize = function() { return { position: { x: this.x, y: this.y }, value: this.value } } ; window.fakeStorage = { _data: {}, setItem: function(a, b) { return this._data[a] = String(b) }, getItem: function(a) { return this._data.hasOwnProperty(a) ? this._data[a] : void 0 }, removeItem: function(a) { return delete this._data[a] }, clear: function() { return this._data = {} } }; function LocalStorageManager() { this.bestScoreKey = "bestScore"; this.gameStateKey = "gameState"; this.storage = this.localStorageSupported() ? window.localStorage : window.fakeStorage } LocalStorageManager.prototype.localStorageSupported = function() { var a = window.localStorage; try { return a.setItem("test", "1"), a.removeItem("test"), !0 } catch (b) { return !1 } } ; LocalStorageManager.prototype.getBestScore = function() { return this.storage.getItem(this.bestScoreKey) || 0 } ; LocalStorageManager.prototype.setBestScore = function(a) { this.storage.setItem(this.bestScoreKey, a) } ; LocalStorageManager.prototype.getGameState = function() { var a = this.storage.getItem(this.gameStateKey); return a ? JSON.parse(a) : null } ; LocalStorageManager.prototype.setGameState = function(a) { this.storage.setItem(this.gameStateKey, JSON.stringify(a)) } ; LocalStorageManager.prototype.clearGameState = function() { this.storage.removeItem(this.gameStateKey) } ; function GameManager(a, b, c, d) { this.size = a; this.inputManager = new b; this.storageManager = new d; this.actuator = new c; 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() } 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 a = this.storageManager.getGameState(); a ? (this.grid = new Grid(a.grid.size,a.grid.cells), this.score = a.score, this.over = a.over, this.won = a.won, this.keepPlaying = a.keepPlaying) : (this.grid = new Grid(this.size), this.score = 0, this.keepPlaying = this.won = this.over = !1, this.addStartTiles()); this.actuate() } ; GameManager.prototype.addStartTiles = function() { for (var a = 0; a < this.startTiles; a++) this.addRandomTile() } ; GameManager.prototype.addRandomTile = function() { if (this.grid.cellsAvailable()) { var a = 0.9 > Math.random() ? 2 : 4 , a = new Tile(this.grid.randomAvailableCell(),a); this.grid.insertTile(a) } } ; 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(a, b, c) { c && (c.mergedFrom = null, c.savePosition()) }) } ; GameManager.prototype.moveTile = function(a, b) { this.grid.cells[a.x][a.y] = null; this.grid.cells[b.x][b.y] = a; a.updatePosition(b) } ; GameManager.prototype.move = function(a) { var b = this; if (!this.isGameTerminated()) { var c, d, e = this.getVector(a), f = this.buildTraversals(e), h = !1; this.prepareTiles(); f.x.forEach(function(a) { f.y.forEach(function(f) { c = { x: a, y: f }; if (d = b.grid.cellContent(c)) { f = b.findFarthestPosition(c, e); var k = b.grid.cellContent(f.next); if (k && k.value === d.value && !k.mergedFrom) { var l = new Tile(f.next,2 * d.value); l.mergedFrom = [d, k]; b.grid.insertTile(l); b.grid.removeTile(d); d.updatePosition(f.next); b.score += l.value; 2048 === l.value && (b.won = !0) } else b.moveTile(d, f.farthest); b.positionsEqual(c, d) || (h = !0) } }) }); h && (this.addRandomTile(), this.movesAvailable() || (this.over = !0), this.actuate()) } } ; GameManager.prototype.getVector = function(a) { return { 0: { x: 0, y: -1 }, 1: { x: 1, y: 0 }, 2: { x: 0, y: 1 }, 3: { x: -1, y: 0 } }[a] } ; GameManager.prototype.buildTraversals = function(a) { for (var b = { x: [], y: [] }, c = 0; c < this.size; c++) b.x.push(c), b.y.push(c); 1 === a.x && (b.x = b.x.reverse()); 1 === a.y && (b.y = b.y.reverse()); return b } ; GameManager.prototype.findFarthestPosition = function(a, b) { var c; do c = a, a = { x: c.x + b.x, y: c.y + b.y }; while (this.grid.withinBounds(a) && this.grid.cellAvailable(a));return { farthest: c, next: a } } ; GameManager.prototype.movesAvailable = function() { return this.grid.cellsAvailable() || this.tileMatchesAvailable() } ; GameManager.prototype.tileMatchesAvailable = function() { for (var a, b = 0; b < this.size; b++) for (var c = 0; c < this.size; c++) if (a = this.grid.cellContent({ x: b, y: c })) for (var d = 0; 4 > d; d++) { var e = this.getVector(d); if ((e = this.grid.cellContent({ x: b + e.x, y: c + e.y })) && e.value === a.value) return !0 } return !1 } ; GameManager.prototype.positionsEqual = function(a, b) { return a.x === b.x && a.y === b.y } ; window.requestAnimationFrame(function() { new GameManager(4,KeyboardInputManager,HTMLActuator,LocalStorageManager) });

</script>
<div id="center">
  <div class="heading">
  <h1 class="title">2048</h1>
  <div class="scores-container">
    <div class="score-container">0</div>
    <div class="best-container">2960</div>
  </div>
</div>
<div class="game-intro">
  <a class="restart-button">New Game</a>
  <h2 class="subtitle">Play <strong>2048 Game</strong> Online</h2>
  <div class="above-game">
    <p>Join the numbers and get to the <strong>2048 tile!</strong></p>
  </div>
</div>

<div class="game-container">
  <div class="game-message">
    <p></p>
    <div class="lower">
      <a class="keep-playing-button">Keep playing</a>
      <a class="retry-button">Try again</a>
      <div class="score-sharing">
      </div>
    </div>
  </div>

Preview

Open Advanced Editor Full Screen