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:
synth-ruiner 2015-02-28 16:53:40 +00:00
parent a0d5cf8f7a
commit 37e98ea1f5
1 changed files with 45 additions and 34 deletions

View File

@ -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;