diff --git a/js/game_manager.js b/js/game_manager.js index c2695e86279aa5a22d724854a927a87a53179f25..411fb0adcb1733de822679b98fd03f94e98e5027 100644 --- a/js/game_manager.js +++ b/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; +}; diff --git a/js/html_actuator.js b/js/html_actuator.js index 18e530aa2fde86540a2379b0ff6596f03f34fe12..7b411d067a52d88370dfdaf0a754671f98444282 100644 --- a/js/html_actuator.js +++ b/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 () { - while (this.tileContainer.firstChild) { - this.tileContainer.removeChild(this.tileContainer.firstChild); +HTMLActuator.prototype.clearContainer = function (container) { + while (container.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 () { diff --git a/style/main.css b/style/main.css index b8626faa9d1aabd71300357008e800270933fe1a..a14af2b4b7405fdf0f76178216f2ceb20e02801e 100644 --- a/style/main.css +++ b/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; diff --git a/style/main.scss b/style/main.scss index 8967630d2cdbe7a0700f887858650e14f4ef4748..c23c54f63fd1364f45add951d739c1039e7f0051 100644 --- a/style/main.scss +++ b/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 {