Splash screen and difficulty options
This commit is contained in:
synth-ruiner
parent
830503cfe5
commit
0c2faebd03
136
index.html
136
index.html
|
|
@ -36,8 +36,6 @@
|
|||
width: 100vmin;
|
||||
float: left;
|
||||
|
||||
border-radius: 2vmin;
|
||||
|
||||
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));
|
||||
|
|
@ -55,6 +53,72 @@
|
|||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -252,6 +316,16 @@
|
|||
$('#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(
|
||||
|
|
@ -347,6 +421,39 @@
|
|||
return $(this).countMinesAdjacent().toString().replace("0", "");
|
||||
}
|
||||
|
||||
$('input[type="radio"]').on("change", function() {
|
||||
switch ($(this).val()) {
|
||||
case "easy":
|
||||
mineChance = 0.1;
|
||||
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
|
||||
score = 0;
|
||||
mines = 0;
|
||||
|
||||
updateScore();
|
||||
updateMinesLeft();
|
||||
|
||||
$('#setup').hide();
|
||||
});
|
||||
|
||||
$.fn.leftClick = function() {
|
||||
//don't want first click to be a mine
|
||||
if (firstClick && $(this).isMine()) {
|
||||
|
|
@ -431,11 +538,16 @@
|
|||
}
|
||||
|
||||
removeClearedRows();
|
||||
checkGameOver();
|
||||
|
||||
updateScore();
|
||||
updateMinesLeft();
|
||||
});
|
||||
|
||||
//instantiate the game
|
||||
drawGameBoard();
|
||||
|
||||
$('#gameOver').hide();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -446,5 +558,25 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue