Skip to content

Commit cb331f6

Browse files
committed
Adding Day #27
1 parent 4a75610 commit cb331f6

File tree

6 files changed

+209
-0
lines changed

6 files changed

+209
-0
lines changed
103 KB
Loading
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #27
2+
3+
### Mine Sweeper Game
4+
In this tutorial ([Open in Youtube](https://youtu.be/qjpWSrzBxg8)), I am gonna showing to you how to create minesweeper game with javascript. we create this game with grids in css and javascript❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](27-ScreenShot.png)
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<!-- -------- CSS -------- -->
7+
<link rel="stylesheet" href="style.css">
8+
<title>Day #27 - MineSweeper Game | NaeuCode </title>
9+
</head>
10+
<body>
11+
<h1>MineSweeper</h1>
12+
<table id="grid"></table>
13+
<button onclick="generateGrid();">Reset Game</button>
14+
15+
16+
<!-- -------- CSS -------- -->
17+
<script src="script.js"></script>
18+
</body>
19+
</html>
Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/** @format */
2+
3+
const grid = document.getElementById("grid");
4+
let lockGame = false;
5+
const testMode = false;
6+
7+
generateGrid();
8+
9+
// Generate the Game grid
10+
function generateGrid() {
11+
lockGame = false;
12+
grid.innerHTML = "";
13+
14+
// Create a 10x10 grid
15+
for (let i = 0; i < 10; i++) {
16+
const row = grid.insertRow(i);
17+
for (let j = 0; j < 10; j++) {
18+
const cell = row.insertCell(j);
19+
cell.addEventListener("click", () => init(cell)); // Add click event listener to each cell
20+
cell.dataset.mine = "false"; // set Custom data attribute "mine" to false (no mine)
21+
}
22+
}
23+
generateMines(); //Call Function to randomly generate mines
24+
}
25+
26+
// Generate Random mines
27+
function generateMines() {
28+
for (let i = 0; i < 20; i++) {
29+
const row = Math.floor(Math.random() * 10); // Generate a random row index (0-9)
30+
const col = Math.floor(Math.random() * 10); // Generate a random column index (0-9)
31+
const cell = grid.rows[row].cells[col];
32+
cell.dataset.mine = "true";
33+
if (testMode) {
34+
cell.innerHTML = "X";
35+
}
36+
}
37+
}
38+
39+
// Reveal all mines on the Grid
40+
function revealMines() {
41+
grid.querySelectorAll("[data-mine='true']").forEach((cell) => {
42+
cell.classList.add("mine");
43+
});
44+
}
45+
46+
// Check if the game is complete (all non-mine cells revealed)
47+
function checkGameComplete() {
48+
const cells = grid.querySelectorAll("td");
49+
const gameComplete = [...cells].every((cell) => {
50+
return (
51+
(cell.dataset.mine === "true" && cell.classList.contains("mine")) ||
52+
(cell.dataset.mine === "false" && cell.innerHTML !== "")
53+
);
54+
});
55+
56+
if (gameComplete) {
57+
alert("You Found All Mines!");
58+
revealMines();
59+
}
60+
}
61+
62+
function init(cell) {
63+
if (lockGame) {
64+
return;
65+
}
66+
67+
if (cell.dataset.mine === "true") {
68+
revealMines();
69+
lockGame = true;
70+
} else {
71+
cell.classList.add("active");
72+
73+
const mineCount = getMineCount(cell);
74+
cell.innerHTML = mineCount || "0"; //Display mine count or empty string if zero
75+
76+
if (mineCount === 0) {
77+
const cellRow = cell.parentNode.rowIndex;
78+
const cellCol = cell.cellIndex;
79+
80+
// loop through neighboring cells and recursively reveal them
81+
for (let i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1,9); i++){
82+
for (let j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol +1, 9); j++){
83+
if(neighborCell.innerHTML === "");
84+
}
85+
}
86+
}
87+
88+
checkGameComplete(); //Check if the Game is complete
89+
}
90+
}
91+
92+
// Calculate the number of adjacent mines for given cell
93+
function getMineCount(cell) {
94+
const cellRow = cell.parentNode.rowIndex;
95+
const cellCol = cell.cellIndex;
96+
let mineCount = 0;
97+
98+
for (let i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, 9); i++){
99+
for (let j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol +1, 9); j++){
100+
const neighborCell = grid.rows[i].cells[j];
101+
if (neighborCell.dataset.mine === "true") {
102+
mineCount++;
103+
}
104+
}
105+
}
106+
return mineCount;
107+
}
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* Google Fonts */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
3+
4+
/* Base Style */
5+
*{
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
border: 0;
10+
outline: 0;
11+
font-family: 'Poppins', sans-serif;
12+
}
13+
14+
/* Body Style */
15+
body {
16+
background-color: #089b8a;
17+
color: #333;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
justify-content: center;
22+
height: 100vh;
23+
}
24+
25+
h1{
26+
font-size: 2.5rem;
27+
font-weight: 600;
28+
text-align: center;
29+
margin-bottom: 20px;
30+
}
31+
32+
/* Grid Style */
33+
#grid{
34+
border-collapse: collapse;
35+
margin: 0 auto;
36+
cursor: pointer;
37+
}
38+
39+
#grid tr td{
40+
border: 1px solid #7c7c7c;
41+
background-color: #e0e0e0;
42+
width: 30px;
43+
height: 30px;
44+
text-align: center;
45+
font-size: 16px;
46+
font-weight: 600;
47+
}
48+
49+
#grid tr td.active{
50+
background-color: #9b9b9b;
51+
}
52+
53+
#grid tr td.mine {
54+
background-color: #cc0707e4;
55+
}
56+
57+
/* Button Style */
58+
button {
59+
margin: 22px 0;
60+
padding: 13px;
61+
cursor: pointer;
62+
font-size: 14px;
63+
font-weight: bold;
64+
background-color: #04453e;
65+
color: #fff;
66+
border-radius: 3px;
67+
text-transform: uppercase;
68+
transition: background-color .3s;
69+
}
70+
71+
button:hover {
72+
background: #000;
73+
}

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,4 @@ Here we have list of projects:
3737
24. TradingView Widget
3838
25. Image Slider
3939
26. Responsive Travel Website
40+
27. MineSweeper Game

0 commit comments

Comments
 (0)