add movement check, score addition

js/game_manager.js

@@ -103,11 +103,15 @@ GameManager.prototype.move = function (direction) {
 
           // Update the score
           self.score += merged.value;
+
+          // Something's moved for sure
         } else {
           self.moveTile(tile, positions.farthest);
         }
 
-        moved = true;
+        if (!self.positionsEqual(cell, tile)) {
+          moved = true; // The tile moved from its original cell!
+        }
       }
     });
   });
@@ -201,3 +205,7 @@ GameManager.prototype.tileMatchesAvailable = function () {
 
   return false;
 };
+
+GameManager.prototype.positionsEqual = function (first, second) {
+  return first.x === second.x && first.y === second.y;
+};

js/html_actuator.js

@@ -2,13 +2,15 @@ function HTMLActuator() {
   this.tileContainer  = document.getElementsByClassName("tile-container")[0];
   this.gameContainer  = document.getElementsByClassName("game-container")[0];
   this.scoreContainer = document.getElementsByClassName("score-container")[0];
+
+  this.score = 0;
 }
 
 HTMLActuator.prototype.actuate = function (grid, metadata) {
   var self = this;
 
   window.requestAnimationFrame(function () {
-    self.clearContainer();
+    self.clearContainer(self.tileContainer);
 
     grid.cells.forEach(function (column) {
       column.forEach(function (cell) {
@@ -26,9 +28,9 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
   });
 };
 
-HTMLActuator.prototype.clearContainer = function () {
+HTMLActuator.prototype.clearContainer = function (container) {
-  while (this.tileContainer.firstChild) {
+  while (container.firstChild) {
-    this.tileContainer.removeChild(this.tileContainer.firstChild);
+    container.removeChild(container.firstChild);
   }
 };
 
@@ -69,7 +71,20 @@ HTMLActuator.prototype.positionClass = function (position) {
 };
 
 HTMLActuator.prototype.updateScore = function (score) {
-  this.scoreContainer.textContent = score;
+  this.clearContainer(this.scoreContainer);
+
+  var difference = score - this.score;
+  this.score = score;
+
+  this.scoreContainer.textContent = this.score;
+
+  if (difference) {
+    var addition = document.createElement("div");
+    addition.classList.add("score-addition");
+    addition.textContent = "+" + difference;
+
+    this.scoreContainer.appendChild(addition);
+  }
 };
 
 HTMLActuator.prototype.gameOver = function () {

style/main.css

@@ -22,6 +22,33 @@ h1.title {
   display: block;
   float: left; }
 
+@-webkit-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
+@-moz-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
+@keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+
+  100% {
+    top: -50px;
+    opacity: 0; } }
+
 .score-container {
   position: relative;
   float: right;
@@ -45,6 +72,19 @@ h1.title {
     line-height: 13px;
     text-align: center;
     color: #eee4da; }
+  .score-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;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both; }
 
 p {
   margin-top: 0;

style/main.scss

@@ -46,6 +46,18 @@ h1.title {
   float: left;
 }
 
+@include keyframes(move-up) {
+  0% {
+    top: 25px;
+    opacity: 1;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+
 .score-container {
   $height: 25px;
 
@@ -73,6 +85,19 @@ h1.title {
     text-align: center;
     color: $tile-color;
   }
+
+  .score-addition {
+    position: absolute;
+    right: 30px;
+    color: red;
+    font-size: $height;
+    line-height: $height;
+    font-weight: bold;
+    color: rgba($text-color, .9);
+    z-index: 100;
+    @include animation(move-up 600ms ease-in);
+    @include animation-fill-mode(both);
+  }
 }
 
 p {