add win condition
add win condition

function GameManager(size, InputManager, Actuator) { function GameManager(size, InputManager, Actuator) {
this.size = size; // Size of the grid this.size = size; // Size of the grid
this.inputManager = new InputManager; this.inputManager = new InputManager;
this.actuator = new Actuator; this.actuator = new Actuator;
   
this.startTiles = 2; this.startTiles = 2;
this.grid = new Grid(this.size); this.grid = new Grid(this.size);
   
this.score = 0; this.score = 0;
this.over = false; this.over = false;
  this.won = false;
   
this.inputManager.on("move", this.move.bind(this)); this.inputManager.on("move", this.move.bind(this));
   
this.setup(); this.setup();
} }
   
// Set up the game // Set up the game
GameManager.prototype.setup = function () { GameManager.prototype.setup = function () {
this.addStartTiles(); this.addStartTiles();
   
// Update the actuator // Update the actuator
this.actuate(); this.actuate();
}; };
   
// Set up the initial tiles to start the game with // Set up the initial tiles to start the game with
GameManager.prototype.addStartTiles = function () { GameManager.prototype.addStartTiles = function () {
for (var i = 0; i < this.startTiles; i++) { for (var i = 0; i < this.startTiles; i++) {
this.addRandomTile(); this.addRandomTile();
} }
}; };
   
// Adds a tile in a random position // Adds a tile in a random position
GameManager.prototype.addRandomTile = function () { GameManager.prototype.addRandomTile = function () {
if (this.grid.cellsAvailable()) { if (this.grid.cellsAvailable()) {
var value = Math.random() < 0.9 ? 2 : 4; var value = Math.random() < 0.9 ? 2 : 4;
var tile = new Tile(this.grid.randomAvailableCell(), value); var tile = new Tile(this.grid.randomAvailableCell(), value);
   
this.grid.insertTile(tile); this.grid.insertTile(tile);
} }
}; };
   
// Sends the updated grid to the actuator // Sends the updated grid to the actuator
GameManager.prototype.actuate = function () { GameManager.prototype.actuate = function () {
this.actuator.actuate(this.grid, { this.actuator.actuate(this.grid, {
score: this.score, score: this.score,
over: this.over over: this.over,
  won: this.won
}); });
}; };
   
// Save all tile positions and remove merger info // Save all tile positions and remove merger info
GameManager.prototype.prepareTiles = function () { GameManager.prototype.prepareTiles = function () {
this.grid.eachCell(function (x, y, tile) { this.grid.eachCell(function (x, y, tile) {
if (tile) { if (tile) {
tile.mergedFrom = null; tile.mergedFrom = null;
tile.savePosition(); tile.savePosition();
} }
}); });
}; };
   
// Move a tile and its representation // Move a tile and its representation
GameManager.prototype.moveTile = function (tile, cell) { GameManager.prototype.moveTile = function (tile, cell) {
this.grid.cells[tile.x][tile.y] = null; this.grid.cells[tile.x][tile.y] = null;
this.grid.cells[cell.x][cell.y] = tile; this.grid.cells[cell.x][cell.y] = tile;
tile.updatePosition(cell); tile.updatePosition(cell);
}; };
   
// Move tiles on the grid in the specified direction // Move tiles on the grid in the specified direction
GameManager.prototype.move = function (direction) { GameManager.prototype.move = function (direction) {
// 0: up, 1: right, 2:down, 3: left // 0: up, 1: right, 2:down, 3: left
var self = this; var self = this;
   
if (this.over) return; // Don't do anything if the game's over if (this.over || this.won) return; // Don't do anything if the game's over
   
var cell, tile; var cell, tile;
   
var vector = this.getVector(direction); var vector = this.getVector(direction);
var traversals = this.buildTraversals(vector); var traversals = this.buildTraversals(vector);
var moved = false; var moved = false;
   
// Save the current tile positions and remove merger information // Save the current tile positions and remove merger information
this.prepareTiles(); this.prepareTiles();
   
// Traverse the grid in the right direction and move tiles // Traverse the grid in the right direction and move tiles
traversals.x.forEach(function (x) { traversals.x.forEach(function (x) {
traversals.y.forEach(function (y) { traversals.y.forEach(function (y) {
cell = { x: x, y: y }; cell = { x: x, y: y };
tile = self.grid.cellContent(cell); tile = self.grid.cellContent(cell);
   
if (tile) { if (tile) {
var positions = self.findFarthestPosition(cell, vector); var positions = self.findFarthestPosition(cell, vector);
var next = self.grid.cellContent(positions.next); var next = self.grid.cellContent(positions.next);
   
// Only one merger per row traversal? // Only one merger per row traversal?
if (next && next.value === tile.value && !next.mergedFrom) { if (next && next.value === tile.value && !next.mergedFrom) {
var merged = new Tile(positions.next, tile.value * 2); var merged = new Tile(positions.next, tile.value * 2);
merged.mergedFrom = [tile, next]; merged.mergedFrom = [tile, next];
   
self.grid.insertTile(merged); self.grid.insertTile(merged);
self.grid.removeTile(tile); self.grid.removeTile(tile);
   
// Converge the two tiles' positions // Converge the two tiles' positions
tile.updatePosition(positions.next); tile.updatePosition(positions.next);
   
// Update the score // Update the score
self.score += merged.value; self.score += merged.value;
   
// Something's moved for sure // The mighty 2048 tile
  if (merged.value === 2048) self.won = true;
} else { } else {
self.moveTile(tile, positions.farthest); self.moveTile(tile, positions.farthest);
} }
   
if (!self.positionsEqual(cell, tile)) { if (!self.positionsEqual(cell, tile)) {
moved = true; // The tile moved from its original cell! moved = true; // The tile moved from its original cell!
} }
} }
}); });
}); });
   
if (moved) { if (moved) {
this.addRandomTile(); this.addRandomTile();
   
if (!this.movesAvailable()) { if (!this.movesAvailable()) {
this.over = true; // Game over! this.over = true; // Game over!
} }
   
this.actuate(); this.actuate();
} }
}; };
   
// Get the vector representing the chosen direction // Get the vector representing the chosen direction
GameManager.prototype.getVector = function (direction) { GameManager.prototype.getVector = function (direction) {
// Vectors representing tile movement // Vectors representing tile movement
var map = { var map = {
0: { x: 0, y: -1 }, // up 0: { x: 0, y: -1 }, // up
1: { x: 1, y: 0 }, // right 1: { x: 1, y: 0 }, // right
2: { x: 0, y: 1 }, // down 2: { x: 0, y: 1 }, // down
3: { x: -1, y: 0 } // left 3: { x: -1, y: 0 } // left
}; };
   
return map[direction]; return map[direction];
}; };
   
// Build a list of positions to traverse in the right order // Build a list of positions to traverse in the right order
GameManager.prototype.buildTraversals = function (vector) { GameManager.prototype.buildTraversals = function (vector) {
var traversals = { x: [], y: [] }; var traversals = { x: [], y: [] };
   
for (var pos = 0; pos < this.size; pos++) { for (var pos = 0; pos < this.size; pos++) {
traversals.x.push(pos); traversals.x.push(pos);
traversals.y.push(pos); traversals.y.push(pos);
} }
   
// Always traverse from the farthest cell in the chosen direction // Always traverse from the farthest cell in the chosen direction
if (vector.x === 1) traversals.x = traversals.x.reverse(); if (vector.x === 1) traversals.x = traversals.x.reverse();
if (vector.y === 1) traversals.y = traversals.y.reverse(); if (vector.y === 1) traversals.y = traversals.y.reverse();
   
return traversals; return traversals;
}; };
   
GameManager.prototype.findFarthestPosition = function (cell, vector) { GameManager.prototype.findFarthestPosition = function (cell, vector) {
var previous; var previous;
   
// Progress towards the vector direction until an obstacle is found // Progress towards the vector direction until an obstacle is found
do { do {
previous = cell; previous = cell;
cell = { x: previous.x + vector.x, y: previous.y + vector.y }; cell = { x: previous.x + vector.x, y: previous.y + vector.y };
} while (this.grid.withinBounds(cell) && } while (this.grid.withinBounds(cell) &&
this.grid.cellAvailable(cell)); this.grid.cellAvailable(cell));
   
return { return {
farthest: previous, farthest: previous,
next: cell // Used to check if a merge is required next: cell // Used to check if a merge is required
}; };
}; };
   
GameManager.prototype.movesAvailable = function () { GameManager.prototype.movesAvailable = function () {
return this.grid.cellsAvailable() || this.tileMatchesAvailable(); return this.grid.cellsAvailable() || this.tileMatchesAvailable();
}; };
   
// Check for available matches between tiles (more expensive check) // Check for available matches between tiles (more expensive check)
GameManager.prototype.tileMatchesAvailable = function () { GameManager.prototype.tileMatchesAvailable = function () {
var self = this; var self = this;
   
var tile; var tile;
   
for (var x = 0; x < this.size; x++) { for (var x = 0; x < this.size; x++) {
for (var y = 0; y < this.size; y++) { for (var y = 0; y < this.size; y++) {
tile = this.grid.cellContent({ x: x, y: y }); tile = this.grid.cellContent({ x: x, y: y });
   
if (tile) { if (tile) {
for (var direction = 0; direction < 4; direction++) { for (var direction = 0; direction < 4; direction++) {
var vector = self.getVector(direction); var vector = self.getVector(direction);
var cell = { x: x + vector.x, y: y + vector.y }; var cell = { x: x + vector.x, y: y + vector.y };
   
var other = self.grid.cellContent(cell); var other = self.grid.cellContent(cell);
if (other) { if (other) {
} }
   
if (other && other.value === tile.value) { if (other && other.value === tile.value) {
return true; // These two tiles can be merged return true; // These two tiles can be merged
} }
} }
} }
} }
} }
   
return false; return false;
}; };
   
GameManager.prototype.positionsEqual = function (first, second) { GameManager.prototype.positionsEqual = function (first, second) {
return first.x === second.x && first.y === second.y; return first.x === second.x && first.y === second.y;
}; };
   
function HTMLActuator() { function HTMLActuator() {
this.tileContainer = document.getElementsByClassName("tile-container")[0]; this.tileContainer = document.getElementsByClassName("tile-container")[0];
this.gameContainer = document.getElementsByClassName("game-container")[0]; this.gameContainer = document.getElementsByClassName("game-container")[0];
this.scoreContainer = document.getElementsByClassName("score-container")[0]; this.scoreContainer = document.getElementsByClassName("score-container")[0];
   
this.score = 0; this.score = 0;
} }
   
HTMLActuator.prototype.actuate = function (grid, metadata) { HTMLActuator.prototype.actuate = function (grid, metadata) {
var self = this; var self = this;
   
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
self.clearContainer(self.tileContainer); self.clearContainer(self.tileContainer);
   
grid.cells.forEach(function (column) { grid.cells.forEach(function (column) {
column.forEach(function (cell) { column.forEach(function (cell) {
if (cell) { if (cell) {
self.addTile(cell); self.addTile(cell);
} }
}); });
}); });
   
self.updateScore(metadata.score); self.updateScore(metadata.score);
   
if (metadata.over) { if (metadata.over) self.message(false); // You lose
self.gameOver(); if (metadata.won) self.message(true); // You win!
}  
}); });
}; };
   
HTMLActuator.prototype.clearContainer = function (container) { HTMLActuator.prototype.clearContainer = function (container) {
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.firstChild); container.removeChild(container.firstChild);
} }
}; };
   
HTMLActuator.prototype.addTile = function (tile) { HTMLActuator.prototype.addTile = function (tile) {
var self = this; var self = this;
   
var element = document.createElement("div"); var element = document.createElement("div");
var position = tile.previousPosition || { x: tile.x, y: tile.y }; var position = tile.previousPosition || { x: tile.x, y: tile.y };
positionClass = this.positionClass(position); positionClass = this.positionClass(position);
   
element.classList.add("tile", "tile-" + tile.value, positionClass); element.classList.add("tile", "tile-" + tile.value, positionClass);
element.textContent = tile.value; element.textContent = tile.value;
   
this.tileContainer.appendChild(element); this.tileContainer.appendChild(element);
   
if (tile.previousPosition) { if (tile.previousPosition) {
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
element.classList.remove(element.classList[2]); element.classList.remove(element.classList[2]);
element.classList.add(self.positionClass({ x: tile.x, y: tile.y })); element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
}); });
} else if (tile.mergedFrom) { } else if (tile.mergedFrom) {
element.classList.add("tile-merged"); element.classList.add("tile-merged");
tile.mergedFrom.forEach(function (merged) { tile.mergedFrom.forEach(function (merged) {
self.addTile(merged); self.addTile(merged);
}); });
} else { } else {
element.classList.add("tile-new"); element.classList.add("tile-new");
} }
}; };
   
HTMLActuator.prototype.normalizePosition = function (position) { HTMLActuator.prototype.normalizePosition = function (position) {
return { x: position.x + 1, y: position.y + 1 }; return { x: position.x + 1, y: position.y + 1 };
}; };
   
HTMLActuator.prototype.positionClass = function (position) { HTMLActuator.prototype.positionClass = function (position) {
position = this.normalizePosition(position); position = this.normalizePosition(position);
return "tile-position-" + position.x + "-" + position.y; return "tile-position-" + position.x + "-" + position.y;
}; };
   
HTMLActuator.prototype.updateScore = function (score) { HTMLActuator.prototype.updateScore = function (score) {
this.clearContainer(this.scoreContainer); this.clearContainer(this.scoreContainer);
   
var difference = score - this.score; var difference = score - this.score;
this.score = score; this.score = score;
   
this.scoreContainer.textContent = this.score; this.scoreContainer.textContent = this.score;
   
if (difference) { if (difference) {
var addition = document.createElement("div"); var addition = document.createElement("div");
addition.classList.add("score-addition"); addition.classList.add("score-addition");
addition.textContent = "+" + difference; addition.textContent = "+" + difference;
   
this.scoreContainer.appendChild(addition); this.scoreContainer.appendChild(addition);
} }
}; };
   
HTMLActuator.prototype.gameOver = function () { HTMLActuator.prototype.message = function (won) {
this.gameContainer.classList.add("game-over"); var type = won ? "game-won" : "game-over";
  this.gameContainer.classList.add(type);
}; };
   
@import url(fonts/clear-sans.css); @import url(fonts/clear-sans.css);
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #faf8ef; background: #faf8ef;
color: #776e65; color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; } font-size: 18px; }
   
body { body {
margin: 80px 0; } margin: 80px 0; }
   
.heading:after { .heading:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
h1.title { h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: block; display: block;
float: left; } float: left; }
   
@-webkit-keyframes move-up { @-webkit-keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
@-moz-keyframes move-up { @-moz-keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
@keyframes move-up { @keyframes move-up {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; } opacity: 1; }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; } } opacity: 0; } }
   
.score-container { .score-container {
position: relative; position: relative;
float: right; float: right;
background: #bbada0; background: #bbada0;
padding: 15px 30px; padding: 15px 20px;
font-size: 25px; font-size: 25px;
height: 25px; height: 25px;
line-height: 47px; line-height: 47px;
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
color: white; color: white;
margin-top: 8px; } margin-top: 8px; }
.score-container:after { .score-container:after {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 10px; top: 10px;
left: 0; left: 0;
content: "Score"; content: "Score";
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
text-align: center; text-align: center;
color: #eee4da; } color: #eee4da; }
.score-container .score-addition { .score-container .score-addition {
position: absolute; position: absolute;
right: 30px; right: 30px;
color: red; color: red;
font-size: 25px; font-size: 25px;
line-height: 25px; line-height: 25px;
font-weight: bold; font-weight: bold;
color: rgba(119, 110, 101, 0.9); color: rgba(119, 110, 101, 0.9);
z-index: 100; z-index: 100;
-webkit-animation: move-up 600ms ease-in; -webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in; -moz-animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
   
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.65; } line-height: 1.65; }
   
a { a {
color: #776e65; color: #776e65;
font-weight: bold; font-weight: bold;
text-decoration: underline; } text-decoration: underline; }
   
strong.important { strong.important {
text-transform: uppercase; } text-transform: uppercase; }
   
hr { hr {
border: none; border: none;
border-bottom: 1px solid #d8d4d0; border-bottom: 1px solid #d8d4d0;
margin-top: 20px; margin-top: 20px;
margin-bottom: 30px; } margin-bottom: 30px; }
   
.container { .container {
width: 500px; width: 500px;
margin: 0 auto; } margin: 0 auto; }
   
@-webkit-keyframes fade-in { @-webkit-keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
@-moz-keyframes fade-in { @-moz-keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
opacity: 0; } opacity: 0; }
   
100% { 100% {
opacity: 1; } } opacity: 1; } }
   
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: 15px; padding: 15px;
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
background: #bbada0; background: #bbada0;
border-radius: 6px; border-radius: 6px;
width: 500px; width: 500px;
height: 500px; height: 500px;
box-sizing: border-box; } box-sizing: border-box; }
.game-container.game-over:after { .game-container.game-over:after, .game-container.game-won:after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
content: "Game over!";  
display: block; display: block;
background: rgba(238, 228, 218, 0.5); background: rgba(238, 228, 218, 0.5);
text-align: center; text-align: center;
height: 500px; height: 500px;
line-height: 500px; line-height: 500px;
z-index: 100; z-index: 100;
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
-webkit-animation: fade-in 800ms ease 1200ms; -webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms; -moz-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
  .game-container.game-over:after {
  content: "Game over!"; }
  .game-container.game-won:after {
  content: "You win!";
  background: rgba(237, 194, 46, 0.5);
  color: #f9f6f2; }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
   
.grid-row { .grid-row {
margin-bottom: 15px; } margin-bottom: 15px; }
.grid-row:last-child { .grid-row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.grid-row:after { .grid-row:after {
content: ""; content: "";
display: block; display: block;
clear: both; } clear: both; }
   
.grid-cell { .grid-cell {
width: 106.25px; width: 106.25px;
height: 106.25px; height: 106.25px;
margin-right: 15px; margin-right: 15px;
float: left; float: left;
border-radius: 3px; border-radius: 3px;
background: rgba(238, 228, 218, 0.35); } background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child { .grid-cell:last-child {
margin-right: 0; } margin-right: 0; }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; } z-index: 2; }
   
.tile { .tile {
background: red; background: red;
width: 106.25px; width: 106.25px;
height: 106.25px; height: 106.25px;
border-radius: 3px; border-radius: 3px;
background: #eee4da; background: #eee4da;
text-align: center; text-align: center;
line-height: 116.25px; line-height: 116.25px;
font-size: 55px; font-size: 55px;
font-weight: bold; font-weight: bold;
z-index: 10; z-index: 10;
-webkit-transition: 100ms ease-in-out; -webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out; -moz-transition: 100ms ease-in-out;
-webkit-transition-property: top, left; -webkit-transition-property: top, left;
-moz-transition-property: top, left; } -moz-transition-property: top, left; }
.tile.tile-position-1-1 { .tile.tile-position-1-1 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; } top: 0px; }
.tile.tile-position-1-2 { .tile.tile-position-1-2 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 121px; } top: 121px; }
.tile.tile-position-1-3 { .tile.tile-position-1-3 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 243px; } top: 243px; }
.tile.tile-position-1-4 { .tile.tile-position-1-4 {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 364px; } top: 364px; }
.tile.tile-position-2-1 { .tile.tile-position-2-1 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 0px; } top: 0px; }
.tile.tile-position-2-2 { .tile.tile-position-2-2 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 121px; } top: 121px; }
.tile.tile-position-2-3 { .tile.tile-position-2-3 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 243px; } top: 243px; }
.tile.tile-position-2-4 { .tile.tile-position-2-4 {
position: absolute; position: absolute;
left: 121px; left: 121px;
top: 364px; } top: 364px; }
.tile.tile-position-3-1 { .tile.tile-position-3-1 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 0px; } top: 0px; }
.tile.tile-position-3-2 { .tile.tile-position-3-2 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 121px; } top: 121px; }
.tile.tile-position-3-3 { .tile.tile-position-3-3 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 243px; } top: 243px; }
.tile.tile-position-3-4 { .tile.tile-position-3-4 {
position: absolute; position: absolute;
left: 243px; left: 243px;
top: 364px; } top: 364px; }
.tile.tile-position-4-1 { .tile.tile-position-4-1 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 0px; } top: 0px; }
.tile.tile-position-4-2 { .tile.tile-position-4-2 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 121px; } top: 121px; }
.tile.tile-position-4-3 { .tile.tile-position-4-3 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 243px; } top: 243px; }
.tile.tile-position-4-4 { .tile.tile-position-4-4 {
position: absolute; position: absolute;
left: 364px; left: 364px;
top: 364px; } top: 364px; }
.tile.tile-2 { .tile.tile-2 {
background: #eee4da; background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } 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.tile-4 {
background: #ede0c8; background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); } 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.tile-8 {
color: #f9f6f2; color: #f9f6f2;
background: #f2b179; } background: #f2b179; }
.tile.tile-16 { .tile.tile-16 {
color: #f9f6f2; color: #f9f6f2;
background: #f59563; } background: #f59563; }
.tile.tile-32 { .tile.tile-32 {
color: #f9f6f2; color: #f9f6f2;
background: #f67c5f; } background: #f67c5f; }
.tile.tile-64 { .tile.tile-64 {
color: #f9f6f2; color: #f9f6f2;
background: #f65e3b; } background: #f65e3b; }
.tile.tile-128 { .tile.tile-128 {
color: #f9f6f2; color: #f9f6f2;
background: #edcf72; 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); 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; } font-size: 45px; }
.tile.tile-256 { .tile.tile-256 {
color: #f9f6f2; color: #f9f6f2;
background: #edcc61; 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); 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; } font-size: 45px; }
.tile.tile-512 { .tile.tile-512 {
color: #f9f6f2; color: #f9f6f2;
background: #edc850; 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); 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; } font-size: 45px; }
.tile.tile-1024 { .tile.tile-1024 {
color: #f9f6f2; color: #f9f6f2;
background: #edc53f; 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); 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; } font-size: 35px; }
.tile.tile-2048 { .tile.tile-2048 {
color: #f9f6f2; color: #f9f6f2;
background: #edc22e; 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); 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; } font-size: 35px; }
   
@-webkit-keyframes appear { @-webkit-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); } -webkit-transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); } } -webkit-transform: scale(1); } }
   
@-moz-keyframes appear { @-moz-keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); } -webkit-transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); } } -webkit-transform: scale(1); } }
   
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: scale(0); } -webkit-transform: scale(0); }
   
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); } } -webkit-transform: scale(1); } }
   
.tile-new { .tile-new {
-webkit-animation: appear 200ms ease 100ms; -webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms; -moz-animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
   
@-webkit-keyframes pop { @-webkit-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); } -webkit-transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); } -webkit-transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); } } -webkit-transform: scale(1); } }
   
@-moz-keyframes pop { @-moz-keyframes pop {
0% { 0% {
-webkit-transform: scale(0); } -webkit-transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); } -webkit-transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); } } -webkit-transform: scale(1); } }
   
@keyframes pop { @keyframes pop {
0% { 0% {
-webkit-transform: scale(0); } -webkit-transform: scale(0); }
   
50% { 50% {
-webkit-transform: scale(1.2); } -webkit-transform: scale(1.2); }
   
100% { 100% {
-webkit-transform: scale(1); } } -webkit-transform: scale(1); } }
   
.tile-merged { .tile-merged {
z-index: 20; z-index: 20;
-webkit-animation: pop 200ms ease 100ms; -webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms; -moz-animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; } -moz-animation-fill-mode: both; }
   
.game-intro { .game-intro {
margin-bottom: 0; } margin-bottom: 0; }
   
.game-explanation { .game-explanation {
margin-top: 50px; } margin-top: 50px; }
   
@import "helpers"; @import "helpers";
@import "fonts/clear-sans.css"; @import "fonts/clear-sans.css";
   
$field-width: 500px; $field-width: 500px;
$grid-spacing: 15px; $grid-spacing: 15px;
$grid-row-cells: 4; $grid-row-cells: 4;
$tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells; $tile-size: ($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells;
$tile-border-radius: 3px; $tile-border-radius: 3px;
   
$text-color: #776E65; $text-color: #776E65;
$bright-text-color: #f9f6f2; $bright-text-color: #f9f6f2;
   
$tile-color: #eee4da; $tile-color: #eee4da;
$tile-gold-color: #edc22e; $tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%); $tile-gold-glow-color: lighten($tile-gold-color, 15%);
   
$game-container-background: #bbada0; $game-container-background: #bbada0;
   
$transition-speed: 100ms; $transition-speed: 100ms;
   
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
   
background: #faf8ef; background: #faf8ef;
color: $text-color; color: $text-color;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; font-size: 18px;
} }
   
body { body {
margin: 80px 0; margin: 80px 0;
} }
   
.heading:after { .heading:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
   
h1.title { h1.title {
font-size: 80px; font-size: 80px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
display: block; display: block;
float: left; float: left;
} }
   
@include keyframes(move-up) { @include keyframes(move-up) {
0% { 0% {
top: 25px; top: 25px;
opacity: 1; opacity: 1;
} }
   
100% { 100% {
top: -50px; top: -50px;
opacity: 0; opacity: 0;
} }
} }
   
.score-container { .score-container {
$height: 25px; $height: 25px;
   
position: relative; position: relative;
float: right; float: right;
background: $game-container-background; background: $game-container-background;
padding: 15px 30px; padding: 15px 20px;
font-size: $height; font-size: $height;
height: $height; height: $height;
line-height: $height + 22px; line-height: $height + 22px;
font-weight: bold; font-weight: bold;
border-radius: 3px; border-radius: 3px;
color: white; color: white;
margin-top: 8px; margin-top: 8px;
   
&:after { &:after {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 10px; top: 10px;
left: 0; left: 0;
content: "Score"; content: "Score";
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
text-align: center; text-align: center;
color: $tile-color; color: $tile-color;
} }
   
.score-addition { .score-addition {
position: absolute; position: absolute;
right: 30px; right: 30px;
color: red; color: red;
font-size: $height; font-size: $height;
line-height: $height; line-height: $height;
font-weight: bold; font-weight: bold;
color: rgba($text-color, .9); color: rgba($text-color, .9);
z-index: 100; z-index: 100;
@include animation(move-up 600ms ease-in); @include animation(move-up 600ms ease-in);
@include animation-fill-mode(both); @include animation-fill-mode(both);
} }
} }
   
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.65; line-height: 1.65;
} }
   
a { a {
color: $text-color; color: $text-color;
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
   
strong { strong {
&.important { &.important {
text-transform: uppercase; text-transform: uppercase;
} }
} }
   
hr { hr {
border: none; border: none;
border-bottom: 1px solid lighten($text-color, 40%); border-bottom: 1px solid lighten($text-color, 40%);
margin-top: 20px; margin-top: 20px;
margin-bottom: 30px; margin-bottom: 30px;
} }
   
.container { .container {
width: $field-width; width: $field-width;
margin: 0 auto; margin: 0 auto;
} }
   
@include keyframes(fade-in) { @include keyframes(fade-in) {
0% { 0% {
opacity: 0; opacity: 0;
} }
   
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
   
.game-container { .game-container {
margin-top: 40px; margin-top: 40px;
position: relative; position: relative;
padding: $grid-spacing; padding: $grid-spacing;
   
cursor: default; cursor: default;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
   
background: $game-container-background; background: $game-container-background;
border-radius: $tile-border-radius * 2; border-radius: $tile-border-radius * 2;
width: $field-width; width: $field-width;
height: $field-width; height: $field-width;
box-sizing: border-box; box-sizing: border-box;
   
  &.game-over, &.game-won {
  &:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: rgba($tile-color, .5);
  text-align: center;
  height: $field-width;
  line-height: $field-width;
  z-index: 100;
  font-size: 60px;
  font-weight: bold;
   
  @include animation(fade-in 800ms ease $transition-speed * 12);
  @include animation-fill-mode(both);
  }
  }
   
&.game-over:after { &.game-over:after {
position: absolute;  
top: 0;  
right: 0;  
bottom: 0;  
left: 0;  
content: "Game over!"; content: "Game over!";
display: block; }
background: rgba($tile-color, .5);  
text-align: center; &.game-won:after {
height: $field-width; content: "You win!";
line-height: $field-width; background: rgba($tile-gold-color, .5);
z-index: 100; color: $bright-text-color;
font-size: 60px;  
font-weight: bold;  
   
@include animation(fade-in 800ms ease $transition-speed * 12);  
@include animation-fill-mode(both);  
} }
} }
   
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
   
.grid-row { .grid-row {
margin-bottom: $grid-spacing; margin-bottom: $grid-spacing;
   
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
   
&:after { &:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
} }
   
.grid-cell { .grid-cell {
width: $tile-size; width: $tile-size;
height: $tile-size; height: $tile-size;
margin-right: $grid-spacing; margin-right: $grid-spacing;
float: left; float: left;
   
border-radius: $tile-border-radius; border-radius: $tile-border-radius;
   
background: rgba($tile-color, .35); background: rgba($tile-color, .35);
   
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
   
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
   
.tile { .tile {
background: red; background: red;
width: $tile-size; width: $tile-size;
height: $tile-size; height: $tile-size;
border-radius: $tile-border-radius; border-radius: $tile-border-radius;
   
background: $tile-color; background: $tile-color;
text-align: center; text-align: center;
line-height: $tile-size + 10px; line-height: $tile-size + 10px;
font-size: 55px; font-size: 55px;
font-weight: bold; font-weight: bold;
z-index: 10; z-index: 10;
   
@include transition($transition-speed ease-in-out); @include transition($transition-speed ease-in-out);
@include transition-property(top, left); @include transition-property(top, left);
   
// Build position classes // Build position classes
@for $x from 1 through $grid-row-cells { @for $x from 1 through $grid-row-cells {
@for $y from 1 through $grid-row-cells { @for $y from 1 through $grid-row-cells {
&.tile-position-#{$x}-#{$y} { &.tile-position-#{$x}-#{$y} {
position: absolute; position: absolute;
left: round(($tile-size + $grid-spacing) * ($x - 1)); left: round(($tile-size + $grid-spacing) * ($x - 1));
top: round(($tile-size + $grid-spacing) * ($y - 1)); top: round(($tile-size + $grid-spacing) * ($y - 1));
} }
} }
} }
   
$base: 2; $base: 2;
$exponent: 1; $exponent: 1;
$limit: 11; $limit: 11;
   
// Colors for all 11 states, false = no special color // Colors for all 11 states, false = no special color
$special-colors: false false, // 2 $special-colors: false false, // 2
false false, // 4 false false, // 4
#f78e48 true, // 8 #f78e48 true, // 8
#fc5e2e true, // 16 #fc5e2e true, // 16
#ff3333 true, // 32 #ff3333 true, // 32
#ff0000 true, // 64 #ff0000 true, // 64
false true, // 128 false true, // 128
false true, // 256 false true, // 256
false true, // 512 false true, // 512
false true, // 1024 false true, // 1024
false true; // 2048 false true; // 2048
   
// Build tile colors // Build tile colors
@while $exponent <= $limit { @while $exponent <= $limit {
$power: pow($base, $exponent); $power: pow($base, $exponent);
   
&.tile-#{$power} { &.tile-#{$power} {
// Calculate base background color // Calculate base background color
$gold-percent: ($exponent - 1) / ($limit - 1) * 100; $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
$mixed-background: mix($tile-gold-color, $tile-color, $gold-percent); $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);
   
$nth-color: nth($special-colors, $exponent); $nth-color: nth($special-colors, $exponent);
   
$special-background: nth($nth-color, 1); $special-background: nth($nth-color, 1);
$bright-color: nth($nth-color, 2); $bright-color: nth($nth-color, 2);
   
@if $special-background { @if $special-background {
$mixed-background: mix($special-background, $mixed-background, 55%); $mixed-background: mix($special-background, $mixed-background, 55%);
} }
   
@if $bright-color { @if $bright-color {
color: $bright-text-color; color: $bright-text-color;
} }
   
// Set background // Set background
background: $mixed-background; background: $mixed-background;
   
// Add glow // Add glow
$glow-opacity: max($exponent - 4, 0) / ($limit - 4); $glow-opacity: max($exponent - 4, 0) / ($limit - 4);
   
@if not $special-background { @if not $special-background {
box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8), box-shadow: 0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8),
inset 0 0 0 1px rgba(white, $glow-opacity / 3); inset 0 0 0 1px rgba(white, $glow-opacity / 3);
} }
   
// Adjust font size for bigger numbers // Adjust font size for bigger numbers
@if $power >= 100 and $power < 1000 { @if $power >= 100 and $power < 1000 {
font-size: 45px; font-size: 45px;
} @else if $power >= 1000 { } @else if $power >= 1000 {
font-size: 35px; font-size: 35px;
} }
} }
   
$exponent: $exponent + 1; $exponent: $exponent + 1;
} }
} }
   
@include keyframes(appear) { @include keyframes(appear) {
0% { 0% {
// -webkit-transform: scale(1.5); // -webkit-transform: scale(1.5);
opacity: 0; opacity: 0;
-webkit-transform: scale(0); -webkit-transform: scale(0);
} }
   
100% { 100% {
// -webkit-transform: scale(1); // -webkit-transform: scale(1);
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
} }
} }
   
.tile-new { .tile-new {
@include animation(appear 200ms ease $transition-speed); @include animation(appear 200ms ease $transition-speed);
@include animation-fill-mode(both); @include animation-fill-mode(both);
} }
   
@include keyframes(pop) { @include keyframes(pop) {
0% { 0% {
-webkit-transform: scale(0); -webkit-transform: scale(0);
// opacity: 0; // opacity: 0;
} }
   
50% { 50% {
-webkit-transform: scale(1.2); -webkit-transform: scale(1.2);
} }
   
100% { 100% {
-webkit-transform: scale(1); -webkit-transform: scale(1);
// opacity: 1; // opacity: 1;
} }
} }
   
.tile-merged { .tile-merged {
z-index: 20; z-index: 20;
@include animation(pop 200ms ease $transition-speed); @include animation(pop 200ms ease $transition-speed);
@include animation-fill-mode(both); @include animation-fill-mode(both);
} }
   
.game-intro { .game-intro {
margin-bottom: 0; margin-bottom: 0;
} }
   
.game-explanation { .game-explanation {
margin-top: 50px; margin-top: 50px;
} }
   
comments