MineSweeper game/Minesweeper.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minesweeper</title>
    <style>
        BODY {
  background: black;
  color: #DDDDDD;
  font-family: courier new;
  text-align: center;
}

H1 {
  text-align: center;
  font-size: 14pt;
  font-weight: normal;
}
#grid {
  margin-left: auto;
  margin-right: auto;
}

#grid TR TD{
  border:1px solid white;
  background: #999999;
  width: 16px;
  height: 16px;
  text-align: center;
}

#grid TR TD.clicked {
    background: #333333;
}

#grid TR TD.mine {
    background: #FF0000;
}

BUTTON {
  margin: 12px;
}
    </style>
</head>
<body>
    <H1>Minesweeper</H1>
<table id=grid>
</table>
<BUTTON onclick="generateGrid();">Reset Grid</BUTTON>
</body>
<script>//minesweeper game by 101computing.net - www.101computing.et/minesweeper-in-javascript/
    var grid = document.getElementById("grid");
    var testMode = false; //Turn this variable to true to see where the mines are
    generateGrid();
    
    function generateGrid() {
      //generate 10 by 10 grid
      grid.innerHTML="";
      for (var i=0; i<10; i++) {
        row = grid.insertRow(i);
        for (var j=0; j<10; j++) {
          cell = row.insertCell(j);
          cell.onclick = function() { clickCell(this); };
          var mine = document.createAttribute("data-mine");       
          mine.value = "false";             
          cell.setAttributeNode(mine);
        }
      }
      addMines();
    }
    
    function addMines() {
      //Add mines randomly
      for (var i=0; i<20; i++) {
        var row = Math.floor(Math.random() * 10);
        var col = Math.floor(Math.random() * 10);
        var cell = grid.rows[row].cells[col];
        cell.setAttribute("data-mine","true");
        if (testMode) cell.innerHTML="X";
      }
    }
    
    function revealMines() {
        //Highlight all mines in red
        for (var i=0; i<10; i++) {
          for(var j=0; j<10; j++) {
            var cell = grid.rows[i].cells[j];
            if (cell.getAttribute("data-mine")=="true") cell.className="mine";
          }
        }
    }
    
    function checkLevelCompletion() {
      var levelComplete = true;
        for (var i=0; i<10; i++) {
          for(var j=0; j<10; j++) {
            if ((grid.rows[i].cells[j].getAttribute("data-mine")=="false") && (grid.rows[i].cells[j].innerHTML=="")) levelComplete=false;
          }
      }
      if (levelComplete) {
        alert("You Win!");
        revealMines();
      }
    }
    
    function clickCell(cell) {
      //Check if the end-user clicked on a mine
      if (cell.getAttribute("data-mine")=="true") {
        revealMines();
        alert("Game Over");
      } else {
        cell.className="clicked";
        //Count and display the number of adjacent mines
        var mineCount=0;
        var cellRow = cell.parentNode.rowIndex;
        var cellCol = cell.cellIndex;
        //alert(cellRow + " " + cellCol);
        for (var i=Math.max(cellRow-1,0); i<=Math.min(cellRow+1,9); i++) {
          for(var j=Math.max(cellCol-1,0); j<=Math.min(cellCol+1,9); j++) {
            if (grid.rows[i].cells[j].getAttribute("data-mine")=="true") mineCount++;
          }
        }
        cell.innerHTML=mineCount;
        if (mineCount==0) { 
          //Reveal all adjacent cells as they do not have a mine
          for (var i=Math.max(cellRow-1,0); i<=Math.min(cellRow+1,9); i++) {
            for(var j=Math.max(cellCol-1,0); j<=Math.min(cellCol+1,9); j++) {
              //Recursive Call
              if (grid.rows[i].cells[j].innerHTML=="") clickCell(grid.rows[i].cells[j]);
            }
          }
        }
        checkLevelCompletion();
      }
    }
    </script>
</html>