Fix revealing mines
This commit is contained in:
@@ -1,4 +1,24 @@
|
||||
* Add leaderboard
|
||||
* Add tutorial (a few lines and images of coffins, tombstones, etc)
|
||||
* Different input scheme, because on iPhones long-pressing always
|
||||
selects text (or is there a --safari-user-select?)
|
||||
* Sync data between devices (maybe it's possible with some Webxdc
|
||||
functions)
|
||||
* Saving the game data to a file, so high scores, unlocked levels
|
||||
etc. can be shared across updates. Or, someone unfair can cheat.
|
||||
* Randomly rotate, tint, etc., cells to add variety
|
||||
* Refractor the code
|
||||
* Record new sounds, add sound variations. Required sounds:
|
||||
* Breaking wood, at least 3 sounds
|
||||
* Digging dirt, at least 3 sounds
|
||||
* A "muahaha" sound on discovering a vampire
|
||||
* Bat sounds for bats flying out of coffins
|
||||
* (Maybe) a sound of marble, like the one when you open up a tomb
|
||||
* Revamp the graphics, add more consistency. New spirtes required:
|
||||
* Wood chips (when removing the lid off coffin)
|
||||
* Bats (preferably animated with two frames to simulate flying)
|
||||
* Some better, less copyright-infringing background (though this one
|
||||
is heavily modified already)
|
||||
* Main menu icon
|
||||
* Restart icon
|
||||
* Analyze the UI, think about potential improvements
|
||||
|
||||
@@ -39,10 +39,9 @@ function restart_game() {
|
||||
initial_mines_count = 10 + current_level;
|
||||
stop_timing();
|
||||
seconds_elapsed = 0;
|
||||
document.body.classList.remove("main-menu", "popup-victory", "popup-failure");
|
||||
document.body.classList.add ("game-view");
|
||||
$("#time").innerText = get_seconds_readable(seconds_elapsed);
|
||||
$("#finished-popup").style = "display:none;";
|
||||
$("#restart").style = "display:block";
|
||||
$("#newgame").style = "display:block";
|
||||
}
|
||||
|
||||
function start_or_continue_game(level) {
|
||||
@@ -176,8 +175,13 @@ function count_neighbouring_mines(cell) {
|
||||
|
||||
function reveal_mines(cell) {
|
||||
let n_mines = count_neighbouring_mines(cell);
|
||||
cell.classList.remove("unknown");
|
||||
cell.classList.add("known");
|
||||
|
||||
if (cell.classList.contains("unknown")) {
|
||||
reveal_cell_cosmetic(cell);
|
||||
cell.classList.remove("unknown");
|
||||
cell.classList.add("known");
|
||||
}
|
||||
|
||||
if (n_mines == 0) {
|
||||
get_neighbours(cell).forEach(function(c) {
|
||||
if (c.classList.contains("unknown")) {
|
||||
@@ -187,13 +191,10 @@ function reveal_mines(cell) {
|
||||
c.classList.remove("flagged");
|
||||
}
|
||||
});
|
||||
}
|
||||
if (n_mines > 0 && !cell.classList.contains("mine")) {
|
||||
} else if (n_mines > 0 && !cell.classList.contains("mine")) {
|
||||
cell.innerText = "" + n_mines;
|
||||
cell.classList.add("n" + n_mines);
|
||||
}
|
||||
|
||||
reveal_cell_cosmetic(cell);
|
||||
}
|
||||
|
||||
function reveal_cell_cosmetic(cell) {
|
||||
@@ -210,15 +211,13 @@ function reveal_cell_cosmetic(cell) {
|
||||
|
||||
// Shows the game won/over popup.
|
||||
function show_popup(victory) {
|
||||
$("#finished-popup").style = "display:flex;";
|
||||
$("#restart").style = "display:none";
|
||||
$("#newgame").style = "display:none";
|
||||
if (!victory) {
|
||||
$("#nextlevel").style = "display:none";
|
||||
$("#message").innerText = "You've lost!"
|
||||
} else {
|
||||
$("#nextlevel").style = "display:block";
|
||||
document.body.classList.remove("popup-victory", "popup-failure");
|
||||
if (victory) {
|
||||
document.body.classList.add("popup-victory");
|
||||
$("#message").innerText = "You've won!"
|
||||
} else {
|
||||
document.body.classList.add("popup-failure");
|
||||
$("#message").innerText = "You've lost!"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -257,8 +256,6 @@ function lose_game() {
|
||||
stop_timing();
|
||||
show_popup(false);
|
||||
$$("#minefield div").forEach(function(cell) {
|
||||
cell.classList.remove("unknown");
|
||||
cell.classList.add("known");
|
||||
reveal_mines(cell);
|
||||
if (cell.classList.contains("exploded")) {
|
||||
cell.innerText = "";
|
||||
|
||||
+3
-3
@@ -4,7 +4,7 @@
|
||||
<script src="webxdc.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="main-menu">
|
||||
<canvas id="particle-canvas"></canvas>
|
||||
<div id="main-menu">
|
||||
<span id="game-title">Gravedigger</span>
|
||||
@@ -12,7 +12,7 @@
|
||||
<div id="button-list">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:none;" id="game-view">
|
||||
<div id="game-view">
|
||||
<div id="top-bar">
|
||||
<span>Time</span>
|
||||
<span class="data" id="time">00:00</span>
|
||||
@@ -21,7 +21,7 @@
|
||||
<button id="restart" onclick="restart_game()">Restart</button>
|
||||
<button id="newgame" onclick="location.reload()">Main menu</button>
|
||||
</div>
|
||||
<div style="display:none;" id="finished-popup">
|
||||
<div id="finished-popup">
|
||||
<span id="message">You've won/lost!</span>
|
||||
<button id="mainmenu" onclick="location.reload()">Main menu</button>
|
||||
<button id="playagain" onclick="restart_game()">Play again</button>
|
||||
|
||||
Binary file not shown.
@@ -18,15 +18,41 @@ body {
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
|
||||
background: linear-gradient(
|
||||
rgba(0, 0, 0, 0.7),
|
||||
rgba(0, 0, 0, 0.7)
|
||||
), url("res/gravedigger/background.png");
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("res/gravedigger/background.png");
|
||||
background-size: cover;
|
||||
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
/* Main menu state visibility. */
|
||||
body.main-menu {
|
||||
#main-menu { display: flex; }
|
||||
#game-view { display: none; }
|
||||
}
|
||||
|
||||
/* Game view state visibility. */
|
||||
body.game-view {
|
||||
#main-menu { display: none; }
|
||||
#game-view { display: flex; }
|
||||
}
|
||||
|
||||
/* Victory & failure popups. */
|
||||
body.popup-victory, body.popup-failure {
|
||||
#finished-popup { display: flex; }
|
||||
#restart, #newgame { display: none; }
|
||||
|
||||
/* #minefield {
|
||||
padding-top: calc(var(--top-bar-height) * 4 + 4em);
|
||||
} */
|
||||
|
||||
#top-bar {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
body.popup-failure { #nextlevel { display: none; } }
|
||||
body.popup-victory { #nextlevel { display: block; } }
|
||||
|
||||
#particle-canvas {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
@@ -80,12 +106,21 @@ span#subtitle {
|
||||
|
||||
#top-bar .data { flex: 1; }
|
||||
|
||||
#bottom-fade {
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: var(--fade-height);
|
||||
background-image: linear-gradient(transparent, black);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#finished-popup {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
margin-top: var(--top-bar-height);
|
||||
background-image: linear-gradient(transparent, black, black);
|
||||
display: flex;
|
||||
background-image: linear-gradient(black, black, transparent);
|
||||
display: none;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
color: white;
|
||||
@@ -109,10 +144,10 @@ span#subtitle {
|
||||
user-select: none;
|
||||
grid-template-columns: repeat(8, 12.5%);
|
||||
padding: 2em;
|
||||
/* Padding for the top info bar. */
|
||||
padding-top: calc(var(--top-bar-height) + 2em);
|
||||
/* Padding for the bottom fade. */
|
||||
padding-bottom: calc(var(--fade-height) + 2em);
|
||||
/* Padding for the top info bar. */
|
||||
padding-top: calc(var(--fade-height) + 2em);
|
||||
/* Padding for the bottom fade. */
|
||||
/* padding-bottom: calc(var(--fade-height) + 2em); */
|
||||
}
|
||||
|
||||
/* Cells. */
|
||||
@@ -129,15 +164,6 @@ span#subtitle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#bottom-fade {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: var(--fade-height);
|
||||
background-image: linear-gradient(transparent, black);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.unknown, .known { background-size: cover; }
|
||||
.unknown { background-image: url("./res/gravedigger/unknown-1.png"); }
|
||||
.known { background-image: url("./res/gravedigger/known.png"); }
|
||||
|
||||
Reference in New Issue
Block a user