Skip to content

Instantly share code, notes, and snippets.

@adeel-raza
Created November 3, 2023 16:21
Show Gist options
  • Save adeel-raza/ad282bfe69cb831cbd0a4662d3a1a235 to your computer and use it in GitHub Desktop.
Save adeel-raza/ad282bfe69cb831cbd0a4662d3a1a235 to your computer and use it in GitHub Desktop.
Minesweeper game using Javascript
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper Game</title>
<style>
body {
text-align: center;
}
.cell {
width: 30px;
height: 30px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
line-height: 30px;
font-size: 16px;
cursor: pointer;
}
.hidden {
background-color: #eee;
}
.mine {
background-image: url('data:image/jpeg;base64,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');
background-size: 100%;
}
</style>
</head>
<body>
<h1>Minesweeper Game</h1>
<div id="board"></div>
<script>
const boardSize = 8;
const mineCount = 10;
let mines = [];
let revealed = [];
function createBoard(){
let board = document.getElementById("board");
for (let x = 0; x < boardSize; x++) {
revealed[x] = [];
let row = document.createElement("div");
row.className = "row";
board.appendChild(row);
for (let y = 0; y < boardSize; y++) {
revealed[x][y] = false;
let cell = document.createElement("div");
cell.className = "cell hidden";
cell.onclick = function() { clickCell(x, y); };
row.appendChild(cell);
}
}
placeMines();
}
function placeMines() {
for (let i = 0; i < mineCount; i++) {
let x, y;
do {
x = Math.floor(Math.random() * boardSize);
y = Math.floor(Math.random() * boardSize);
} while (mines.some(mine => mine.x === x && mine.y === y));
mines.push({ x, y });
}
}
function clickCell(x, y) {
let cell = document.querySelector(`.row:nth-child(${x + 1}) .cell:nth-child(${y + 1})`);
if (revealed[x][y]) return;
revealed[x][y] = true;
if (mines.some(mine => mine.x === x && mine.y === y)) {
cell.className = "cell mine";
alert("Game Over! You clicked on a mine.");
} else {
cell.className = "cell";
}
}
createBoard();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment