Ada-C4 · yourFriendWes · Feb 2, 2016 · Feb 2, 2016 · Feb 2, 2016 · Feb 2, 2016
diff --git a/images/lf1.gif b/images/lf1.gif
diff --git a/images/lf10.jpg b/images/lf10.jpg
diff --git a/images/lf11.jpg b/images/lf11.jpg
diff --git a/images/lf12.jpg b/images/lf12.jpg
diff --git a/images/lf13.png b/images/lf13.png
diff --git a/images/lf2.gif b/images/lf2.gif
diff --git a/images/lf3.jpg b/images/lf3.jpg
diff --git a/images/lf4.jpg b/images/lf4.jpg
diff --git a/images/lf5.jpg b/images/lf5.jpg
diff --git a/images/lf6.jpg b/images/lf6.jpg
diff --git a/images/lf7.jpg b/images/lf7.jpg
diff --git a/images/lf8.jpg b/images/lf8.jpg
diff --git a/images/lf9.jpg b/images/lf9.jpg
diff --git a/index.html b/index.html
@@ -5,8 +5,18 @@
     <link rel="stylesheet" media="all" href="stylesheets/2048.css"/>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="javascripts/2048.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Berkshire+Swash" />
   </head>
   <body>
+    <div class="heading">
+      <div id="score">0</div>
+    </div>
+    <div class="above-game">
+    </div>
+    <div class="game-message">
+      <div class="lower">
+      </div>
+    </div>
     <div id="gameboard">
       <div class="cells">
         <div class="cell"></div>

diff --git a/javascripts/2048.js b/javascripts/2048.js
@@ -1,63 +1,331 @@
-function getRandomInt(min, max) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
 var Game = function() {
-  // Game logic and initialization here
   this.board = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
+  this.newTile = true;
   this.spawnTile();
   this.spawnTile();
+  this.newTile = false;
+  this.score = 0;
+};
+
+Game.prototype.findFreeSpace = function() {
+  var spaceJam = [];
+  var self = this;
+  for(var r=0; r<4; r++){
+    for(var c=0; c<4; c++){
+      if (this.board[r][c] === 0) {
+        spaceJam.push(r.toString() + c.toString());
+      }
+    }
+  }
+
+  if (spaceJam.length === 0 && !this.movesLeft()){
+    self.gameLost();
+  }else if (this.newTile) {
+    return spaceJam[Math.floor(Math.random() * spaceJam.length)];
+  }
+};
+
+Game.prototype.movesLeft = function() {
+  var r, c;
+
+  for (r=0; r<4; r++) {
+    for (c=0; c<3; c++) {
+      if (this.board[r][c] === 0) {
+        break;
+      } else if (this.board[r][c].attr('data-val') === this.board[r][c+1].attr('data-val')) {
+        return true;
+      }
+    }
+  }
+  for (c=0; c<4; c++) {
+    for (r=0; r<3; r++) {
+      if (this.board[r][c] === 0) {
+        break;
+      } else if (this.board[r][c].attr('data-val') === this.board[r+1][c].attr('data-val')) {
+        return true;
+      }
+    }
+  }
+  return false;
 };
 
 Game.prototype.spawnTile = function() {
-  var val = [2, 4][Math.floor(Math.random() * 2)];
-  var row = getRandomInt(0, 3);
-  var col = getRandomInt(0, 3);
+  var val = Math.random() < 0.9 ? 2 : 4;
+  space = this.findFreeSpace();
+  if (space !== undefined) {
+    row = space[0];
+    col = space[1];
+
+    new_tile = $('<div class="tile"></div>').attr('data-row', "r" + row).attr('data-col', "c" + col).attr('data-val', val).html(val);
+
+    $(".cells").after(new_tile);
 
-  new_tile = $('<div class="tile"></div>').attr('data-row', "r" + row).attr('data-col', "c" + col).attr('data-val', val).html(val);
+    this.board[row][col] = new_tile;
+  }
+};
 
-  $(".cells").after(new_tile);
+Game.prototype.moveLeft = function() {
+  var rowClone, colClone, cloneIndex, r, c;
 
-  this.board[row][col] = val;
+  for(r=0; r<4; r++){
+    cloneIndex = 0;
+    rowClone = new Array(5).join('0').split('').map(parseFloat);
+    for(c=0; c<4; c++){
+      if (this.board[r][c] !== 0){
+        rowClone[cloneIndex] = this.board[r][c];
+        cloneIndex++;
+      }
+    }
+
+    for (c=0; c<4; c++){
+      this.newTile = this.newTile || (rowClone[c] !== this.board[r][c]);
+    }
+    this.board[r] = rowClone;
+  }
+};
+
+Game.prototype.moveRight = function() {
+  var rowClone, colClone, cloneIndex, r, c;
+
+  for(r=0; r<4; r++){
+    cloneIndex = 3;
+    rowClone = new Array(5).join('0').split('').map(parseFloat);
+    for(c=3; c>=0; c--){
+      if (this.board[r][c] !== 0){
+        rowClone[cloneIndex] = this.board[r][c];
+        cloneIndex--;
+      }
+    }
+
+    for (c=0; c<4; c++){
+      this.newTile = this.newTile || (rowClone[c] !== this.board[r][c]);
+    }
+    this.board[r] = rowClone;
+  }
+};
+
+Game.prototype.moveUp = function() {
+  var rowClone, colClone, cloneIndex, r, c;
+
+  for(c=0; c<4; c++){
+    cloneIndex = 0;
+    colClone = new Array(5).join('0').split('').map(parseFloat);
+    for(r=0; r<4; r++){
+      if (this.board[r][c] !== 0){
+        colClone[cloneIndex] = this.board[r][c];
+        cloneIndex++;
+      }
+    }
+
+    for(r=0; r<4; r++){
+      this.newTile = this.newTile || (colClone[r] !== this.board[r][c]);
+      this.board[r][c] = colClone[r];
+    }
+  }
+};
+
+Game.prototype.moveDown = function() {
+  var rowClone, colClone, cloneIndex, r, c;
+
+  for(c=0; c<4; c++){
+    cloneIndex = 3;
+    colClone = new Array(5).join('0').split('').map(parseFloat);
+    for(r=3; r>=0; r--){
+      if (this.board[r][c] !== 0){
+        colClone[cloneIndex] = this.board[r][c];
+        cloneIndex--;
+      }
+    }
+    for(r=3; r>=0; r--){
+      this.newTile = this.newTile || (colClone[r] !== this.board[r][c]);
+      this.board[r][c] = colClone[r];
+    }
+  }
 };
 
-Game.prototype.moveTile = function(tile, direction) {
-  // Game method here
+Game.prototype.moveTile = function(direction) {
   switch(direction) {
     case 38: //up
-      console.log('up');
-      row = parseInt(tile[0].getAttribute('data-row').slice(-1));
-      tile.attr('data-row', "r" + (row - 1));
+      this.moveUp();
+      this.mergeUp();
+      this.moveUp();
+      this.updateDisplay();
+      this.spawnTile();
+      this.newTile = false;
       break;
+
     case 40: //down
-      console.log('down');
-      row = parseInt(tile[0].getAttribute('data-row').slice(-1));
-      tile.attr('data-row', "r" + (row + 1));
+      this.moveDown();
+      this.mergeDown();
+      this.moveDown();
+      this.updateDisplay();
+      this.spawnTile();
+      this.newTile = false;
       break;
+
     case 37: //left
-      console.log('left');
-      col = parseInt(tile[0].getAttribute('data-col').slice(-1));
-      tile.attr('data-col', "c" + (col - 1));
+      this.moveLeft();
+      this.mergeLeft();
+      this.moveLeft();
+      this.updateDisplay();
+      this.spawnTile();
+      this.newTile = false;
       break;
+
     case 39: //right
-      console.log('right');
-      col = parseInt(tile[0].getAttribute('data-col').slice(-1));
-      tile.attr('data-col', "c" + (col + 1));
+      this.moveRight();
+      this.mergeRight();
+      this.moveRight();
+      this.updateDisplay();
+      this.spawnTile();
+      this.newTile = false;
       break;
   }
 };
 
+Game.prototype.mergeLeft = function() {
+  for(var r=0; r<4; r++){
+    for(var c=0; c<3; c++){
+      dom = this.board[r][c];
+      nextDom = this.board[r][c+1];
+
+      if (dom !== 0 && nextDom !== 0) {
+        val = parseInt(dom.attr('data-val'));
+        nextVal = parseInt(nextDom.attr('data-val'));
+        if (val === nextVal){
+          score = val*2;
+          this.updateScore(score);
+          nextDom.attr('data-val', score).text(score);
+          this.board[r][c] = 0;
+          dom.remove();
+        }
+      }
+    }
+  }
+};
+
+Game.prototype.mergeRight = function() {
+  for(var r=0; r<4; r++){
+    for(var c=3; c>=1; c--){
+      dom = this.board[r][c];
+      nextDom = this.board[r][c-1];
+
+      if (dom !== 0 && nextDom !== 0) {
+        val = parseInt(dom.attr('data-val'));
+        nextVal = parseInt(nextDom.attr('data-val'));
+        if (val === nextVal){
+          score = val*2;
+          this.updateScore(score);
+          nextDom.attr('data-val', score).text(score);
+          this.board[r][c] = 0;
+          dom.remove();
+        }
+      }
+    }
+  }
+};
+
+Game.prototype.mergeUp = function() {
+  for(var c=0; c<4; c++){
+    for(var r=0; r<3; r++){
+      dom = this.board[r][c];
+      nextDom = this.board[r+1][c];
+
+      if (dom !== 0 && nextDom !== 0) {
+        val = parseInt(dom.attr('data-val'));
+        nextVal = parseInt(nextDom.attr('data-val'));
+        if (val === nextVal){
+          score = val*2;
+          this.updateScore(score);
+          nextDom.attr('data-val', score).text(score);
+          this.board[r][c] = 0;
+          dom.remove();
+        }
+      }
+    }
+  }
+};
+
+Game.prototype.mergeDown = function() {
+  for(var c=0; c<4; c++){
+    for(var r=3; r>=1; r--){
+      dom = this.board[r][c];
+      nextDom = this.board[r-1][c];
+
+      if (dom !== 0 && nextDom !== 0) {
+        val = parseInt(dom.attr('data-val'));
+        nextVal = parseInt(nextDom.attr('data-val'));
+        if (val === nextVal){
+          score = val*2;
+          this.updateScore(score);
+          nextDom.attr('data-val', score).text(score);
+          this.board[r][c] = 0;
+          dom.remove();
+        }
+      }
+    }
+  }
+};
+
+Game.prototype.updateScore = function(score) {
+  if (score === 2048){
+    this.gameWon();
+  }else{
+    this.score += score;
+    $("#score").text(this.score);
+  }
+};
+
+Game.prototype.updateDisplay = function() {
+  for(var r=0; r<4; r++){
+    for(var c=0; c<4; c++){
+      if (this.board[r][c] !== 0) {
+        dom = this.board[r][c];
+        dom.attr('data-row', "r" + r).attr("data-col", "c" + c);
+      }
+    }
+  }
+};
+
+Game.prototype.gameLost = function () {
+  console.log("Game Over");
+  $('body').off("keydown");
+  $('.game-message').addClass('game-over');
+  $(".game-over").prepend("<p>Game over!</p>");
+  $(".lower").append("<a class='retry-button' href='javascript:history.go(0)'>Try again</a>");
+};
+
+Game.prototype.gameWon = function () {
+  var game = this;
+  console.log("Game Won");
+  $('body').off("keydown");
+  $('.game-message').addClass('game-won');
+  $(".game-won").prepend("<p>You Won!</p>");
+  $(".lower").append($("<a class='playing-button' href='#'>Keep Playing?</a>").click(function(event){
+    $(".lower a").remove();
+    $(".game-won p").remove();
+    $('.game-message').removeClass('game-won');
+
+    $('body').keydown(function(event){
+      game.keyHandling(event);
+    });
+  }));
+};
+
+Game.prototype.keyHandling = function(event) {
+  var arrows = [37, 38, 39, 40];
+  if (arrows.indexOf(event.which) > -1) {
+    var tile = $('.tile');
+    this.moveTile(event.which);
+  }
+};
+
 $(document).ready(function() {
   console.log("ready to go!");
   // Any interactive jQuery functionality
   var game = new Game();
 
   $('body').keydown(function(event){
-    var arrows = [37, 38, 39, 40];
-    if (arrows.indexOf(event.which) > -1) {
-      var tile = $('.tile');
-
-      game.moveTile(tile, event.which);
-    }
+    game.keyHandling(event);
   });
 });