Join the numbers and get to the 2048 tile!
diff --git a/js/application.js b/js/application.js index 656a88d7e7fde036a6f8f3a10340c19c3b767da5..036ca3a2be6ade5598c7c86cfcdc4905ed5c6a31 100644 --- a/js/application.js +++ b/js/application.js @@ -1,6 +1,6 @@ document.addEventListener("DOMContentLoaded", function () { // Wait till the browser is ready to render the game (avoids glitches) window.requestAnimationFrame(function () { - var manager = new GameManager(4, KeyboardInputManager, HTMLActuator); + new GameManager(4, KeyboardInputManager, HTMLActuator, LocalScoreManager); }); }); diff --git a/js/game_manager.js b/js/game_manager.js index 1880d48d09a3a67acb68939a4cfc38e0d823a297..11974c13d96b42767d8d9cf4ea85a13df0695500 100644 --- a/js/game_manager.js +++ b/js/game_manager.js @@ -1,7 +1,8 @@ -function GameManager(size, InputManager, Actuator) { +function GameManager(size, InputManager, Actuator, ScoreManager) { this.size = size; // Size of the grid this.inputManager = new InputManager; - this.actuator = new Actuator; + this.scoreManager = new ScoreManager; + this.actuator = new Actuator(this.scoreManager.isSupported()); this.startTiles = 2; @@ -51,11 +52,17 @@ GameManager.prototype.addRandomTile = function () { // Sends the updated grid to the actuator GameManager.prototype.actuate = function () { + if (this.scoreManager.get() < this.score) { + this.scoreManager.set(this.score); + } + this.actuator.actuate(this.grid, { - score: this.score, - over: this.over, - won: this.won + score: this.score, + over: this.over, + won: this.won, + bestScore: this.scoreManager.get() }); + }; // Save all tile positions and remove merger info diff --git a/js/html_actuator.js b/js/html_actuator.js index f1c33083a48fc46647870f55a3ad4961a720b0dc..b6aec4015e50f9aae506b554edaf6a890baed67c 100644 --- a/js/html_actuator.js +++ b/js/html_actuator.js @@ -1,9 +1,15 @@ -function HTMLActuator() { +function HTMLActuator(bestScoreSupported) { this.tileContainer = document.getElementsByClassName("tile-container")[0]; this.scoreContainer = document.getElementsByClassName("score-container")[0]; + this.bestContainer = document.getElementsByClassName("best-container")[0]; this.messageContainer = document.getElementsByClassName("game-message")[0]; this.score = 0; + this.bestScoreSupported = bestScoreSupported; + + if (!this.bestScoreSupported) { + this.bestContainer.style.display = "none"; + } } HTMLActuator.prototype.actuate = function (grid, metadata) { @@ -21,6 +27,7 @@ HTMLActuator.prototype.actuate = function (grid, metadata) { }); self.updateScore(metadata.score); + self.updateBestScore(metadata.bestScore); if (metadata.over) self.message(false); // You lose if (metadata.won) self.message(true); // You win! @@ -103,6 +110,12 @@ HTMLActuator.prototype.updateScore = function (score) { } }; +HTMLActuator.prototype.updateBestScore = function (bestScore) { + if (this.bestScoreSupported) { + this.bestContainer.textContent = bestScore; + } +}; + HTMLActuator.prototype.message = function (won) { var type = won ? "game-won" : "game-over"; var message = won ? "You win!" : "Game over!" diff --git a/js/local_score_manager.js b/js/local_score_manager.js new file mode 100644 index 0000000000000000000000000000000000000000..400633b4227272c834d4fa4b76a9eeb7e4ffe439 --- /dev/null +++ b/js/local_score_manager.js @@ -0,0 +1,24 @@ +function LocalScoreManager() { + this.key = 'bestScore'; +} + +LocalScoreManager.prototype.get = function () { + if (!this.isSupported()) { + return 0; + } + + return localStorage.getItem(this.key); +}; + +LocalScoreManager.prototype.set = function (score) { + if (!this.isSupported()) { + return false; + } + + localStorage.setItem(this.key, score); +}; + +LocalScoreManager.prototype.isSupported = function () { + return !!window.localStorage; +}; + diff --git a/style/main.css b/style/main.css index f5760a4901be75ea68d9091e1decbb261f43c2f8..784aeb5dabcc93e4cad30efb957e0865e0dd049c 100644 --- a/style/main.css +++ b/style/main.css @@ -49,9 +49,12 @@ h1.title { top: -50px; opacity: 0; } } -.score-container { +.scores-container { + float: right; } + +.score-container, .best-container { position: relative; - float: right; + display: inline-block; background: #bbada0; padding: 15px 25px; font-size: 25px; @@ -60,19 +63,19 @@ h1.title { font-weight: bold; border-radius: 3px; color: white; - margin-top: 8px; } - .score-container:after { + margin-top: 8px; + text-align: center; } + .score-container:after, .best-container:after { position: absolute; width: 100%; top: 10px; left: 0; - content: "Score"; text-transform: uppercase; font-size: 13px; line-height: 13px; text-align: center; color: #eee4da; } - .score-container .score-addition { + .score-container .score-addition, .best-container .score-addition { position: absolute; right: 30px; color: red; @@ -86,6 +89,12 @@ h1.title { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; } +.score-container:after { + content: "Score"; } + +.best-container:after { + content: "Best"; } + p { margin-top: 0; margin-bottom: 10px; diff --git a/style/main.scss b/style/main.scss index 5343c6d88a4056a463d402b8b71b2cdd70948151..96cdc7b1c353a001da69d47dd0cc58f66ba41609 100644 --- a/style/main.scss +++ b/style/main.scss @@ -58,11 +58,15 @@ h1.title { } } -.score-container { +.scores-container { + float: right; +} + +.score-container, .best-container { $height: 25px; position: relative; - float: right; + display: inline-block; background: $game-container-background; padding: 15px 25px; font-size: $height; @@ -72,13 +76,13 @@ h1.title { border-radius: 3px; color: white; margin-top: 8px; + text-align: center; &:after { position: absolute; width: 100%; top: 10px; left: 0; - content: "Score"; text-transform: uppercase; font-size: 13px; line-height: 13px; @@ -100,6 +104,14 @@ h1.title { } } +.score-container:after { + content: "Score"; +} + +.best-container:after { + content: "Best" +} + p { margin-top: 0; margin-bottom: 10px;