Skip to content

Commit 1bb4bc5

Browse files
vanshuhassijavanshuhassija
committed
Minesweeper JS Game
1 parent 987f053 commit 1bb4bc5

File tree

4 files changed

+166
-0
lines changed

4 files changed

+166
-0
lines changed

‎Minesweeper/vanshuhassija/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## Minesweeper reinvented
2+
3+
### Javascript Minesweeper
4+
5+
This project is a javascript based game. It allows you to click a cell from 9*9 grid. It shows the number of bombs placed in the surrounding. If a bomb is clicked at any point, game gets over and you are asked to play again.

‎Minesweeper/vanshuhassija/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-e0quiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Bomber-JS</title>
8+
<link rel="stylesheet" type="text/css" href="./style/index.css"> </head>
9+
<body>
10+
<div class="grid"></div>
11+
<div class="footer">
12+
<h3>
13+
Points:
14+
<span class="points"></span>
15+
</h3>
16+
<button onClick="playAgain()">Play again</button>
17+
</div>
18+
<script src="./js/index.js"></script>
19+
</body>
20+
</html>

‎Minesweeper/vanshuhassija/js/index.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
function playAgain() {
2+
window.location.reload();
3+
}
4+
function generateBombIndicies(pCount, pMin, pMax) {
5+
let min = pMin < pMax ? pMin : pMax;
6+
let max = pMax > pMin ? pMax : pMin;
7+
let resultArr = [],
8+
randNumber;
9+
while (pCount > 0) {
10+
randNumber = Math.round(min + Math.random() * (max - min));
11+
if (resultArr.indexOf(randNumber) === -1) {
12+
resultArr.push(randNumber);
13+
pCount--;
14+
}
15+
}
16+
return resultArr;
17+
}
18+
function findNeighbourBombs(bombIndices, index, colCount, rowCount) {
19+
let bombs = 0;
20+
// positions
21+
// |1|2|3|
22+
// |4|x|5|
23+
// |6|7|8|
24+
if (index % colCount !== 1 && bombIndices.includes(index - colCount - 1)) {
25+
bombs++;
26+
}
27+
if (index > colCount && bombIndices.includes(index - colCount)) {
28+
bombs++;
29+
}
30+
if (index % colCount !== 0 && bombIndices.includes(index - colCount + 1)) {
31+
bombs++;
32+
}
33+
34+
if (index % colCount !== 1 && bombIndices.includes(index - 1)) {
35+
bombs++;
36+
}
37+
if (index % colCount !== 0 && bombIndices.includes(index + 1)) {
38+
bombs++;
39+
}
40+
if (index % colCount !== 1 && bombIndices.includes(index + colCount - 1)) {
41+
bombs++;
42+
}
43+
if (
44+
index <= colCount * (rowCount - 1) &&
45+
bombIndices.includes(index + colCount)
46+
) {
47+
bombs++;
48+
}
49+
if (index % colCount !== 0 && bombIndices.includes(index + colCount + 1)) {
50+
bombs++;
51+
}
52+
return bombs;
53+
}
54+
function render() {
55+
const rowCount = 9;
56+
const colCount = 9;
57+
const MIN = 1;
58+
let bi = 0;
59+
let points = 0;
60+
let gameover = false;
61+
let visited = [];
62+
let bombIndices = generateBombIndicies(
63+
rowCount,
64+
MIN,
65+
rowCount * colCount);
66+
let grid = document.querySelector(".grid");
67+
let pointer = document.querySelector(".points");
68+
pointer.innerHTML = points;
69+
// grid creation
70+
for (let j = 0; j < rowCount; j++) {
71+
let row = document.createElement("div");
72+
row.classList.add("row");
73+
grid.appendChild(row);
74+
for (let i = 1; i <= colCount; i++) {
75+
let col = document.createElement("div");
76+
col.classList.add("col");
77+
col.setAttribute("id", i + j * 9);
78+
//listener for bomb and safe buttons
79+
col.addEventListener("click", () => {
80+
if (bombIndices.indexOf(i + j * 9) !== -1) {
81+
while (bi < bombIndices.length) {
82+
let bombcol = document.getElementById(bombIndices[bi]);
83+
bombcol.classList.add("bomb");
84+
bombcol.innerHTML = "💣";
85+
bi++;
86+
}
87+
gameover = true;
88+
} else {
89+
if (!gameover && !visited.includes(i + j * 9)) {
90+
visited.push(i + j * 9);
91+
let safeCol = document.getElementById(i + j * 9);
92+
safeCol.classList.add("safe");
93+
const neighbouringBombs = findNeighbourBombs(
94+
bombIndices,
95+
i + j * rowCount,
96+
colCount,
97+
rowCount
98+
);
99+
safeCol.innerHTML = neighbouringBombs;
100+
points++;
101+
pointer.innerHTML = points;
102+
}
103+
}
104+
});
105+
row.appendChild(col);
106+
}
107+
}
108+
}
109+
render();

‎Minesweeper/vanshuhassija/style/index.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.row {
2+
display: flex;
3+
justify-content: center;
4+
}
5+
.col {
6+
border-top: 2px solid lightgrey;
7+
border-bottom: 2px solid grey;
8+
border-left: 2px solid lightgrey;
9+
border-right: 2px solid grey;
10+
background-color: #b6b6b6;
11+
padding: 15px;
12+
width: 1vw;
13+
height: 1vw;
14+
font-size: 1em;
15+
}
16+
.col:hover {
17+
background-color: #dddddd;
18+
}
19+
.bomb {
20+
background-color: rgb(228, 70, 70) !important;
21+
}
22+
.safe {
23+
background-color: #49bc07 !important;
24+
}
25+
.points {
26+
color: green;
27+
}
28+
.footer {
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
}

0 commit comments

Comments
 (0)