Bugfixes & styling
Middle-click support for clearing squares when all adjacent flags are placed Cascading when a tile with no adjacent mines is clicked Different colours for different numbers of adjacent mines
This commit is contained in:
parent
a0d5cf8f7a
commit
37e98ea1f5
75
index.html
75
index.html
|
@ -41,6 +41,8 @@
|
|||
font-size: 8vmin;
|
||||
font-family: Helsinki;
|
||||
padding: 1vmin;
|
||||
padding-top: 0.5vmin;
|
||||
padding-bottom: 1.5vmin;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
|
@ -49,7 +51,6 @@
|
|||
background-color: #4e3c23;
|
||||
border-radius: 2vmin;
|
||||
cursor: default;
|
||||
line-height: 10vmin;
|
||||
}
|
||||
|
||||
li.revealed {
|
||||
|
@ -72,22 +73,23 @@
|
|||
background-color: #d23000;
|
||||
}
|
||||
|
||||
li.1mines {
|
||||
color: green;
|
||||
li.mines1 {
|
||||
color: #c6fe7a;
|
||||
}
|
||||
|
||||
li.2mines {
|
||||
color: blue;
|
||||
li.mines2 {
|
||||
color: #7ac5fe;
|
||||
}
|
||||
|
||||
li.3mines {
|
||||
color: red;
|
||||
li.mines3 {
|
||||
color: #fe7ac6;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-2.1.3.min.js"></script>
|
||||
<script>
|
||||
var gameBoard = [];
|
||||
var score = 0;
|
||||
var firstClick = true;
|
||||
|
||||
$( document ).ready(function() {
|
||||
function newTile() {
|
||||
|
@ -185,55 +187,46 @@
|
|||
}
|
||||
|
||||
$.fn.getAdjacentTiles = function() {
|
||||
var adjacentTiles = [];
|
||||
var adjacentTiles = $('');
|
||||
|
||||
//row above
|
||||
if ($(this).getY() > 0) {
|
||||
if ($(this).getX() > 0) {
|
||||
adjacentTiles.push($(this).rowAbove().children().eq($(this).getX() - 1).toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX() - 1).toArray());
|
||||
}
|
||||
|
||||
adjacentTiles.push($(this).rowAbove().children().eq($(this).getX()).toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX()).toArray());
|
||||
|
||||
if ($(this).getX() < (gameBoard[0].length - 1)) {
|
||||
adjacentTiles.push($(this).rowAbove().children().eq($(this).getX() + 1).toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).rowAbove().children().eq($(this).getX() + 1).toArray());
|
||||
}
|
||||
}
|
||||
|
||||
//this row
|
||||
if ($(this).getX() > 0) {
|
||||
adjacentTiles.push($(this).prev().toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).prev().toArray());
|
||||
}
|
||||
|
||||
if ($(this).getX() < (gameBoard[0].length - 1)) {
|
||||
adjacentTiles.push($(this).next().toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).next().toArray());
|
||||
}
|
||||
|
||||
//row below
|
||||
if ($(this).getY() < (gameBoard.length - 1)) {
|
||||
if ($(this).getX() > 0) {
|
||||
adjacentTiles.push($(this).rowBelow().children().eq($(this).getX() - 1).toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX() - 1).toArray());
|
||||
}
|
||||
|
||||
adjacentTiles.push($(this).rowBelow().children().eq($(this).getX()).toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX()).toArray());
|
||||
|
||||
if ($(this).getX() < (gameBoard[0].length - 1)) {
|
||||
adjacentTiles.push($(this).rowBelow().children().eq($(this).getX() + 1).toArray());
|
||||
adjacentTiles = adjacentTiles.add($(this).rowBelow().children().eq($(this).getX() + 1).toArray());
|
||||
}
|
||||
}
|
||||
|
||||
return adjacentTiles;
|
||||
}
|
||||
|
||||
$.fn.clickAdjacentTiles = function() {
|
||||
$(this).getAdjacentTiles().each(function() {
|
||||
$(this).addClass("cascade");
|
||||
});
|
||||
|
||||
$('li.cascade').click();
|
||||
$('li.cascade').removeClass("cascade");
|
||||
}
|
||||
|
||||
$.fn.countMinesText = function() {
|
||||
return $(this).countMinesAdjacent().toString().replace("0", "");
|
||||
}
|
||||
|
@ -243,10 +236,15 @@
|
|||
return;
|
||||
}
|
||||
|
||||
//don't want first click to be a mine
|
||||
if (firstClick && $(this).getGameboardPos().mine) {
|
||||
$(this).getGameboardPos().mine = false;
|
||||
}
|
||||
|
||||
$(this).getGameboardPos().revealed = true;
|
||||
$(this).addClass("revealed");
|
||||
|
||||
if ($(this).getGameboardPos().mine) {
|
||||
if ($(this).getGameboardPos().mine && !firstClick) {
|
||||
//game over, or lose a life, or whatever
|
||||
$(this).addClass("mine");
|
||||
} else {
|
||||
|
@ -254,30 +252,43 @@
|
|||
$(this).countMinesText()
|
||||
);
|
||||
|
||||
$(this).addClass($(this).countMinesAdjacent() + "mines");
|
||||
$(this).addClass("mines" + $(this).countMinesAdjacent());
|
||||
}
|
||||
|
||||
//if no mines adjacent, cascade!
|
||||
if ($(this).countMinesAdjacent() == 0) {
|
||||
$(this).clickAdjacentTiles();
|
||||
$(this).getAdjacentTiles().filter(':not(.revealed)').mousedown();
|
||||
}
|
||||
}
|
||||
|
||||
$.fn.middleClick = function() {
|
||||
//number of flags matches number of adjacent mines
|
||||
if ($(this).text() == $(this).getAdjacentTiles().filter('.flagged').length) {
|
||||
$(this).getAdjacentTiles().filter(':not(.flagged)').each(function() {
|
||||
$(this).mousedown();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$.fn.rightClick = function() {
|
||||
$(this).addClass("flagged");
|
||||
if (!$(this).hasClass("revealed")) {
|
||||
$(this).toggleClass("flagged");
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on("contextmenu", "li", function(event) {
|
||||
$(this).rightClick();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$(document).on("mousedown", "li", function(event) {
|
||||
switch (event.which) {
|
||||
case 3: //right click
|
||||
case 3:
|
||||
$(this).rightClick();
|
||||
break;
|
||||
case 1: //left click
|
||||
case 2:
|
||||
$(this).middleClick();
|
||||
break;
|
||||
case 1:
|
||||
default:
|
||||
$(this).leftClick();
|
||||
break;
|
||||
|
|
Loading…
Reference in New Issue