Merge remote-tracking branch 'origin/master' into gh-pages

This commit is contained in:
synth-ruiner 2015-03-08 23:49:41 +00:00
commit 8f42620c34
2 changed files with 120 additions and 58 deletions

View File

@ -17,8 +17,6 @@ Need to test on mobile devices etc.
## bugs
the player can cheat under certain conditions; if there is only one tile left on a row, the player can flag it and if it is a mine, the row will clear. if not, the player can unflag it and click it. not sure how big a deal this is really.
the game adds too many rows and then deletes the extra rows, instead of just adding the correct number of rows in the first place. this is due to the row clearing method nesting and adding the new rows several times as a result
need a fallback for browsers that don't support CSS3 viewport sizing
the scoring system is wrong due to the above problem; if any tiles cascade during removal of rows, the score is added again for each step of the cascade leading to vastly inflated scores
game is apparently broken in Safari (not sure which version)
colours used are not safe for red-green colourblindness

View File

@ -66,8 +66,8 @@
}
#setup h1 {
margin-top: 8vmin;
margin-bottom: 8vmin;
margin-top: 6vmin;
margin-bottom: 6vmin;
}
#setup h2 {
@ -109,7 +109,7 @@
position: absolute;
left: 38vmin;
top: 59vmin;
top: 75vmin;
background: #768087;
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
@ -207,17 +207,25 @@
li.mines8 {
color: #8c4600;
}
p {
color: #fff;
font-size: 4.3vmin;
padding: 0 10vmin;
}
strong {
color: #fe7ac6;
}
</style>
<script src="jquery-2.1.3.min.js"></script>
<script>
var gameBoardWidth = 10;
var gameBoardHeight = 9;
var score = 0;
var bombs = 1;
var firstClick = true;
var currentlyIterating = false;
var mineChance = 0.2;
var inputEnabled = true;
var clickholdMs = 200;
var timeout; //hold timer
var mouseHeld = false;
@ -232,15 +240,20 @@
$('#game ul').each(function() {
for (var i = 0; i < gameBoardWidth; i++) {
if (Math.random() < mineChance) {
$(this).append('<li class="mine"></li>');
} else {
$(this).append("<li></li>");
}
$(this).append(newTile());
}
});
}
function newTile() {
if (Math.random() < mineChance) {
return '<li class="mine"></li>';
} else {
return '<li></li>';
}
}
$.fn.checkRow = function() {
//unclicked tiles
if ($(this).children('li:not(.revealed):not(.flagged)').length > 0) {
@ -260,6 +273,25 @@
return true;
}
$.fn.checkColumn = function() {
//unclicked tiles
if ($(this).column().filter(':not(.revealed):not(.flagged)').length > 0) {
return false;
}
//incorrectly flagged tiles
if ($(this).column().filter('.flagged:not(.mine)').length > 0) {
return false;
}
//clicked mines
if ($(this).column().filter('.revealed.mine').length > 0) {
return false;
}
return true;
}
window.removeClearedRows = function() {
var rowsToRemove = $('#game ul:not(.removing)').filter(function() {
return $(this).checkRow();
@ -273,55 +305,73 @@
rowsToRemove.each(function() {
score += $(this).children('.mine').length;
});
rowsToRemove.slideUp("slow", function() {
$(this).remove();
//add new row on bottom
$('#game').append('<ul></ul>');
for (var i = 0; i < gameBoardWidth; i++) {
if (Math.random() < mineChance) {
$('#game ul').last().append('<li class="mine"></li>');
} else {
$('#game ul').last().append('<li></li>');
}
$('#game ul').last().append(newTile());
}
});
inputEnabled = false;
rowsToRemove.slideUp("slow", function() {
$(this).remove();
$('li.revealed:not(.mine)').each(function() {
$(this).text(
$(this).countMinesText()
);
//remove "mines1" etc
var mine = $(this).hasClass("mine");
$(this).removeAttr("class");
if (mine) {
$(this).addClass("mine");
} else {
$(this).addClass(
"mines" + $(this).countMinesText()
);
}
$(this).addClass("revealed");
});
//refresh last row to reflect new rows beneath
$('li.revealed').last().parent().children('li.revealed').mouseup();
refreshMineCounts();
//click blank tiles
$('li.revealed:not(.mine):empty').mouseup();
});
}
inputEnabled = true;
window.removeClearedColumns = function() {
var columnsToRemove = $('ul:not(.removing):eq(0) li:not(.removing)').filter(function() {
return $(this).checkColumn();
});
if (columnsToRemove.length == 0) return;
columnsToRemove.addClass("removing");
columnsToRemove.each(function() {
score += $(this).column().filter('.mine').length;
});
columnsToRemove.each(function() {
$(this).column().animate({width: 0, borderRadius: 0, padding: 0}, "slow", function() {
$(this).parent().append(newTile());
$(this).remove();
refreshMineCounts();
//click blank tiles
$('li.revealed:not(.mine):empty').mouseup();
});
});
}
function refreshMineCounts() {
$('li.revealed:not(.mine)').each(function() {
$(this).text(
$(this).countMinesText()
);
//remove "mines1" etc
var mine = $(this).hasClass("mine");
$(this).removeAttr("class");
if (mine) {
$(this).addClass("mine");
} else {
$(this).addClass(
"mines" + $(this).countMinesText()
);
}
$(this).addClass("revealed");
});
}
function updateScore() {
@ -360,6 +410,18 @@
return $(this).parent('ul').next();
}
$.fn.column = function() {
var x = $(this).getX();
var column = $('');
$('ul').each(function() {
column = column.add($(this).children().eq(x));
});
return column;
}
$.fn.getX = function() {
return $(this).index();
}
@ -528,10 +590,7 @@
}
$.fn.rightClick = function() {
if ($(this).hasClass("revealed")) {
//deploy a bomb!
//...
} else {
if (!$(this).hasClass("revealed")) {
$(this).toggleClass("flagged");
}
@ -549,6 +608,7 @@
timeout = setTimeout(function() {
$('ul:eq(' + y + ') li:eq(' + x + ')').rightClick();
mouseHeld = true;
}, clickholdMs);
});
@ -562,8 +622,6 @@
clearTimeout(timeout);
if (!inputEnabled) return;
if (mouseHeld) {
mouseHeld = false;
return;
@ -585,6 +643,7 @@
}
removeClearedRows();
//removeClearedColumns();
checkGameOver();
updateScore();
@ -602,7 +661,6 @@
<div id="game"></div>
<div id="stats">
<div id="score">Score: 0</div>
<div id="bombs" style="display: none;">Bombs: 0</div>
<div id="mines">Mines left: 0</div>
</div>
<div id="gameOver">
@ -612,6 +670,12 @@
<div id="setup">
<h1>endless mines</h1>
<p>
<strong>left click</strong> or <strong>tap</strong> to clear a tile. <br>
<strong>right click</strong> or <strong>hold</strong> to flag a mine. <br>
rows with <strong>exploded mines</strong> cannot be cleared.
</p>
<h2>Difficulty</h2>
<div class="centre">