636 lines
14 KiB
HTML
636 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>endless mines</title>
|
|
<style type="text/css">
|
|
@font-face {
|
|
font-family: Helsinki;
|
|
font-weight: normal;
|
|
src: url(helsinki.ttf);
|
|
}
|
|
|
|
html {
|
|
background-color: #272822;
|
|
margin: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
font-family: Helsinki;
|
|
}
|
|
|
|
body {
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
width: 100vmin;
|
|
}
|
|
|
|
#game {
|
|
background-color: #1b1c17;
|
|
float: left;
|
|
margin: 0 auto;
|
|
height: 90vmin;
|
|
}
|
|
|
|
#stats {
|
|
height: 10vmin;
|
|
width: 100vmin;
|
|
float: left;
|
|
|
|
background: #768087;
|
|
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#768087), color-stop(100%,#53595e));
|
|
background: -webkit-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -o-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -ms-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: linear-gradient(to bottom, #768087 0%,#53595e 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#768087', endColorstr='#53595e',GradientType=0 );
|
|
}
|
|
|
|
#stats div {
|
|
float: left;
|
|
font-size: 5.4vmin;
|
|
margin: 2vmin 4vmin;
|
|
width: auto;
|
|
}
|
|
|
|
#gameOver, #setup {
|
|
position: absolute;
|
|
width: 100vmin;
|
|
height: 90vmin;
|
|
background-color: rgba(0,0,0,0.3);
|
|
}
|
|
|
|
#setup {
|
|
height: 100vmin;
|
|
}
|
|
|
|
#setup h1 {
|
|
margin-top: 8vmin;
|
|
margin-bottom: 8vmin;
|
|
}
|
|
|
|
#setup h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#setup h2,
|
|
#setup label {
|
|
margin: 4vmin 3.5vmin;
|
|
font-size: 6vmin;
|
|
color: #fe7ac6;
|
|
text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
|
|
}
|
|
|
|
#setup div.centre {
|
|
position: absolute;
|
|
left: 10vmin;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
/* after checked input */
|
|
input:checked + label {
|
|
border: 1vmin dotted #a4f4b4;
|
|
border-radius: 2vmin;
|
|
padding: 1vmin 2vmin;
|
|
}
|
|
|
|
button {
|
|
font-family: Helsinki;
|
|
font-size: 6vmin;
|
|
border-radius: 2vmin;
|
|
padding: 2vmin;
|
|
margin: 0 auto;
|
|
box-shadow: 1vmin 1vmin 0 #000;
|
|
border: none;
|
|
|
|
position: absolute;
|
|
left: 38vmin;
|
|
top: 59vmin;
|
|
|
|
background: #768087;
|
|
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#768087), color-stop(100%,#53595e));
|
|
background: -webkit-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -o-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: -ms-linear-gradient(top, #768087 0%,#53595e 100%);
|
|
background: linear-gradient(to bottom, #768087 0%,#53595e 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#768087', endColorstr='#53595e',GradientType=0 );
|
|
}
|
|
|
|
h1, h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
color: #a4f4b4;
|
|
font-size: 12vmin;
|
|
margin: 16vmin 0;
|
|
text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
|
|
}
|
|
|
|
ul {
|
|
float: left;
|
|
clear: both;
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
color: white;
|
|
font-size: 8vmin;
|
|
padding: 1vmin;
|
|
padding-top: 0.5vmin;
|
|
padding-bottom: 1.5vmin;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
float: left;
|
|
height: 8vmin;
|
|
width: 8vmin;
|
|
background-color: #454e52;
|
|
border-radius: 2vmin;
|
|
cursor: default;
|
|
}
|
|
|
|
li.revealed {
|
|
background-color: #1b1c17;
|
|
}
|
|
|
|
li:not(.revealed):hover {
|
|
background-color: #a0a9af;
|
|
}
|
|
|
|
li.flagged {
|
|
background-color: #b5fe52;
|
|
}
|
|
|
|
li.flagged:hover {
|
|
background-color: #c6fe7a;
|
|
}
|
|
|
|
li.mine.revealed {
|
|
background-color: #d23000;
|
|
}
|
|
|
|
li.mines1 {
|
|
color: #c6fe7a;
|
|
}
|
|
|
|
li.mines2 {
|
|
color: #7ac5fe;
|
|
}
|
|
|
|
li.mines3 {
|
|
color: #fe7ac6;
|
|
}
|
|
|
|
li.mines4 {
|
|
color: #b17afe;
|
|
}
|
|
|
|
li.mines5 {
|
|
color: #feb27a;
|
|
}
|
|
|
|
li.mines6 {
|
|
color: #7afeb2;
|
|
}
|
|
|
|
li.mines7 {
|
|
color: #d74600;
|
|
}
|
|
|
|
li.mines8 {
|
|
color: #8c4600;
|
|
}
|
|
</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() {
|
|
$('#game').html("");
|
|
|
|
for (var i = 0; i < gameBoardHeight; i++) {
|
|
$('#game').append("<ul></ul>");
|
|
}
|
|
|
|
$('#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>");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$.fn.checkRow = function() {
|
|
//unclicked tiles
|
|
if ($(this).children('li:not(.revealed):not(.flagged)').length > 0) {
|
|
return false;
|
|
}
|
|
|
|
//incorrectly flagged tiles
|
|
if ($(this).children('li.flagged:not(.mine)').length > 0) {
|
|
return false;
|
|
}
|
|
|
|
//clicked mines
|
|
if ($(this).children('li.revealed.mine').length > 0) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
window.removeClearedRows = function() {
|
|
var rowsToRemove = $('#game ul').filter(function() {
|
|
return $(this).checkRow();
|
|
});
|
|
|
|
var numRowsToRemove = rowsToRemove.length;
|
|
|
|
if (rowsToRemove.length == 0) return;
|
|
|
|
rowsToRemove.each(function() {
|
|
score += $(this).children('.mine').length;
|
|
|
|
//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>');
|
|
}
|
|
}
|
|
});
|
|
|
|
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();
|
|
|
|
//click blank tiles
|
|
$('li.revealed:not(.mine):empty').mouseup();
|
|
|
|
//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() {
|
|
$('#score').text("Score: " + score);
|
|
}
|
|
|
|
function isGameOver() {
|
|
return ($('ul').has('.mine.revealed').length == gameBoardHeight);
|
|
}
|
|
|
|
function checkGameOver() {
|
|
if (isGameOver()) {
|
|
$('#gameOver').show();
|
|
}
|
|
}
|
|
|
|
function updateMinesLeft() {
|
|
//unflagged mines - revealed mines - flagged not-mines
|
|
$('#mines').text(
|
|
"Mines left: "
|
|
+ ($('.mine:not(.flagged)').length
|
|
- $('.mine.revealed').length
|
|
- $('li:not(.mine).flagged').length)
|
|
);
|
|
}
|
|
|
|
$.fn.rowScore = function() {
|
|
return $(this).children('.mine').length;
|
|
}
|
|
|
|
$.fn.rowAbove = function() {
|
|
return $(this).parent('ul').prev();
|
|
}
|
|
|
|
$.fn.rowBelow = function() {
|
|
return $(this).parent('ul').next();
|
|
}
|
|
|
|
$.fn.getX = function() {
|
|
return $(this).index();
|
|
}
|
|
|
|
$.fn.getY = function() {
|
|
return $(this).parent('ul').index();
|
|
}
|
|
|
|
$.fn.getGameboardPos = function() {
|
|
return gameBoard[$(this).getY()][$(this).getX()];
|
|
}
|
|
|
|
$.fn.isMine = function() {
|
|
return $(this).hasClass("mine");
|
|
}
|
|
|
|
$.fn.countMinesAdjacent = function() {
|
|
var count = 0;
|
|
|
|
$.each($(this).getAdjacentTiles(), function() {
|
|
if ($(this).isMine()) {
|
|
count++;
|
|
}
|
|
});
|
|
|
|
return count;
|
|
}
|
|
|
|
$.fn.getAdjacentTiles = function() {
|
|
var adjacentTiles = $('');
|
|
|
|
//row above
|
|
if ($(this).getY() > 0) {
|
|
if ($(this).getX() > 0) {
|
|
adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX() - 1).toArray());
|
|
}
|
|
|
|
adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX()).toArray());
|
|
|
|
if ($(this).getX() < (gameBoardWidth - 1)) {
|
|
adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX() + 1).toArray());
|
|
}
|
|
}
|
|
|
|
//this row
|
|
if ($(this).getX() > 0) {
|
|
adjacentTiles = adjacentTiles.add($(this).prev().toArray());
|
|
}
|
|
|
|
if ($(this).getX() < (gameBoardWidth - 1)) {
|
|
adjacentTiles = adjacentTiles.add($(this).next().toArray());
|
|
}
|
|
|
|
//row below
|
|
if ($(this).getY() < (gameBoardHeight - 1)) {
|
|
if ($(this).getX() > 0) {
|
|
adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX() - 1).toArray());
|
|
}
|
|
|
|
adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX()).toArray());
|
|
|
|
if ($(this).getX() < (gameBoardWidth - 1)) {
|
|
adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX() + 1).toArray());
|
|
}
|
|
}
|
|
|
|
return adjacentTiles;
|
|
}
|
|
|
|
$.fn.countMinesText = function() {
|
|
return $(this).countMinesAdjacent().toString().replace("0", "");
|
|
}
|
|
|
|
$('input[type="radio"]').on("change", function() {
|
|
switch ($(this).val()) {
|
|
case "easy":
|
|
mineChance = 0.13;
|
|
break;
|
|
case "normal":
|
|
mineChance = 0.2;
|
|
break;
|
|
case "hard":
|
|
mineChance = 0.285;
|
|
break;
|
|
}
|
|
});
|
|
|
|
$('#gameOver button').on("click", function() {
|
|
//reset game board
|
|
drawGameBoard();
|
|
|
|
$('#gameOver').hide();
|
|
$('#setup').show();
|
|
});
|
|
|
|
$('#setup button').on("click", function() {
|
|
//reset stats
|
|
firstClick = true;
|
|
|
|
score = 0;
|
|
mines = 0;
|
|
|
|
updateScore();
|
|
updateMinesLeft();
|
|
|
|
$('#setup').hide();
|
|
});
|
|
|
|
$.fn.leftClick = function(automated) {
|
|
if (!automated) automated = false;
|
|
|
|
//don't want first click to be a mine
|
|
if (firstClick) {
|
|
var x = $(this).getX();
|
|
x = (x >= 1) ? x : 1;
|
|
x = (x <= gameBoardWidth - 2) ? x : gameBoardWidth - 2;
|
|
|
|
var y = $(this).getY();
|
|
y = (y >= 1) ? y : 1;
|
|
y = (y <= gameBoardHeight - 2) ? y : gameBoardHeight - 2;
|
|
|
|
$('ul').eq(y - 1).children().slice(x - 1).filter(':lt(3)').removeClass("mine");
|
|
$('ul').eq(y ).children().slice(x - 1).filter(':lt(3)').removeClass("mine");
|
|
$('ul').eq(y + 1).children().slice(x - 1).filter(':lt(3)').removeClass("mine");
|
|
|
|
firstClick = false;
|
|
}
|
|
|
|
if ($(this).hasClass("flagged")) {
|
|
return;
|
|
}
|
|
|
|
if ($(this).isMine()) {
|
|
$(this).addClass("revealed");
|
|
|
|
//game over, or lose a life, or whatever
|
|
//...
|
|
} else if (!automated && parseInt($(this).text()) === $(this).getAdjacentTiles().filter('.flagged, .revealed.mine').length) {
|
|
//already clicked; use middle click reveal functionality
|
|
|
|
//number of flags matches number of adjacent mines
|
|
$(this).getAdjacentTiles().filter(':not(.flagged, .revealed)').each(function() {
|
|
$(this).mouseup();
|
|
});
|
|
} else {
|
|
$(this).addClass("revealed");
|
|
|
|
$(this).text(
|
|
$(this).countMinesText()
|
|
);
|
|
|
|
$(this).addClass("mines" + $(this).countMinesAdjacent());
|
|
|
|
//if no mines adjacent, cascade!
|
|
if ($(this).countMinesAdjacent() == 0) {
|
|
$(this).getAdjacentTiles().filter(':not(.revealed)').mouseup();
|
|
}
|
|
}
|
|
|
|
firstClick = false;
|
|
}
|
|
|
|
$.fn.middleClick = function() {
|
|
//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).mouseup();
|
|
});
|
|
}
|
|
}
|
|
|
|
$.fn.rightClick = function() {
|
|
if ($(this).hasClass("revealed")) {
|
|
//deploy a bomb!
|
|
//...
|
|
} else {
|
|
$(this).toggleClass("flagged");
|
|
}
|
|
|
|
clearTimeout(timeout);
|
|
}
|
|
|
|
$(document).on("contextmenu", "li", function(event) {
|
|
event.preventDefault();
|
|
});
|
|
|
|
|
|
$(document).on("mousedown", "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", "li", function(event) {
|
|
event.preventDefault();
|
|
|
|
clearTimeout(timeout);
|
|
|
|
if (!inputEnabled) return;
|
|
|
|
if (mouseHeld) {
|
|
mouseHeld = false;
|
|
return;
|
|
}
|
|
|
|
switch (event.which) {
|
|
case 3:
|
|
$(this).rightClick();
|
|
break;
|
|
case 2:
|
|
$(this).middleClick();
|
|
break;
|
|
case 1:
|
|
$(this).leftClick();
|
|
break;
|
|
default:
|
|
$(this).leftClick(true); //automated
|
|
break;
|
|
}
|
|
|
|
removeClearedRows();
|
|
checkGameOver();
|
|
|
|
updateScore();
|
|
updateMinesLeft();
|
|
});
|
|
|
|
//instantiate the game
|
|
drawGameBoard();
|
|
|
|
$('#gameOver').hide();
|
|
});
|
|
</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">
|
|
<h1>game over</h1>
|
|
<button>reset</button>
|
|
</div>
|
|
<div id="setup">
|
|
<h1>endless mines</h1>
|
|
|
|
<h2>Difficulty</h2>
|
|
|
|
<div class="centre">
|
|
<input type="radio" name="difficulty" id="difficultyEasy" value="easy">
|
|
<label for="difficultyEasy">Easy</label>
|
|
<input type="radio" name="difficulty" id="difficultyNormal" value="normal" checked>
|
|
<label for="difficultyNormal">Normal</label>
|
|
<input type="radio" name="difficulty" id="difficultyHard" value="hard">
|
|
<label for="difficultyHard">Hard</label>
|
|
</div>
|
|
|
|
<button>start</button>
|
|
</div>
|
|
</body>
|
|
</html> |