diff --git a/index.html b/index.html index 272a7a85fe42bcd6def8b91505fb0ba4cc76d0e9..575c62a804d11f98ae236bbd21c5379794614c8d 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@
diff --git a/js/game_manager.js b/js/game_manager.js index 01ce04c3bbec283e254f0c1e54d41a0b62b17b30..95f75e58ad03c7e316715e31051ae5c202b0e895 100644 --- a/js/game_manager.js +++ b/js/game_manager.js @@ -8,6 +8,7 @@ function GameManager(size, InputManager, Actuator, ScoreManager) { this.inputManager.on("move", this.move.bind(this)); this.inputManager.on("restart", this.restart.bind(this)); + this.inputManager.on("keepPlaying", this.keepPlaying.bind(this)); this.setup(); } @@ -18,6 +19,22 @@ GameManager.prototype.restart = function () { this.setup(); }; +// Keep playing after winning +GameManager.prototype.keepPlaying = function () { + this.keepPlaying = true; + this.actuator.keepPlaying(); +}; + +GameManager.prototype.isGameOver = function() { + if (this.over || (this.won && !this.keepPlaying) ) { + return true; + } + else { + return false; + } +} + + // Set up the game GameManager.prototype.setup = function () { this.grid = new Grid(this.size); @@ -25,6 +42,7 @@ GameManager.prototype.setup = function () { this.score = 0; this.over = false; this.won = false; + this.keepPlaying = false; // Add the initial tiles this.addStartTiles(); @@ -60,7 +78,8 @@ GameManager.prototype.actuate = function () { score: this.score, over: this.over, won: this.won, - bestScore: this.scoreManager.get() + bestScore: this.scoreManager.get(), + gameOver: this.isGameOver() }); }; @@ -87,7 +106,7 @@ GameManager.prototype.move = function (direction) { // 0: up, 1: right, 2:down, 3: left var self = this; - if (this.over || this.won) return; // Don't do anything if the game's over + if (this.isGameOver()) return; // Don't do anything if the game's over var cell, tile; diff --git a/js/html_actuator.js b/js/html_actuator.js index 8290f0d4e6ece7bdfcc84008742f91e8068ab054..adfff59e7eb90b3c9149c51599ddfc366697a50b 100644 --- a/js/html_actuator.js +++ b/js/html_actuator.js @@ -24,8 +24,11 @@ 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! + if (metadata.gameOver) { + if (metadata.over) self.message(false); // You lose + else if (metadata.won) self.message(true); // You win! + } + }); }; @@ -33,6 +36,10 @@ HTMLActuator.prototype.restart = function () { this.clearMessage(); }; +HTMLActuator.prototype.keepPlaying = function () { + this.clearMessage(); +}; + HTMLActuator.prototype.clearContainer = function (container) { while (container.firstChild) { container.removeChild(container.firstChild); @@ -45,10 +52,13 @@ HTMLActuator.prototype.addTile = function (tile) { var wrapper = document.createElement("div"); var inner = document.createElement("div"); var position = tile.previousPosition || { x: tile.x, y: tile.y }; - positionClass = this.positionClass(position); + var positionClass = this.positionClass(position); // We can't use classlist because it somehow glitches when replacing classes var classes = ["tile", "tile-" + tile.value, positionClass]; + + if (tile.value > 2048) classes.push("tile-gold"); + this.applyClasses(wrapper, classes); inner.classList.add("tile-inner"); diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index b85c8c2dca760ab87816c4fa35b378d83b5aa615..822cc3bdfdc1edf9c91436aed2817e60c82e012e 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -53,10 +53,14 @@ KeyboardInputManager.prototype.listen = function () { } }); - var retry = document.getElementsByClassName("retry-button")[0]; + var retry = document.querySelector(".retry-button"); retry.addEventListener("click", this.restart.bind(this)); retry.addEventListener("touchend", this.restart.bind(this)); + var keepPlaying = document.querySelector(".keep-playing-button"); + keepPlaying.addEventListener("click", this.keepPlaying.bind(this)); + keepPlaying.addEventListener("touchend", this.keepPlaying.bind(this)); + // Listen to swipe events var touchStartClientX, touchStartClientY; var gameContainer = document.getElementsByClassName("game-container")[0]; @@ -93,3 +97,8 @@ KeyboardInputManager.prototype.restart = function (event) { event.preventDefault(); this.emit("restart"); }; + +KeyboardInputManager.prototype.keepPlaying = function (event) { + event.preventDefault(); + this.emit("keepPlaying"); +}; diff --git a/style/main.css b/style/main.css index 1c1d06c485c014d0990ae65ee6983cdc8e369894..4cc76be88960bf59e4ddef2487f89285c6e5e12c 100644 --- a/style/main.css +++ b/style/main.css @@ -193,9 +193,13 @@ hr { height: 40px; line-height: 42px; margin-left: 9px; } + .game-container .game-message a.keep-playing-button { + display: none; } .game-container .game-message.game-won { background: rgba(237, 194, 46, 0.5); color: #f9f6f2; } + .game-container .game-message.game-won a.keep-playing-button { + display: inline-block; } .game-container .game-message.game-won, .game-container .game-message.game-over { display: block; } diff --git a/style/main.scss b/style/main.scss index 8686dba391708eaf8e8e8b2f8c9ad7e562dc8ef2..1cde43ff051f4f444eb8515bd9063be0dbacad4b 100644 --- a/style/main.scss +++ b/style/main.scss @@ -218,6 +218,10 @@ hr { @include button; margin-left: 9px; // margin-top: 59px; + + &.keep-playing-button { + display: none; + } } @include animation(fade-in 800ms ease $transition-speed * 12); @@ -226,6 +230,10 @@ hr { &.game-won { background: rgba($tile-gold-color, .5); color: $bright-text-color; + + a.keep-playing-button { + display: inline-block; + } } &.game-won, &.game-over {