max
/
endless-mines
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

This commit is contained in:
synth-ruiner 2015-03-09 12:28:54 +00:00
parent 3553ec40e4 8ebb5e0cc3
commit bbebf9a7ec
2 changed files with 172 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -6,10 +6,6 @@ Rows with exploded mines cannot be cleared. See how far you can get!
Left-click to clear a tile. Right-click to flag a mine. Middle-click a number to clear any non-flagged adjacent tiles.
## stuff to add
move middle-click functionality to left-click instead
add support for mobile devices/1-button mice (probably hold down to flag a mine)
save game using html5 local storage so player can come back later
make cleared columns slide left?
@ -21,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

202
index.html
View File

@ -16,6 +16,7 @@
width: 100vw;
overflow: hidden;
font-family: Helsinki;
-webkit-user-select: none;
}
body {
@ -65,8 +66,8 @@
}
#setup h1 {
margin-top: 8vmin;
margin-bottom: 8vmin;
margin-top: 6vmin;
margin-bottom: 6vmin;
}
#setup h2 {
@ -108,7 +109,7 @@
position: absolute;
left: 38vmin;
top: 59vmin;
top: 75vmin;
background: #768087;
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
@ -206,17 +207,28 @@
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;
$(document).ready(function() {
function drawGameBoard() {
@ -228,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) {
@ -256,36 +273,84 @@
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').filter(function() {
var rowsToRemove = $('#game ul:not(.removing)').filter(function() {
return $(this).checkRow();
});
var numRowsToRemove = rowsToRemove.length;
if (rowsToRemove.length == 0) return;
if (numRowsToRemove == 0) return;
rowsToRemove.addClass("removing");
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());
}
refreshMineCounts();
//click blank tiles
$('li.revealed:not(.mine):empty').mouseup();
});
}
window.removeClearedColumns = function() {
var columnsToRemove = $('ul:not(.removing):eq(0) li:not(.removing)').filter(function() {
return $(this).checkColumn();
});
inputEnabled = false;
if (columnsToRemove.length == 0) return;
rowsToRemove.slideUp("slow", function() {
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()
@ -307,21 +372,6 @@
$(this).addClass("revealed");
});
//refresh last row to reflect new rows beneath
$('li.revealed').last().parent().children('li.revealed').mousedown();
//click blank tiles
$('li.revealed:not(.mine):empty').mousedown();
//this is a bit of a hack :( oh well
$('ul:gt(' + gameBoardHeight + ')').remove();
});
//this is a bit of a hack :( oh well
$('ul:gt(' + gameBoardHeight + ')').remove();
inputEnabled = true;
}
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();
}
@ -368,10 +430,6 @@
return $(this).parent('ul').index();
}
$.fn.getGameboardPos = function() {
return gameBoard[$(this).getY()][$(this).getX()];
}
$.fn.isMine = function() {
return $(this).hasClass("mine");
}
@ -468,7 +526,9 @@
$('#setup').hide();
});
$.fn.leftClick = function() {
$.fn.leftClick = function(automated) {
if (!automated) automated = false;
//don't want first click to be a mine
if (firstClick) {
var x = $(this).getX();
@ -495,13 +555,12 @@
//game over, or lose a life, or whatever
//...
} else if (parseInt($(this).text()) === $(this).getAdjacentTiles().filter('.flagged').length) {
} else if (!automated && parseInt($(this).text()) === $(this).getAdjacentTiles().filter('.flagged, .revealed.mine').length) {
//already clicked; use middle click reveal functionality
//$(this).middleClick();
//number of flags matches number of adjacent mines
$(this).getAdjacentTiles().filter(':not(.flagged)').each(function() {
//$(this).mousedown();
$(this).getAdjacentTiles().filter(':not(.flagged, .revealed)').each(function() {
$(this).mouseup();
});
} else {
$(this).addClass("revealed");
@ -514,7 +573,7 @@
//if no mines adjacent, cascade!
if ($(this).countMinesAdjacent() == 0) {
$(this).getAdjacentTiles().filter(':not(.revealed)').mousedown();
$(this).getAdjacentTiles().filter(':not(.revealed)').mouseup();
}
}
@ -522,33 +581,51 @@
}
$.fn.middleClick = function() {
//move this functionality to left click
//number of flags matches number of adjacent mines
if (parseInt($(this).text()) === $(this).getAdjacentTiles().filter('.flagged, .revealed.mine').length) {
$(this).getAdjacentTiles().filter(':not(.flagged)').each(function() {
$(this).mousedown();
$(this).mouseup();
});
}
}
$.fn.rightClick = function() {
if ($(this).hasClass("revealed")) {
//deploy a bomb!
//...
} else {
if (!$(this).hasClass("revealed")) {
$(this).toggleClass("flagged");
}
clearTimeout(timeout);
}
$(document).on("contextmenu", "li", function(event) {
event.preventDefault();
});
$(document).on("mousedown", "li", function(event) {
$(document).on("mousedown touchstart", "li", function(event) {
var x = $(this).getX();
var y = $(this).getY();
timeout = setTimeout(function() {
$('ul:eq(' + y + ') li:eq(' + x + ')').rightClick();
mouseHeld = true;
}, clickholdMs);
});
$(document).on("mouseleave", "li", function(event) {
clearTimeout(timeout);
});
$(document).on("mouseup touchend", "li", function(event) {
event.preventDefault();
if (!inputEnabled) return;
clearTimeout(timeout);
if (mouseHeld) {
mouseHeld = false;
return;
}
switch (event.which) {
case 3:
@ -558,12 +635,15 @@
$(this).middleClick();
break;
case 1:
default:
$(this).leftClick();
break;
default:
$(this).leftClick(true); //automated
break;
}
removeClearedRows();
//removeClearedColumns();
checkGameOver();
updateScore();
@ -576,12 +656,20 @@
$('#gameOver').hide();
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60523398-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<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">
@ -591,6 +679,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">