Tutorial mode and credits
Moved difficulty options to separate "new game" buttons styling for score/hi score paypal and twitter links
This commit is contained in:
synth-ruiner
parent
f3ac4af493
commit
c92d2ee621
789
index.html
789
index.html
|
|
@ -42,8 +42,120 @@
|
||||||
width: 100vmin;
|
width: 100vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes scrollLeft {
|
||||||
|
from {left: 0;}
|
||||||
|
to {
|
||||||
|
left: -720em; /* fallback */
|
||||||
|
left: -7200vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes scrollLeft {
|
||||||
|
from {left: 0;}
|
||||||
|
to {
|
||||||
|
left: -720em; /* fallback */
|
||||||
|
left: -7200vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {top: 0; left: 0;}
|
||||||
|
50% {
|
||||||
|
top: 1.2em; /* fallback */
|
||||||
|
top: 12vmin;
|
||||||
|
left: 0.2em; /* fallback */
|
||||||
|
left: 2vmin;
|
||||||
|
}
|
||||||
|
100% {top: 0; left: 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bounce {
|
||||||
|
0% {top: 0; left: 0;}
|
||||||
|
50% {
|
||||||
|
top: 1.2em; /* fallback */
|
||||||
|
top: 12vmin;
|
||||||
|
left: 0.2em;
|
||||||
|
left: 2vmin;
|
||||||
|
}
|
||||||
|
100% {top: 0; left: 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {color: #c6fe7a;}
|
||||||
|
33% {color: #7ac5fe;}
|
||||||
|
67% {color: #fe7ac6;}
|
||||||
|
100% {color: #c6fe7a;} /* back to start */
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes rainbow {
|
||||||
|
0% {color: #c6fe7a;}
|
||||||
|
33% {color: #7ac5fe;}
|
||||||
|
67% {color: #fe7ac6;}
|
||||||
|
100% {color: #c6fe7a;} /* back to start */
|
||||||
|
}
|
||||||
|
|
||||||
#cracktro {
|
#cracktro {
|
||||||
display: none;
|
color: #c6fe7a;
|
||||||
|
font-size: 0.4em; /* fallback */
|
||||||
|
font-size: 6vmin;
|
||||||
|
height: 2em; /* fallback */
|
||||||
|
height: 20vmin;
|
||||||
|
margin: 0.4em 0; /* fallback */
|
||||||
|
margin: 4vmin 0;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 720em;
|
||||||
|
width: 7200vmin;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
animation: scrollLeft 420s linear infinite;
|
||||||
|
-webkit-animation: scrollLeft 420s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cracktro span {
|
||||||
|
margin-right: 0.1em; /* fallback */
|
||||||
|
margin-right: 1vmin;
|
||||||
|
position: relative;
|
||||||
|
animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
|
||||||
|
-webkit-animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
|
||||||
|
text-shadow: 0.5vmin 0.5vmin black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cracktro span:nth-child(10n+1) {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
-webkit-animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+2) {
|
||||||
|
animation-delay: 0.8s;
|
||||||
|
-webkit-animation-delay: 0.8s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+3) {
|
||||||
|
animation-delay: 1.2s;
|
||||||
|
-webkit-animation-delay: 1.2s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+4) {
|
||||||
|
animation-delay: 1.6s;
|
||||||
|
-webkit-animation-delay: 1.6s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+5) {
|
||||||
|
animation-delay: 2s;
|
||||||
|
-webkit-animation-delay: 2s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+6) {
|
||||||
|
animation-delay: 2.4s;
|
||||||
|
-webkit-animation-delay: 2.4s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+7) {
|
||||||
|
animation-delay: 2.8s;
|
||||||
|
-webkit-animation-delay: 2.8s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+8) {
|
||||||
|
animation-delay: 3.2s;
|
||||||
|
-webkit-animation-delay: 3.2s;
|
||||||
|
}
|
||||||
|
#cracktro span:nth-child(10n+9) {
|
||||||
|
animation-delay: 3.6s;
|
||||||
|
-webkit-animation-delay: 3.6s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game {
|
#game {
|
||||||
|
|
@ -98,13 +210,19 @@
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gameOver, #setup {
|
#gameOver, #setup, #tutorial {
|
||||||
position: absolute;
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
width: 10em; /* fallback */
|
width: 10em; /* fallback */
|
||||||
width: 100vmin;
|
width: 100vmin;
|
||||||
height: 10em; /* fallback */
|
height: 10em; /* fallback */
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba(0,0,0,0.3);
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gameOver .score {
|
||||||
|
margin-right: 1.2em;
|
||||||
|
margin-right: 12vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
#setup h2 {
|
#setup h2 {
|
||||||
|
|
@ -122,24 +240,27 @@
|
||||||
text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
|
text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tutorial .gameBoard {
|
||||||
|
float: left;
|
||||||
|
padding: 0.5em; /* fallback */
|
||||||
|
padding: 5vmin;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tutorial p {
|
||||||
|
padding: 0 0.5em; /* fallback */
|
||||||
|
padding: 0 5vmin;
|
||||||
|
}
|
||||||
|
|
||||||
.centre {
|
.centre {
|
||||||
text-align: center;
|
clear: both;
|
||||||
margin-top: 0.2em; /* fallback */
|
margin-top: 0.2em; /* fallback */
|
||||||
margin-top: 2vmin;
|
margin-top: 2vmin;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
.subtitle {
|
||||||
display: none;
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
/* after checked input */
|
|
||||||
input:checked + label {
|
|
||||||
border: 0.1em dotted #a4f4b4; /* fallback */
|
|
||||||
border: 1vmin dotted #a4f4b4;
|
|
||||||
border-radius: 0.2em; /* fallback */
|
|
||||||
border-radius: 2vmin;
|
|
||||||
padding: 0.1em 0.2em; /* fallback */
|
|
||||||
padding: 1vmin 2vmin;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -170,6 +291,32 @@
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.donate {
|
||||||
|
background: #ffefa7;
|
||||||
|
background: -moz-linear-gradient(top, #ffefa7 0%, #feae27 100%);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffefa7), color-stop(100%,#feae27));
|
||||||
|
background: -webkit-linear-gradient(top, #ffefa7 0%,#feae27 100%);
|
||||||
|
background: -o-linear-gradient(top, #ffefa7 0%,#feae27 100%);
|
||||||
|
background: -ms-linear-gradient(top, #ffefa7 0%,#feae27 100%);
|
||||||
|
background: linear-gradient(to bottom, #ffefa7 0%,#feae27 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffefa7', endColorstr='#feae27',GradientType=0 );
|
||||||
|
}
|
||||||
|
|
||||||
|
button.twitter {
|
||||||
|
background: #51aaea;
|
||||||
|
background: -moz-linear-gradient(top, #51aaea 0%, #3375a6 100%);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51aaea), color-stop(100%,#3375a6));
|
||||||
|
background: -webkit-linear-gradient(top, #51aaea 0%,#3375a6 100%);
|
||||||
|
background: -o-linear-gradient(top, #51aaea 0%,#3375a6 100%);
|
||||||
|
background: -ms-linear-gradient(top, #51aaea 0%,#3375a6 100%);
|
||||||
|
background: linear-gradient(to bottom, #51aaea 0%,#3375a6 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51aaea', endColorstr='#3375a6',GradientType=0 );
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -186,6 +333,12 @@
|
||||||
text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
|
text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #7ac5fe;
|
||||||
|
font-size: 0.6em; /* fallback */
|
||||||
|
font-size: 6vmin;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
float: left;
|
float: left;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
|
@ -236,6 +389,12 @@
|
||||||
background-color: #c6fe7a;
|
background-color: #c6fe7a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li.highlighted {
|
||||||
|
border: 0.1em solid #fe7ac6; /* fallback */
|
||||||
|
border: 1vmin solid #fe7ac6;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
li.mine.revealed {
|
li.mine.revealed {
|
||||||
background-color: #d23000;
|
background-color: #d23000;
|
||||||
background-image: url("images/skull.png");
|
background-image: url("images/skull.png");
|
||||||
|
|
@ -285,35 +444,59 @@
|
||||||
strong {
|
strong {
|
||||||
color: #fe7ac6;
|
color: #fe7ac6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
color: #fe7ac6;
|
||||||
|
font-size: 4vmin;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 8vmin;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="jquery-2.1.3.min.js"></script>
|
<script src="jquery-2.1.3.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var gameBoardWidth = 10;
|
var gameBoardWidth = 10;
|
||||||
var gameBoardHeight = 9;
|
var gameBoardHeight = 9;
|
||||||
var score = 0;
|
var score = 0;
|
||||||
var firstClick = true;
|
var firstClick = true;
|
||||||
var mineChance = 0.2;
|
var difficulty = "normal";
|
||||||
var clickholdMs = 200;
|
var mineChance = 0.2; //normal
|
||||||
|
var clickholdMs = 200;
|
||||||
|
var mouseHeld = false;
|
||||||
var timeout; //hold timer
|
var timeout; //hold timer
|
||||||
var mouseHeld = false;
|
|
||||||
var viewportSizingAvailable = ($('#game').height == $(window).height()); // only run once
|
var viewportSizingAvailable = ($('#game').height == $(window).height()); // only run once
|
||||||
|
var tutorialPages = [];
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
function drawGameBoard() {
|
function drawGameBoard() {
|
||||||
$('#game').html("");
|
$('#game').html("");
|
||||||
|
$('#tutorial .gameBoard').html("");
|
||||||
|
|
||||||
|
gameBoardWidth = 10;
|
||||||
|
|
||||||
//determine aspect ratio so as to fit the screen
|
//determine aspect ratio so as to fit the screen
|
||||||
gameBoardHeight = Math.floor((1 / getAspectRatio()) * 10) - 1;
|
gameBoardHeight = determineGameBoardHeight();
|
||||||
|
|
||||||
if (gameBoardHeight <= 9) {
|
|
||||||
gameBoardHeight = 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0; i < gameBoardHeight; i++) {
|
for (var i = 0; i < gameBoardHeight; i++) {
|
||||||
$('#game').append(newRow());
|
$('#game').append(newRow());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function determineGameBoardHeight() {
|
||||||
|
return Math.max(
|
||||||
|
Math.floor((1 / getAspectRatio()) * 10) - 1,
|
||||||
|
9 //minimum
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function newTile() {
|
function newTile() {
|
||||||
if (Math.random() < mineChance) {
|
if (Math.random() < mineChance) {
|
||||||
return '<li class="mine"></li>';
|
return '<li class="mine"></li>';
|
||||||
|
|
@ -340,9 +523,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
//variables
|
//variables
|
||||||
localStorage.setItem("score", score);
|
localStorage.setItem("score", score);
|
||||||
localStorage.setItem("mineChance", mineChance);
|
localStorage.setItem("mineChance", mineChance);
|
||||||
localStorage.setItem("firstClick", firstClick);
|
|
||||||
|
|
||||||
//game board
|
//game board
|
||||||
localStorage.setItem("gameBoard", $('#game').html());
|
localStorage.setItem("gameBoard", $('#game').html());
|
||||||
|
|
@ -356,12 +538,30 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
//variables
|
//variables
|
||||||
score = parseInt(localStorage.getItem("score"));
|
score = parseInt(localStorage.getItem("score"));
|
||||||
mineChance = parseFloat(localStorage.getItem("mineChance"));
|
mineChance = parseFloat(localStorage.getItem("mineChance"));
|
||||||
firstClick = (localStorage.getItem("firstClick") == "true");
|
firstClick = false;
|
||||||
|
|
||||||
//game board
|
//game board
|
||||||
$('#game').html(localStorage.getItem("gameBoard"));
|
$('#game').html(localStorage.getItem("gameBoard"));
|
||||||
|
|
||||||
|
gameBoardHeight = determineGameBoardHeight();
|
||||||
|
|
||||||
|
// add rows if there is empty space
|
||||||
|
while ($('ul').length < gameBoardHeight) {
|
||||||
|
$('#game').append(newRow());
|
||||||
|
}
|
||||||
|
|
||||||
|
//remove any rows the screen cannot display
|
||||||
|
$('#game ul:gt(' + (gameBoardHeight - 1) + ')').remove();
|
||||||
|
|
||||||
|
refreshMineCounts();
|
||||||
|
updateScore();
|
||||||
|
updateMinesLeft();
|
||||||
|
|
||||||
|
//click blank tiles
|
||||||
|
$('li.revealed:not(.mine):empty').mouseup();
|
||||||
|
|
||||||
$('#setup').hide();
|
$('#setup').hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -393,7 +593,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
window.removeClearedRows = function() {
|
window.removeClearedRows = function() {
|
||||||
var rowsToRemove = $('#game ul:not(.removing)').filter(function() {
|
var rowsToRemove = $('ul:not(.removing)').filter(function() {
|
||||||
return $(this).checkRow();
|
return $(this).checkRow();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -407,10 +607,11 @@
|
||||||
$(this).addClass("removing");
|
$(this).addClass("removing");
|
||||||
|
|
||||||
$(this).slideUp("slow", function() {
|
$(this).slideUp("slow", function() {
|
||||||
$(this).remove();
|
|
||||||
|
|
||||||
//add new row on bottom
|
//add new row on bottom
|
||||||
$('#game').append(newRow());
|
$(this).closest("div").append(newRow());
|
||||||
|
|
||||||
|
$(this).remove();
|
||||||
|
|
||||||
refreshMineCounts();
|
refreshMineCounts();
|
||||||
|
|
||||||
|
|
@ -437,6 +638,7 @@
|
||||||
//animation for top row + deletion of column
|
//animation for top row + deletion of column
|
||||||
$(this).animate({width: 0, borderRadius: 0, padding: 0}, "slow", function() {
|
$(this).animate({width: 0, borderRadius: 0, padding: 0}, "slow", function() {
|
||||||
$(this).column().remove();
|
$(this).column().remove();
|
||||||
|
|
||||||
$('ul').each(function() {
|
$('ul').each(function() {
|
||||||
$(this).append(newTile());
|
$(this).append(newTile());
|
||||||
});
|
});
|
||||||
|
|
@ -484,7 +686,7 @@
|
||||||
function checkGameOver() {
|
function checkGameOver() {
|
||||||
if (isGameOver()) {
|
if (isGameOver()) {
|
||||||
$('#gameOver').show();
|
$('#gameOver').show();
|
||||||
|
|
||||||
var currentHiScore = 0;
|
var currentHiScore = 0;
|
||||||
|
|
||||||
if ($.isNumeric(localStorage.getItem("hiscore"))) {
|
if ($.isNumeric(localStorage.getItem("hiscore"))) {
|
||||||
|
|
@ -504,6 +706,50 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkTutorial() {
|
||||||
|
if ($('#tutorial').is(':hidden')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentPage = $('#tutorial div:visible');
|
||||||
|
|
||||||
|
if (
|
||||||
|
currentPage.find('.toFlag' ).length == currentPage.find('.toFlag.flagged' ).length
|
||||||
|
&& currentPage.find('.toClick').length == currentPage.find('.toClick.revealed' ).length
|
||||||
|
&& (currentPage.find('.flagAny' ).length == 0 || currentPage.find('.flagAny.flagged' ).length > 0)
|
||||||
|
&& (currentPage.find('.clickAny').length == 0 || currentPage.find('.clickAny.revealed').length > 0)
|
||||||
|
) {
|
||||||
|
currentPage.nextPage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.nextPage = function() {
|
||||||
|
$('.gameBoard').html("");
|
||||||
|
$(this).hide();
|
||||||
|
|
||||||
|
if ($(this).is(':last-child')) {
|
||||||
|
//end of tutorial!
|
||||||
|
$('#tutorial').hide();
|
||||||
|
$('#setup, #game, #stats').show();
|
||||||
|
$('#setup button.cancel').hide();
|
||||||
|
|
||||||
|
gameBoardWidth = 10;
|
||||||
|
gameBoardHeight = determineGameBoardHeight();
|
||||||
|
} else {
|
||||||
|
$(this).next().show();
|
||||||
|
$(this).next().children().show();
|
||||||
|
|
||||||
|
var nextPage = parseInt($(this).attr('id').replace("page", ""));
|
||||||
|
|
||||||
|
$(this).next().children('.gameBoard').html(tutorialPages[nextPage]);
|
||||||
|
|
||||||
|
if ($(this).next().children('.gameBoard').hasClass("clearRowsColumns")) {
|
||||||
|
removeClearedRows();
|
||||||
|
removeClearedColumns();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function updateMinesLeft() {
|
function updateMinesLeft() {
|
||||||
//unflagged mines - revealed mines - flagged not-mines
|
//unflagged mines - revealed mines - flagged not-mines
|
||||||
$('#mines').text(
|
$('#mines').text(
|
||||||
|
|
@ -632,31 +878,30 @@
|
||||||
return $(this).countMinesAdjacent().toString().replace("0", "");
|
return $(this).countMinesAdjacent().toString().replace("0", "");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function detachTutorials() {
|
||||||
|
//can't have several game boards in play at the same time
|
||||||
|
//because it messes with mine counts, row counts, etc.
|
||||||
|
tutorialPages = [];
|
||||||
|
|
||||||
|
$('#tutorial .gameBoard').each(function() {
|
||||||
|
tutorialPages.push($(this).html());
|
||||||
|
|
||||||
|
$(this).html("");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$.fn.cracktro = function() {
|
$.fn.cracktro = function() {
|
||||||
var text = $('#cracktro').text().trim().split();
|
//trim long whitespaces to 1 space, remove line breaks, split to individual chars
|
||||||
|
var text = $(this).html().replace(/ +/g, " ").replace(/(\r\n|\n|\r)/gm, "").replace("&", "&").split("");
|
||||||
var cracktro = "";
|
var cracktro = "";
|
||||||
|
|
||||||
for (var i = 0; i < text.length; i++) {
|
for (var i = 0; i < text.length; i++) {
|
||||||
cracktro += "<span>" + text[i] + "</span>";
|
cracktro += "<span>" + text[i].replace(" ", " ") + "</span>";
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#cracktro').html(cracktro);
|
$(this).html(cracktro);
|
||||||
}
|
}
|
||||||
|
|
||||||
$('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() {
|
$('#gameOver button').on("click", function() {
|
||||||
drawGameBoard();
|
drawGameBoard();
|
||||||
|
|
||||||
|
|
@ -686,8 +931,14 @@
|
||||||
//reset stats
|
//reset stats
|
||||||
firstClick = true;
|
firstClick = true;
|
||||||
|
|
||||||
//reset difficulty
|
//set difficulty
|
||||||
$('input:checked').change();
|
if ($(this).hasClass("easy")) {
|
||||||
|
mineChance = 0.13;
|
||||||
|
} else if ($(this).hasClass("normal")) {
|
||||||
|
mineChance = 0.2;
|
||||||
|
} else if ($(this).hasClass("hard")) {
|
||||||
|
mineChance = 0.285;
|
||||||
|
}
|
||||||
|
|
||||||
score = 0;
|
score = 0;
|
||||||
|
|
||||||
|
|
@ -697,6 +948,22 @@
|
||||||
$('#setup').hide();
|
$('#setup').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('button.tutorial').on("click", function() {
|
||||||
|
$('#tutorial').show();
|
||||||
|
$('#tutorial').siblings().hide();
|
||||||
|
|
||||||
|
$('#page1').show();
|
||||||
|
$('#page1 *').show();
|
||||||
|
$('#page1').siblings('div').hide();
|
||||||
|
|
||||||
|
$('#page1 .gameBoard').html(tutorialPages[0]);
|
||||||
|
|
||||||
|
$('#game').html("");
|
||||||
|
|
||||||
|
gameBoardWidth = 5;
|
||||||
|
gameBoardHeight = 5;
|
||||||
|
});
|
||||||
|
|
||||||
$.fn.leftClick = function(automated) {
|
$.fn.leftClick = function(automated) {
|
||||||
if (!automated) automated = false;
|
if (!automated) automated = false;
|
||||||
|
|
||||||
|
|
@ -805,13 +1072,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
removeClearedRows();
|
checkTutorial();
|
||||||
removeClearedColumns();
|
|
||||||
saveGame();
|
|
||||||
checkGameOver();
|
|
||||||
|
|
||||||
updateScore();
|
if ($('#tutorial').is(':hidden')) {
|
||||||
updateMinesLeft();
|
removeClearedRows();
|
||||||
|
removeClearedColumns();
|
||||||
|
|
||||||
|
saveGame();
|
||||||
|
checkGameOver();
|
||||||
|
|
||||||
|
updateScore();
|
||||||
|
updateMinesLeft();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$(window).resize(function() {
|
$(window).resize(function() {
|
||||||
|
|
@ -820,11 +1092,16 @@
|
||||||
|
|
||||||
resizeToWindow();
|
resizeToWindow();
|
||||||
|
|
||||||
|
detachTutorials();
|
||||||
|
|
||||||
//instantiate the game
|
//instantiate the game
|
||||||
loadGame(); //loadGame will draw the game board if no saved game is found
|
loadGame(); //loadGame will draw the game board if no saved game is found
|
||||||
|
|
||||||
$('#gameOver').hide();
|
$('#gameOver').hide();
|
||||||
|
$('#tutorial').hide();
|
||||||
$('button.cancel').hide();
|
$('button.cancel').hide();
|
||||||
|
|
||||||
|
$('#cracktro').cracktro();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -846,55 +1123,377 @@
|
||||||
<div id="game"></div>
|
<div id="game"></div>
|
||||||
<div id="gameOver">
|
<div id="gameOver">
|
||||||
<h1>game over</h1>
|
<h1>game over</h1>
|
||||||
<p>score: <span class="score"></span> personal best: <span class="hiscore"></span></p>
|
|
||||||
<p>a game by max bradbury</p>
|
<table>
|
||||||
<p>inspirations include minesweeper, tetris and 2048</p>
|
<thead>
|
||||||
<p>tell your friends</p>
|
<tr>
|
||||||
|
<th>score</th><th>personal best</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="score"></td><td class="hiscore"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<div id="cracktro">
|
<div id="cracktro">
|
||||||
a game by max bradbury......................................................................
|
......................................................................
|
||||||
|
a game by max bradbury
|
||||||
inspired by minesweeper, tetris and 2048....................................................
|
......................................................................
|
||||||
|
inspired by minesweeper, tetris and 2048
|
||||||
gratz 'n' greetz go out to mum & dad, guy, titas, dan, robin, arielle, isadore,
|
......................................................................
|
||||||
thom, tom, olu, lovely dave, jen, ed, david, andy, rachel, isaac, rory,
|
gratz 'n' greetz go out to mum and dad, guy, titas, dan, nick, enrico,
|
||||||
patrick 'partay' pat, al, ant, zoe, john, charlie.....................
|
ahona, robin, arielle, isy, thom, tom, olu, lovely dave, jen, ed,
|
||||||
|
david, andy, rachel, isaac, rory, 'partay' pat, al, ant, zoe, john,
|
||||||
plugs go out to keygenjukebox.com, candybox2.net, aliendovecote.com, zoe quinn & depression quest,
|
charlie, wilkie, george
|
||||||
cookie clicker, font squirrel, codecademy, sublime text, github............................
|
......................................................................
|
||||||
|
HELLO's fly out to some cool game devs: porpentine, merritt kopas,
|
||||||
this game was made in html5 and jquery......................................................
|
zoe quinn, aniwey, orteil
|
||||||
|
......................................................................
|
||||||
|
i listened to a lot of keygenjukebox while coding this
|
||||||
|
......................................................................
|
||||||
more games coming soon... keep your eyes peeled... peace!
|
more games coming soon... keep your eyes peeled... peace!
|
||||||
|
......................................................................
|
||||||
|
......................................................................
|
||||||
|
......................................................................
|
||||||
|
this story is dedicated to all those cyberpunks who fight against
|
||||||
|
injustice and corruption every day of their lives
|
||||||
|
......................................................................
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="centre">
|
<div class="centre">
|
||||||
<button>reset</button>
|
<form name="_xclick" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post" target="_blank">
|
||||||
|
<input type="hidden" name="cmd" value="_xclick">
|
||||||
|
<input type="hidden" name="business" value="mutantsluggenghiskhan@yahoo.co.uk">
|
||||||
|
<input type="hidden" name="item_name" value="Donation to Ruin Games">
|
||||||
|
<input type="hidden" name="currency_code" value="GBP">
|
||||||
|
<button class="donate">donate</button>
|
||||||
|
</form>
|
||||||
|
<form action="https://twitter.com/synth_ruiner" target="_blank">
|
||||||
|
<button class="twitter">say hi</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="centre">
|
||||||
|
<button>play again</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="setup">
|
<div id="setup">
|
||||||
<h1>endless mines</h1>
|
<h1>endless mines</h1>
|
||||||
|
|
||||||
<p>
|
<p class="subtitle">ruin games, 2015</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 and columns with <strong>exploded mines</strong> cannot be cleared.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>Difficulty</h2>
|
<h2>Start game</h2>
|
||||||
|
|
||||||
<div class="centre">
|
<div class="centre">
|
||||||
<input type="radio" name="difficulty" id="difficultyEasy" value="easy">
|
<button class="start easy">easy</button>
|
||||||
<label for="difficultyEasy">Easy</label>
|
<button class="start normal">normal</button>
|
||||||
<input type="radio" name="difficulty" id="difficultyNormal" value="normal" checked>
|
<button class="start hard">hard</button>
|
||||||
<label for="difficultyNormal">Normal</label>
|
</div>
|
||||||
<input type="radio" name="difficulty" id="difficultyHard" value="hard">
|
|
||||||
<label for="difficultyHard">Hard</label>
|
<div class="centre">
|
||||||
|
<button class="tutorial">tutorial</button>
|
||||||
|
<button class="cancel">cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tutorial">
|
||||||
|
<h2>tutorial</h2>
|
||||||
|
|
||||||
|
<div id="page1">
|
||||||
|
<div class="gameBoard">
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine toFlag"></li><li></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines2 highlighted">2</li><li class="revealed mines2">2</li><li></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine toFlag"></li><li></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>take a look at the <strong>highlighted tile</strong>.</p>
|
||||||
|
<p>the <strong>2</strong> means there are <strong>2 mines</strong> next to it.</p>
|
||||||
|
<p>there are only <strong>2 tiles</strong> next to it, so we know they are both mines.</p>
|
||||||
|
<p><strong>right-click</strong> or <strong>press and hold</strong> to flag these mines.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="centre">
|
<div id="page2">
|
||||||
<button class="start">start</button>
|
<div class="gameBoard">
|
||||||
<button class="cancel">cancel</button>
|
<ul>
|
||||||
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="toClick"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2 highlighted">2</li><li class="toClick"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="toClick"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li></li><li></li><li></li><li></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>take a look at the next <strong>highlighted tile</strong>.</p>
|
||||||
|
<p>this also has <strong>2 mines</strong> next to it- but we already know which ones are mines.</p>
|
||||||
|
<p><strong>click</strong> or <strong>tap</strong> the other adjacent tiles to clear them.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page3">
|
||||||
|
<div class="gameBoard">
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li><li class="toClick"></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>there are some more tiles that are definitely not mines. clear these too.</p>
|
||||||
|
<p>if you <strong>click or tap</strong> a <strong>number</strong>, any unflagged adjacent tiles will be clicked.</p>
|
||||||
|
<p>this can save you a lot of time!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page4">
|
||||||
|
<div class="gameBoard">
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li class="revealed mines1 highlighted">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1 highlighted">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="toClick"></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>look at these 2 <strong>highlighted</strong> tiles.</p>
|
||||||
|
<p>the <strong>first</strong> has 1 mine next to it.</p>
|
||||||
|
<p>the <strong>second</strong> also has 1 mine next to it.</p>
|
||||||
|
<p>however, the <strong>second</strong> spans the same tiles as the <strong>first</strong>, plus one extra.</p>
|
||||||
|
<p>the extra tile the <strong>second</strong> tile spans cannot be a mine. clear it!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page5">
|
||||||
|
<div class="gameBoard">
|
||||||
|
<ul>
|
||||||
|
<li class="mine toFlag"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li><li class="revealed mines1">1</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li><li class="revealed mines2">2</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="mine flagged"></li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine toFlag"></li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li><li class="revealed mines1">1</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>when you clear a tile with <strong>no adjacent mines</strong>, the surrounding tiles will all clear as well.</p>
|
||||||
|
<p>flag the <strong>remaining mines</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page6">
|
||||||
|
<div class="gameBoard">
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="mine toFlag highlighted"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="revealed mines4">4</li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>in this tutorial so far, the game board has been static.</p>
|
||||||
|
<p>but in <strong>endless mines</strong>, <strong>rows</strong> and <strong>columns</strong> slide away when cleared!</p>
|
||||||
|
<p>flag the <strong>highlighted</strong> tile to continue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page7">
|
||||||
|
<div class="gameBoard clearRowsColumns">
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="mine flagged"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="revealed mines4">4</li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="mine"></li>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>in this tutorial so far, the game board has been static.</p>
|
||||||
|
<p>but in <strong>endless mines</strong>, <strong>rows</strong> and <strong>columns</strong> slide away when cleared!</p>
|
||||||
|
<p>flag the <strong>highlighted</strong> tile to continue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page8">
|
||||||
|
<div class="gameBoard">
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed"></li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="revealed mines3">3</li>
|
||||||
|
<li class="revealed mines4">4</li>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
<li class="mine toFlag"></li>
|
||||||
|
<li class="revealed mines2">2</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li></li><li></li><li></li><li></li><li></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>a <strong>new row</strong> has appeared at the bottom.</p>
|
||||||
|
<p>notice how you can't clear any columns now!</p>
|
||||||
|
<br>
|
||||||
|
<p><strong>flag</strong> the <strong>remaining mines</strong> to continue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page9">
|
||||||
|
<div class="gameBoard clearRowsColumns">
|
||||||
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||||||
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||||||
|
<ul><li class="revealed mines2">2</li><li class="revealed mines4">4</li><li class="revealed mines4">4</li><li class="highlighted revealed mines7">7</li><li class="mine toFlag"></li></ul>
|
||||||
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||||||
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>look at the <strong>highlighted</strong> tile.</p>
|
||||||
|
<p>it has 7 adjacent mines and 7 adjacent tiles.</p>
|
||||||
|
<p>flag the 7 <strong>adjacent mines</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page10">
|
||||||
|
<div class="gameBoard clearRowsColumns">
|
||||||
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||||||
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||||||
|
<ul><li class="revealed mines2">2</li><li class="revealed mines4">4</li><li class="revealed mines4">4</li><li class="revealed mines7">7</li><li class="mine highlighted flagged"></li></ul>
|
||||||
|
<ul><li class="mine"></li><li></li><li class="mine"></li><li class="mine"></li><li class="mine"></li></ul>
|
||||||
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>oh no! we've lost all our hints!</p>
|
||||||
|
<p>sometimes it's best to wait before clearing a row.</p>
|
||||||
|
<br>
|
||||||
|
<p>the best we can do is guess now.</p>
|
||||||
|
<p>click <strong>any tile</strong> to continue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="page11">
|
||||||
|
<div class="gameBoard clearRowsColumns">
|
||||||
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||||||
|
<ul><li></li><li class="revealed mines1">1</li><li></li><li class="revealed mines1">1</li><li></li></ul>
|
||||||
|
<ul><li></li><li></li><li></li><li></li><li></li></ul>
|
||||||
|
<ul><li></li><li class="revealed mines3">3</li><li class="revealed mines3">3</li><li class="revealed mines3">3</li><li></li></ul>
|
||||||
|
<ul><li></li><li></li><li class="revealed mines3">3</li><li></li><li></li></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>sorry! I feel bad leading you into a trap like that!</p>
|
||||||
|
<p>but I think mistakes are a good way to learn.</p>
|
||||||
|
<p>this is the end of the <strong>tutorial</strong> for now. I hope it has helped in some way.</p>
|
||||||
|
<p>have fun!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue