diff --git a/index.html b/index.html index 50469057a3..206c639017 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@

2048

+ Keep playing Try again
diff --git a/js/game_manager.js b/js/game_manager.js index 01ce04c3bb..95f75e58ad 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 04a137b9a3..38d16eb211 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); @@ -42,12 +49,13 @@ HTMLActuator.prototype.clearContainer = function (container) { HTMLActuator.prototype.addTile = function (tile) { var self = this; - var element = document.createElement("div"); - var position = tile.previousPosition || { x: tile.x, y: tile.y }; - positionClass = this.positionClass(position); + var element = document.createElement("div"); + var position = tile.previousPosition || { x: tile.x, y: tile.y }; + var positionClass = this.positionClass(position); + var styleClass = this.styleClass(tile); // We can't use classlist because it somehow glitches when replacing classes - var classes = ["tile", "tile-" + tile.value, positionClass]; + var classes = ["tile", styleClass, positionClass]; this.applyClasses(element, classes); element.textContent = tile.value; @@ -88,6 +96,15 @@ HTMLActuator.prototype.positionClass = function (position) { return "tile-position-" + position.x + "-" + position.y; }; +HTMLActuator.prototype.styleClass = function (tile) { + var className = 'tile-'+tile.value; + + if (tile.value > 2048 ) { + className = className+' tile-gold'; + } + return className; +}; + HTMLActuator.prototype.updateScore = function (score) { this.clearContainer(this.scoreContainer); diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index b85c8c2dca..84d830b379 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -53,10 +53,13 @@ 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)); + // Listen to swipe events var touchStartClientX, touchStartClientY; var gameContainer = document.getElementsByClassName("game-container")[0]; @@ -93,3 +96,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.scss b/style/main.scss index b5e2609998..f6660d0901 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 {