arne/minesweeper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added flags and better styling

Browse Source
This commit is contained in:
Arne van Iterson 2020-11-08 22:47:13 +01:00
parent c19f2dbcc3
commit eddfb721ab
3 changed files with 92 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
html/index.html
View File

@ -22,6 +22,11 @@
</div>
<script src="/main.js"></script>
<footer>
> Coded by <a href="//arnweb.nl">McArn</a>.
</footer>
</body>
</html>

43
scss/index.scss
View File

@ -1,7 +1,9 @@
body {
font-family: 'Courier New', Courier, monospace;
background: #121212;
color: lightgray;
font-family: monospace;
padding: 2em;
margin: 0;
background-color: #111111;
color: white;
// * {
// border: 1px solid white;
// }
@ -17,28 +19,32 @@ body {
margin: 0 auto;
div {
padding: 1em;
border-radius: 0.75em;
background-color: #1E1E1E;
border-radius: 0.25em;
background-color: #212121;
&#board {
text-align: center;
width: min-content;
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
column-gap: 0.25em;
row-gap: 0.25em;
column-gap: 3px;
row-gap: 3px;
span.cell {
border: 1px solid grey;
color: lightgray;
color: white;
text-align: center;
width: 1em;
height: 1em;
padding: 0.5em;
border-radius: 0.25em;
padding: 0.4em;
border-radius: 0.1em;
background-color: #303030;
font-size: large;
&.discovered {
background-color: #5c5c5c;
background-color: #424242;
}
&.bomb {
background-color: #5e3030;
background-color: #FC5130;
}
&.flag {
background-color: #51CB20;
}
}
}
@ -66,4 +72,15 @@ body {
}
}
}
footer {
position: absolute;
bottom: 1em;
left: 1em;
color: darkgray;
height: 1em;
a {
color: white;
}
}
}

71
src/screens/game.js
View File

@ -10,9 +10,12 @@ class Game {
this.sides = 15;
this.size = Math.pow(this.sides, 2);
this.bombAmount = 35;
this.generated = false;
this.bombAmount = 25;
this.bombs = [];
this.discovered = [];
this.strikes = 3;
for (let cell = 0; cell < this.size; cell++) {
this.bombs.push(0);
@ -20,37 +23,48 @@ class Game {
var child = document.createElement("span");
child.className = "cell";
child.addEventListener("click", () => {
this.discover(cell);
});
child.addEventListener("contextmenu", (e) => {
e.preventDefault();
this.flag(cell);
});
this.board.appendChild(child);
}
for (let index = 0; index < this.bombAmount; index++) {
var rand = math.default.rand(0, this.size);
this.bombs[rand] = 1;
}
// for (let index = 0; index < this.bombAmount; index++) {
// var rand = math.default.rand(0, this.size);
// this.bombs[rand] = 1;
// }
console.log(this.bombs);
console.log(this.discovered);
}
discover(cell) {
if (!this.generated) {
this.generated = true;
let index = 0;
while (index < this.bombAmount) {
var rand = math.default.rand(0, this.size);
if (rand != cell && !this.bombs[rand]) {
this.bombs[rand] = 1;
index++;
}
}
}
if (this.active && !this.discovered[cell]) {
this.discovered[cell] = 1;
this.children[cell].classList.add("discovered");
if (this.bombs[cell]) {
log("Game over", "error");
this.active = false;
for (let index = 0; index < this.size; index++) {
if (this.bombs[index]) {
this.children[index].innerHTML = "[]";
this.children[index].classList.add("bomb");
}
}
this.gameOver();
return;
}
@ -128,6 +142,35 @@ class Game {
}
}
}
flag(cell) {
if (this.bombs[cell]) {
this.children[cell].innerHTML = "#";
this.children[cell].classList.add("flag");
this.bombAmount--;
log(`Correctly flagged. ${String(this.bombAmount)} bombs left!`);
} else {
if (this.strikes - 1 == 0) {
this.gameOver();
return;
} else {
this.strikes--;
log(`Incorrectly flagged. ${String(this.strikes)} strikes left!`, "alert");
}
this.discover(cell);
}
}
gameOver() {
log("Game over", "error");
this.active = false;
for (let index = 0; index < this.size; index++) {
if (this.bombs[index]) {
this.children[index].innerHTML = "[]";
this.children[index].classList.add("bomb");
}
}
}
}
export default Game;