Build a Minesweeper Clone Game in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>Minesweeper</title>
    <link rel="stylesheet" href="../assets/css/Minesweeper.css">
    </link>
    <script src="../assets/js/Minesweeper.js" charset="utf-8"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet">
</head>

<body>

    <div class="container">
        <h1>MineSweeper Game💣</h1>
        <h4>Click to open tile and right click to flag</h4>
        <div class="grid"></div>
        <div>Flags left: <span id='flags-left'></span></div>
        <div id="result"></div>
    </div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Minesweeper</title>

</link>

</head>

<body>

<h1>MineSweeper Game💣</h1>

<h4>Click to open tile and right click to flag</h4>

<div>Flags left: <span id='flags-left'></span></div>

</div>

</body>

</html>

.container {
  margin: auto;
  width: 550px;
  align-content: center;
}

.grid {
  height: 400px;
  width: 400px;
  display: flex;
  flex-wrap: wrap;
  background-color: #dcd6bc;
  margin-left: 50px;
  margin-top: 20px;
  border: 10px solid #dcd6bc;
  margin-bottom: 10px;
}

div {
  font-size: 25px;
  text-align: center;
  font-family: "Roboto Mono", monospace;
}
.valid {
  height: 40px;
  width: 40px;
  border: 5px solid;
  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
  box-sizing: border-box;
}

.checked {
  height: 40px;
  width: 40px;
  border: 2px solid;
  background-color: #cecab7;
  border-color: #9c998d;
  box-sizing: border-box;
}

.bomb {
  height: 40px;
  width: 40px;
  border: 5px solid;
  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
  box-sizing: border-box;
}

.one {
  color: #e76346;
}

.two {
  color: #4199d3;
}

.three {
  color: #57da59;
}

.four {
  color: #bb41d3;
}

#result {
  margin-top: 5px;
  color: #e76346;
}

.container {

margin: auto;

width: 550px;

align-content: center;

}

.grid {

height: 400px;

width: 400px;

display: flex;

flex-wrap: wrap;

background-color: #dcd6bc;

margin-left: 50px;

margin-top: 20px;

border: 10px solid #dcd6bc;

margin-bottom: 10px;

}

div {

font-size: 25px;

text-align: center;

font-family: "Roboto Mono", monospace;

}

.valid {

height: 40px;

width: 40px;

border: 5px solid;

border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;

box-sizing: border-box;

}

.checked {

height: 40px;

width: 40px;

border: 2px solid;

background-color: #cecab7;

border-color: #9c998d;

box-sizing: border-box;

}

.bomb {

height: 40px;

width: 40px;

border: 5px solid;

border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;

box-sizing: border-box;

}

.one {

color: #e76346;

}

.two {

color: #4199d3;

}

.three {

color: #57da59;

}

.four {

color: #bb41d3;

}

#result {

margin-top: 5px;

color: #e76346;

}

document.addEventListener("DOMContentLoaded", () => {
  const grid = document.querySelector(".grid");
  const flagsLeft = document.querySelector("#flags-left");
  const result = document.querySelector("#result");
  let width = 10;
  let numBombs = 20;
  let flags = 0;
  let squares = [];
  let isGameOver = false;

  //create Board
  function createBoard() {
    flagsLeft.innerHTML = numBombs;

    //get shuffled game array with random bombs
    const bombsArray = Array(numBombs).fill("bomb");
    const emptyArray = Array(width * width - numBombs).fill("valid");
    const gameArray = emptyArray.concat(bombsArray);
    const shuffledArray = gameArray.sort(() => Math.random() - 0.5);

    for (let i = 0; i < width * width; i++) {
      const square = document.createElement("div");
      square.setAttribute("id", i);
      square.classList.add(shuffledArray[i]);
      grid.appendChild(square);
      squares.push(square);

      //normal click
      square.addEventListener("click", function (e) {
        click(square);
      });

      //cntrl and left click
      square.oncontextmenu = function (e) {
        e.preventDefault();
        addFlag(square);
      };
    }

    //add numbers
    for (let count = 0; count < squares.length; count++) {
      let total = 0;
      const isLeftEdge = count % width === 0;
      const isRightEdge = count % width === width - 1;

      if (squares[count].classList.contains("valid")) {
        if (
          count > 0 &&
          !isLeftEdge &&
          squares[count - 1].classList.contains("bomb")
        )
          total++;
        if (
          count > 9 &&
          !isRightEdge &&
          squares[count + 1 - width].classList.contains("bomb")
        )
          total++;
        if (count > 10 && squares[count - width].classList.contains("bomb"))
          total++;
        if (
          count > 11 &&
          !isLeftEdge &&
          squares[count - 1 - width].classList.contains("bomb")
        )
          total++;
        if (
          count < 98 &&
          !isRightEdge &&
          squares[count + 1].classList.contains("bomb")
        )
          total++;
        if (
          count < 90 &&
          !isLeftEdge &&
          squares[count - 1 + width].classList.contains("bomb")
        )
          total++;
        if (
          count < 88 &&
          !isRightEdge &&
          squares[count + 1 + width].classList.contains("bomb")
        )
          total++;
        if (count < 89 && squares[count + width].classList.contains("bomb"))
          total++;
        squares[count].setAttribute("data", total);
      }
    }
  }
  createBoard();

  //add Flag with right click
  function addFlag(square) {
    if (isGameOver) return;
    if (!square.classList.contains("checked") && flags < numBombs) {
      if (!square.classList.contains("flag")) {
        square.classList.add("flag");
        square.innerHTML = " 🚩";
        flags++;
        flagsLeft.innerHTML = numBombs - flags;
        checkForWin();
      } else {
        square.classList.remove("flag");
        square.innerHTML = "";
        flags--;
        flagsLeft.innerHTML = numBombs - flags;
      }
    }
  }

  //click on square actions
  function click(square) {
    let currentId = square.id;
    if (isGameOver) return;
    if (
      square.classList.contains("checked") ||
      square.classList.contains("flag")
    )
      return;
    if (square.classList.contains("bomb")) {
      gameOver(square);
    } else {
      let total = square.getAttribute("data");
      if (total != 0) {
        square.classList.add("checked");
        if (total == 1) square.classList.add("one");
        if (total == 2) square.classList.add("two");
        if (total == 3) square.classList.add("three");
        if (total == 4) square.classList.add("four");
        square.innerHTML = total;
        return;
      }
      checkSquare(square, currentId);
    }
    square.classList.add("checked");
  }

  //check neighboring squares once square is clicked
  function checkSquare(square, currentId) {
    const isLeftEdge = currentId % width === 0;
    const isRightEdge = currentId % width === width - 1;

    setTimeout(() => {
      if (currentId > 0 && !isLeftEdge) {
        const newId = squares[parseInt(currentId) - 1].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId > 9 && !isRightEdge) {
        const newId = squares[parseInt(currentId) + 1 - width].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId > 10) {
        const newId = squares[parseInt(currentId - width)].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId > 11 && !isLeftEdge) {
        const newId = squares[parseInt(currentId) - 1 - width].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId < 98 && !isRightEdge) {
        const newId = squares[parseInt(currentId) + 1].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId < 90 && !isLeftEdge) {
        const newId = squares[parseInt(currentId) - 1 + width].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId < 88 && !isRightEdge) {
        const newId = squares[parseInt(currentId) + 1 + width].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
      if (currentId < 89) {
        const newId = squares[parseInt(currentId) + width].id;
        const newSquare = document.getElementById(newId);
        click(newSquare);
      }
    }, 10);
  }

  //game over
  function gameOver(square) {
    result.innerHTML = "BOOM! Game Over!";
    isGameOver = true;

    //show ALL the bombs
    squares.forEach((square) => {
      if (square.classList.contains("bomb")) {
        square.innerHTML = "💣";
        square.classList.remove("bomb");
        square.classList.add("checked");
      }
    });
  }

  //check for win
  function checkForWin() {
    let matches = 0;

    for (let count = 0; count < squares.length; count++) {
      if (
        squares[count].classList.contains("flag") &&
        squares[count].classList.contains("bomb")
      ) {
        matches++;
      }
      if (matches === numBombs) {
        result.innerHTML = "YOU WIN!";
        isGameOver = true;
      }
    }
  }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

document.addEventListener("DOMContentLoaded", () => {

const grid = document.querySelector(".grid");

const flagsLeft = document.querySelector("#flags-left");

const result = document.querySelector("#result");

let width = 10;

let numBombs = 20;

let flags = 0;

let squares = [];

let isGameOver = false;

//create Board

function createBoard() {

flagsLeft.innerHTML = numBombs;

//get shuffled game array with random bombs

const bombsArray = Array(numBombs).fill("bomb");

const emptyArray = Array(width * width - numBombs).fill("valid");

const gameArray = emptyArray.concat(bombsArray);

const shuffledArray = gameArray.sort(() => Math.random() - 0.5);

for (let i = 0; i < width * width; i++) {

const square = document.createElement("div");

square.setAttribute("id", i);

square.classList.add(shuffledArray[i]);

grid.appendChild(square);

squares.push(square);

//normal click

square.addEventListener("click", function (e) {

click(square);

});

//cntrl and left click

square.oncontextmenu = function (e) {

e.preventDefault();

addFlag(square);

};

}

//add numbers

for (let count = 0; count < squares.length; count++) {

let total = 0;

const isLeftEdge = count % width === 0;

const isRightEdge = count % width === width - 1;

if (squares[count].classList.contains("valid")) {

if (

count > 0 &&

!isLeftEdge &&

squares[count - 1].classList.contains("bomb")

)

total++;

if (

count > 9 &&

!isRightEdge &&

squares[count + 1 - width].classList.contains("bomb")

)

total++;

if (count > 10 && squares[count - width].classList.contains("bomb"))

total++;

if (

count > 11 &&

!isLeftEdge &&

squares[count - 1 - width].classList.contains("bomb")

)

total++;

if (

count < 98 &&

!isRightEdge &&

squares[count + 1].classList.contains("bomb")

)

total++;

if (

count < 90 &&

!isLeftEdge &&

squares[count - 1 + width].classList.contains("bomb")

)

total++;

if (

count < 88 &&

!isRightEdge &&

squares[count + 1 + width].classList.contains("bomb")

)

total++;

if (count < 89 && squares[count + width].classList.contains("bomb"))

total++;

squares[count].setAttribute("data", total);

}

createBoard();

//add Flag with right click

function addFlag(square) {

if (isGameOver) return;

if (!square.classList.contains("checked") && flags < numBombs) {

if (!square.classList.contains("flag")) {

square.classList.add("flag");

square.innerHTML = " 🚩";

flags++;

flagsLeft.innerHTML = numBombs - flags;

checkForWin();

} else {

square.classList.remove("flag");

square.innerHTML = "";

flags--;

flagsLeft.innerHTML = numBombs - flags;

}

//click on square actions

function click(square) {

let currentId = square.id;

if (isGameOver) return;

if (

square.classList.contains("checked") ||

square.classList.contains("flag")

)

return;

if (square.classList.contains("bomb")) {

gameOver(square);

} else {

let total = square.getAttribute("data");

if (total != 0) {

square.classList.add("checked");

if (total == 1) square.classList.add("one");

if (total == 2) square.classList.add("two");

if (total == 3) square.classList.add("three");

if (total == 4) square.classList.add("four");

square.innerHTML = total;

return;

}

checkSquare(square, currentId);

}

square.classList.add("checked");

}

//check neighboring squares once square is clicked

function checkSquare(square, currentId) {

const isLeftEdge = currentId % width === 0;

const isRightEdge = currentId % width === width - 1;

setTimeout(() => {

if (currentId > 0 && !isLeftEdge) {

const newId = squares[parseInt(currentId) - 1].id;