Codex Mine Sweeper

by JamesonSaunders

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var button = document.createElement('button');
button.innerHTML = '';
button.style.width = '20px';
button.style.height = '20px';

var cols = Math.floor(document.body.clientWidth / 20);
var rows = Math.floor(document.body.clientHeight / 20);
var colWidth = document.body.clientWidth / cols;
var rowHeight = document.body.clientHeight / rows;

for (var i = 0; i < cols; i++) {
  for (var j = 0; j < rows; j++) {
    button.style.left = i * colWidth + 'px';
    button.style.top = j * rowHeight + 'px';
    document.body.appendChild(button.cloneNode(true));
  }
}

var bomb = document.createElement('button');
bomb.innerHTML = '*';
bomb.style.width = '20px';
bomb.style.height = '20px';

var bombs = [];
var buttons = document.querySelectorAll('button');
for (var i = 0; i < 50; i++) {
  var index = Math.floor(Math.random() * buttons.length);
  bombs.push(index);
  buttons[index].innerHTML = '*';
}

var count = 0;
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  if (bombs.indexOf(i) === -1) {
    var count = 0;
    for (var j = i - 1; j <= i + 1; j++) {
      if (j >= 0 && j < buttons.length && bombs.indexOf(j) !== -1) {
        count++;
      }
    }
    button.innerHTML = count;
  }
}

for (var i = 0; i < buttons.length; i++) {
  buttons[i].style.backgroundColor = 'black';
}

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    this.style.backgroundColor = 'gray';
  });
}

for (var i = 0; i < bombs.length; i++) {
  buttons[bombs[i]].addEventListener('click', function() {
    this.style.outline = 'red solid';
  });
}
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
            <svg id="Layer_1" data-name="Layer 1" height="40px" width="40px"...