add win condition
--- a/js/game_manager.js
+++ b/js/game_manager.js
@@ -8,6 +8,7 @@
this.score = 0;
this.over = false;
+ this.won = false;
this.inputManager.on("move", this.move.bind(this));
@@ -43,7 +44,8 @@
GameManager.prototype.actuate = function () {
this.actuator.actuate(this.grid, {
score: this.score,
- over: this.over
+ over: this.over,
+ won: this.won
});
};
@@ -69,7 +71,7 @@
// 0: up, 1: right, 2:down, 3: left
var self = this;
- if (this.over) return; // Don't do anything if the game's over
+ if (this.over || this.won) return; // Don't do anything if the game's over
var cell, tile;
@@ -104,7 +106,8 @@
// Update the score
self.score += merged.value;
- // Something's moved for sure
+ // The mighty 2048 tile
+ if (merged.value === 2048) self.won = true;
} else {
self.moveTile(tile, positions.farthest);
}
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -22,9 +22,8 @@
self.updateScore(metadata.score);
- if (metadata.over) {
- self.gameOver();
- }
+ if (metadata.over) self.message(false); // You lose
+ if (metadata.won) self.message(true); // You win!
});
};
@@ -87,7 +86,8 @@
}
};
-HTMLActuator.prototype.gameOver = function () {
- this.gameContainer.classList.add("game-over");
+HTMLActuator.prototype.message = function (won) {
+ var type = won ? "game-won" : "game-over";
+ this.gameContainer.classList.add(type);
};
--- a/style/main.css
+++ b/style/main.css
@@ -53,7 +53,7 @@
position: relative;
float: right;
background: #bbada0;
- padding: 15px 30px;
+ padding: 15px 20px;
font-size: 25px;
height: 25px;
line-height: 47px;
@@ -143,13 +143,12 @@
width: 500px;
height: 500px;
box-sizing: border-box; }
- .game-container.game-over:after {
+ .game-container.game-over:after, .game-container.game-won:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- content: "Game over!";
display: block;
background: rgba(238, 228, 218, 0.5);
text-align: center;
@@ -162,6 +161,12 @@
-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; }
.grid-container {
position: absolute;
--- a/style/main.scss
+++ b/style/main.scss
@@ -64,7 +64,7 @@
position: relative;
float: right;
background: $game-container-background;
- padding: 15px 30px;
+ padding: 15px 20px;
font-size: $height;
height: $height;
line-height: $height + 22px;
@@ -156,24 +156,35 @@
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;
+ font-size: 60px;
+ font-weight: bold;
+
+ @include animation(fade-in 800ms ease $transition-speed * 12);
+ @include animation-fill-mode(both);
+ }
+ }
+
&.game-over:after {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
content: "Game over!";
- display: block;
- background: rgba($tile-color, .5);
- text-align: center;
- height: $field-width;
- line-height: $field-width;
- z-index: 100;
- font-size: 60px;
- font-weight: bold;
-
- @include animation(fade-in 800ms ease $transition-speed * 12);
- @include animation-fill-mode(both);
+ }
+
+ &.game-won:after {
+ content: "You win!";
+ background: rgba($tile-gold-color, .5);
+ color: $bright-text-color;
}
}