Merge branch 'master' of https://github.com/Rupa-Rd/30DaysOfJavaScrip… · Praneeth-2602/30DaysOfJavaScript@9fac3b9 · GitHub
Skip to content

Commit 9fac3b9

Browse files
Rupa-RdRupa-Rd
committed
Merge branch 'master' of https://github.com/Rupa-Rd/30DaysOfJavaScript into Rupa-rd
2 parents dfdd4c8 + 3ffbb1d commit 9fac3b9

30 files changed

Lines changed: 1026 additions & 44 deletions

File tree

‎113 - Minesweeper/README.md‎

Lines changed: 26 additions & 0 deletions

‎113 - Minesweeper/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Minesweeper</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
<body>
11+
<div
12+
style="
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
flex-direction: column;
17+
"
18+
>
19+
<h1>Minesweeper Game</h1>
20+
<div id="points">Points: 0</div>
21+
<div id="board"></div>
22+
<button id="resetButton">Reset</button>
23+
</div>
24+
25+
<script src="./script.js"></script>
26+
</body>
27+
</html>

‎113 - Minesweeper/script.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const boardSize = 10;
2+
const totalMines = 20;
3+
let mines = [];
4+
let revealedCells = 0;
5+
let points = 0;
6+
7+
function initializeBoard() {
8+
const board = document.getElementById("board");
9+
for (let i = 0; i < boardSize * boardSize; i++) {
10+
const cell = document.createElement("div");
11+
cell.classList.add("cell");
12+
cell.setAttribute("data-index", i);
13+
cell.addEventListener("click", handleCellClick);
14+
board.appendChild(cell);
15+
}
16+
17+
generateMines();
18+
}
19+
20+
function generateMines() {
21+
mines = Array.from({ length: totalMines }, () =>
22+
Math.floor(Math.random() * (boardSize * boardSize))
23+
);
24+
}
25+
26+
function handleCellClick(event) {
27+
const clickedIndex = parseInt(event.target.getAttribute("data-index"));
28+
if (mines.includes(clickedIndex)) {
29+
revealMines();
30+
alert("Game Over! You hit a mine.");
31+
} else {
32+
revealCell(clickedIndex);
33+
points++;
34+
updatePoints();
35+
if (revealedCells === boardSize * boardSize - totalMines) {
36+
alert("Congratulations! You won!");
37+
}
38+
}
39+
}
40+
41+
function revealMines() {
42+
mines.forEach((index) => {
43+
const cell = document.querySelector(`.cell[data-index="${index}"]`);
44+
cell.classList.add("mine");
45+
});
46+
}
47+
48+
function revealCell(index) {
49+
const cell = document.querySelector(`.cell[data-index="${index}"]`);
50+
if (!cell.classList.contains("revealed")) {
51+
cell.classList.add("revealed");
52+
revealedCells++;
53+
54+
const mineCount = countAdjacentMines(index);
55+
if (mineCount > 0) {
56+
cell.textContent = mineCount;
57+
} else {
58+
const neighbors = getNeighbors(index);
59+
neighbors.forEach((neighborIndex) => revealCell(neighborIndex));
60+
}
61+
}
62+
}
63+
64+
function countAdjacentMines(index) {
65+
const neighbors = getNeighbors(index);
66+
return neighbors.filter((neighborIndex) => mines.includes(neighborIndex))
67+
.length;
68+
}
69+
70+
function getNeighbors(index) {
71+
const neighbors = [];
72+
const row = Math.floor(index / boardSize);
73+
const col = index % boardSize;
74+
75+
for (let i = -1; i <= 1; i++) {
76+
for (let j = -1; j <= 1; j++) {
77+
const neighborRow = row + i;
78+
const neighborCol = col + j;
79+
if (
80+
neighborRow >= 0 &&
81+
neighborRow < boardSize &&
82+
neighborCol >= 0 &&
83+
neighborCol < boardSize
84+
) {
85+
neighbors.push(neighborRow * boardSize + neighborCol);
86+
}
87+
}
88+
}
89+
90+
return neighbors;
91+
}
92+
93+
function updatePoints() {
94+
const pointsDisplay = document.getElementById("points");
95+
pointsDisplay.textContent = `Points: ${points}`;
96+
}
97+
98+
function resetGame() {
99+
const cells = document.querySelectorAll(".cell");
100+
cells.forEach((cell) => {
101+
cell.classList.remove("revealed", "mine");
102+
cell.textContent = "";
103+
});
104+
revealedCells = 0;
105+
points = 0;
106+
updatePoints();
107+
generateMines();
108+
}
109+
110+
initializeBoard();
111+
112+
const resetButton = document.getElementById("resetButton");
113+
resetButton.addEventListener("click", resetGame);

‎113 - Minesweeper/style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
}
8+
9+
#board {
10+
display: grid;
11+
gap: 2px;
12+
grid-template-columns: repeat(10, 30px);
13+
border: 1px solid #ccc;
14+
}
15+
16+
.cell {
17+
width: 30px;
18+
height: 30px;
19+
background-color: #ddd;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
cursor: pointer;
24+
font-weight: bold;
25+
font-size: 14px;
26+
user-select: none;
27+
}
28+
29+
.cell:hover {
30+
background-color: #eee;
31+
}
32+
33+
.mine {
34+
background-color: #f00;
35+
color: #fff;
36+
}
37+
38+
#resetButton {
39+
margin-top: 20px;
40+
padding: 10px 20px;
41+
font-size: 16px;
42+
cursor: pointer;
43+
border: none;
44+
border-radius: 6px;
45+
background-color: #007bff;
46+
color: #fff;
47+
}

‎114 - Movie Guessing Game/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Movie Guessing Game</title>
9+
10+
<!-- Google Fonts -->
11+
12+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
13+
14+
<!-- stylesheet -->
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
16+
<link rel="stylesheet" href="style.css">
17+
18+
</head>
19+
20+
<body>
21+
<div style="text-align:center;
22+
margin-top: 30px;
23+
font-size: 30px;
24+
padding: 5px; "><a href=""><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
25+
<div class="wrapper">
26+
<div class="num-of-chances-left" id="chanceCount">
27+
<span>Tries Left : </span> 05
28+
</div>
29+
30+
<div class="container"></div>
31+
<div id="letter-container" class="hide"></div>
32+
<div id="userInputSection"></div>
33+
</div>
34+
<div class="controls-container">
35+
<p id="result"></p>
36+
<a id="start"> Start </a>
37+
</div>
38+
</div>
39+
<!-- script -->
40+
41+
<script src="script.js"></script>
42+
</body>
43+
44+
</html>

‎114 - Movie Guessing Game/readme.md‎

Lines changed: 34 additions & 0 deletions

0 commit comments

Comments
 (0)