add retry button
--- a/index.html
+++ b/index.html
@@ -22,6 +22,11 @@
<p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
<div class="game-container">
+ <div class="game-message">
+ <p></p>
+ <a class="retry-button">Try again</a>
+ </div>
+
<div class="grid-container">
<div class="grid-row">
<div class="grid-cell"></div>
--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -4,19 +4,28 @@
this.actuator = new Actuator;
this.startTiles = 2;
+
+ this.inputManager.on("move", this.move.bind(this));
+ this.inputManager.on("restart", this.restart.bind(this));
+
+ this.setup();
+}
+
+// Restart the game
+GameManager.prototype.restart = function () {
+ this.actuator.restart();
+ this.setup();
+};
+
+// Set up the game
+GameManager.prototype.setup = function () {
this.grid = new Grid(this.size);
this.score = 0;
this.over = false;
this.won = false;
- this.inputManager.on("move", this.move.bind(this));
-
- this.setup();
-}
-
-// Set up the game
-GameManager.prototype.setup = function () {
+ // Add the initial tiles
this.addStartTiles();
// Update the actuator
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -1,7 +1,7 @@
function HTMLActuator() {
- this.tileContainer = document.getElementsByClassName("tile-container")[0];
- this.gameContainer = document.getElementsByClassName("game-container")[0];
- this.scoreContainer = document.getElementsByClassName("score-container")[0];
+ this.tileContainer = document.getElementsByClassName("tile-container")[0];
+ this.scoreContainer = document.getElementsByClassName("score-container")[0];
+ this.messageContainer = document.getElementsByClassName("game-message")[0];
this.score = 0;
}
@@ -25,6 +25,10 @@
if (metadata.over) self.message(false); // You lose
if (metadata.won) self.message(true); // You win!
});
+};
+
+HTMLActuator.prototype.restart = function () {
+ this.clearMessage();
};
HTMLActuator.prototype.clearContainer = function (container) {
@@ -77,7 +81,7 @@
this.scoreContainer.textContent = this.score;
- if (difference) {
+ if (difference > 0) {
var addition = document.createElement("div");
addition.classList.add("score-addition");
addition.textContent = "+" + difference;
@@ -87,7 +91,16 @@
};
HTMLActuator.prototype.message = function (won) {
- var type = won ? "game-won" : "game-over";
- this.gameContainer.classList.add(type);
+ if (ga) ga("send", "event", "game", "end", type, this.score);
+
+ var type = won ? "game-won" : "game-over";
+ var message = won ? "You win!" : "Game over!"
+
+ this.messageContainer.classList.add(type);
+ this.messageContainer.getElementsByTagName("p")[0].textContent = message;
};
+HTMLActuator.prototype.clearMessage = function () {
+ this.messageContainer.classList.remove("game-won", "game-over");
+};
+
--- a/js/keyboard_input_manager.js
+++ b/js/keyboard_input_manager.js
@@ -40,5 +40,11 @@
self.emit("move", mapped);
}
});
+
+ var retry = document.getElementsByClassName("retry-button")[0];
+ retry.addEventListener("click", function (event) {
+ event.preventDefault();
+ self.emit("restart");
+ });
};
--- a/style/main.css
+++ b/style/main.css
@@ -94,7 +94,8 @@
a {
color: #776e65;
font-weight: bold;
- text-decoration: underline; }
+ text-decoration: underline;
+ cursor: pointer; }
strong.important {
text-transform: uppercase; }
@@ -143,30 +144,41 @@
width: 500px;
height: 500px;
box-sizing: border-box; }
- .game-container.game-over:after, .game-container.game-won:after {
+ .game-container .game-message {
+ display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- display: block;
background: rgba(238, 228, 218, 0.5);
+ z-index: 100;
text-align: center;
- height: 500px;
- line-height: 500px;
- z-index: 100;
- font-size: 60px;
- font-weight: bold;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; }
- .game-container.game-over:after {
- content: "Game over!"; }
- .game-container.game-won:after {
- content: "You win!";
- background: rgba(237, 194, 46, 0.5);
- color: #f9f6f2; }
+ .game-container .game-message p {
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px; }
+ .game-container .game-message a {
+ display: inline-block;
+ background: #a69382;
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: #f9f6f2;
+ height: 40px;
+ line-height: 42px;
+ margin-top: 59px; }
+ .game-container .game-message.game-won {
+ background: rgba(237, 194, 46, 0.5);
+ color: #f9f6f2; }
+ .game-container .game-message.game-won, .game-container .game-message.game-over {
+ display: block; }
.grid-container {
position: absolute;
--- a/style/main.scss
+++ b/style/main.scss
@@ -110,6 +110,7 @@
color: $text-color;
font-weight: bold;
text-decoration: underline;
+ cursor: pointer;
}
strong {
@@ -156,35 +157,52 @@
height: $field-width;
box-sizing: border-box;
- &.game-over, &.game-won {
- &:after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: block;
- background: rgba($tile-color, .5);
- text-align: center;
- height: $field-width;
- line-height: $field-width;
- z-index: 100;
+ .game-message {
+ display: none;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba($tile-color, .5);
+ z-index: 100;
+
+ text-align: center;
+
+ p {
font-size: 60px;
font-weight: bold;
-
- @include animation(fade-in 800ms ease $transition-speed * 12);
- @include animation-fill-mode(both);
- }
- }
-
- &.game-over:after {
- content: "Game over!";
- }
-
- &.game-won:after {
- content: "You win!";
- background: rgba($tile-gold-color, .5);
- color: $bright-text-color;
+ height: 60px;
+ line-height: 60px;
+ margin-top: 222px;
+ // height: $field-width;
+ // line-height: $field-width;
+ }
+
+ a {
+ display: inline-block;
+ background: darken($game-container-background, 10%);
+ border-radius: 3px;
+ padding: 0 20px;
+ text-decoration: none;
+ color: $bright-text-color;
+ height: 40px;
+ line-height: 42px;
+ margin-top: 59px;
+ }
+
+ @include animation(fade-in 800ms ease $transition-speed * 12);
+ @include animation-fill-mode(both);
+
+ &.game-won {
+ background: rgba($tile-gold-color, .5);
+ color: $bright-text-color;
+ }
+
+ &.game-won, &.game-over {
+ display: block;
+ }
}
}