Fix of lost and won messages

master
Roysten 2016-04-07 17:42:14 +00:00
parent 02f393238f
commit 7a4f16d4b3
3 changed files with 29 additions and 29 deletions

View File

@ -1,17 +1,17 @@
<div class="game2048__container">
<div id="game2048__area_container">
<div class="game2048__message">
<p></p>
</div>
<table id="game2048__area" class ="game2048__area" tabindex="0">
{{#loop 4}}
<tr>{{#loop 4}}<td class="cell val-"></td>{{/loop}}</tr>
{{/loop}}
</table>
<div class="game2048__message">
<p></p>
</div>
</div>
<div class="game2048__info">
<div class="game2048__counter">
<div class="game2048__points_addition"></div>

View File

@ -81,14 +81,12 @@
transition: all 0.10s;
}
.zci--game2048 .game2048__area .game2048__message {
.zci--game2048 .game2048__message {
display: none;
background-color: rgba(238, 228, 218, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 352px;
height: 352px;
z-index: 100;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
@ -98,12 +96,12 @@
animation-fill-mode: both;
}
.zci--game2048 .game2048__area .game2048__message.game2048__won {
.zci--game2048 .game2048__message.game2048__won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2;
}
.zci--game2048 .game2048__area .game2048__message p {
.zci--game2048 .game2048__message p {
font-weight: bolder;
font-size: xx-large;
text-align: center;

View File

@ -94,7 +94,7 @@ DDH.game2048.build = function(ops) {
}
function gen_translate_string(row, col) {
return "translate(" + (col * 85 + 5) + "px," + row * 85 + "px)";
return "translate(" + (col * 85 + 5) + "px," + (row * 85 + 5) + "px)";
}
//Row and col indicate the place where the animation should end
@ -267,8 +267,8 @@ DDH.game2048.build = function(ops) {
// This function shows game over message
function game_over_message(game_won) {
var result_msg = $('#game2048__area .game2048__message p');
var result_box = $('#game2048__area .game2048__message');
var result_msg = $('#game2048__area_container .game2048__message p');
var result_box = $('#game2048__area_container .game2048__message');
if (game_won === true) {
result_msg.text("You Won!");
result_box.addClass("game2048__won");
@ -283,7 +283,7 @@ DDH.game2048.build = function(ops) {
function init_game() {
var game_area = $('#game2048__area');
var game_area_container = $('#game2048__area_container');
var result_box = $('#game2048__area .game2048__message');
var result_box = $('.game2048__message');
increase_points(-score);
result_box.hide();
@ -318,21 +318,23 @@ DDH.game2048.build = function(ops) {
e.preventDefault();
var move_made = false;
if (!is_game_over()) {
if (e.keyCode === 87 || e.keyCode === 38) { // w or up arrow
move_made = move('w');
} else if (e.keyCode === 65 || e.keyCode === 37) { // a or left arrow
move_made = move('a');
} else if (e.keyCode === 83 || e.keyCode === 40) { // s or dowm arrow
move_made = move('s');
} else if (e.keyCode === 68 || e.keyCode === 39) { // d or right arrow
move_made = move('d');
}
if (move_made) {
add_random_tile();
update_tiles();
}
if (is_game_over())
return false;
if (e.keyCode === 87 || e.keyCode === 38) { // w or up arrow
move_made = move('w');
} else if (e.keyCode === 65 || e.keyCode === 37) { // a or left arrow
move_made = move('a');
} else if (e.keyCode === 83 || e.keyCode === 40) { // s or dowm arrow
move_made = move('s');
} else if (e.keyCode === 68 || e.keyCode === 39) { // d or right arrow
move_made = move('d');
}
if (move_made) {
add_random_tile();
update_tiles();
}
return false;
});