minesweeper game of life

minesweeper-game-of-life.markdown

minesweeper game of life

A Pen by Danielle Smith on CodePen.

License.

MineSweeperGOL.html

<table>
  <tbody>
  </tbody>
</table>

script.js

let tbody = document.querySelector('tbody')
let width = 150
let height = 40

let p = 0.5
for (let i = 0; i < height; i++) {
  let tr = document.createElement('tr')
  for (let j = 0; j < width; j++) {
    let td = document.createElement('td')
    td.dataset.i=i
    td.dataset.j=j
    if (Math.random() < p) {
      td.classList.add('dead')
    } else {
      td.classList.add('alive')
    }
    tr.append(td)
  }
  tbody.append(tr)
}
updateText()

function neighbours(i, j) {
  let rows = document.querySelectorAll('tr')
  let alive = 0
  let a = rows[i-1]
  let b = rows[i]
  let c = rows[i+1]
  
  if (a) {
    if (a.children[j-1]?.classList?.contains('alive')) alive+=1
    if (a.children[j]?.classList?.contains('alive')) alive+=1
    if (a.children[j+1]?.classList?.contains('alive')) alive+=1
  }
  
  if (b) {
    if (b.children[j-1]?.classList?.contains('alive')) alive+=1
    if (b.children[j+1]?.classList?.contains('alive')) alive+=1
  }
  
  if (c) {
    if (c.children[j-1]?.classList?.contains('alive')) alive+=1
    if (c.children[j]?.classList?.contains('alive')) alive+=1
    if (c.children[j+1]?.classList?.contains('alive')) alive+=1
  }
  
  return alive
}

function updateText() {
  document.querySelectorAll('td').forEach(col => {
    if (col.classList.contains('dead')) {
      let alive = neighbours(parseInt(col.dataset.i, 10), parseInt(col.dataset.j, 10))
      col.textContent = alive ? alive : ''
      col.dataset.value = alive
    } else if (col.classList.contains('alive')) {
      col.textContent = ''
    }
  })
}
function step() {
  let rows = document.querySelectorAll('tr')
  rows.forEach((row, i) => {
    let cols = row.querySelectorAll('td')
    cols.forEach((col, j) => {
      let alive = neighbours(i, j)
      if (col.classList.contains('alive')) {
        if (alive < 2 || alive > 3) {
          col.classList.add('death')
        }
      } else {
        if (alive === 3) {
          col.classList.add('birth')
        }
      }
    })
  })
  
  document.querySelectorAll('td').forEach(col => {
    if (col.classList.contains('death')) {
      col.setAttribute('class', 'dead')
    } else if (col.classList.contains('birth')) {
      col.setAttribute('class', 'alive')
    }
  })
  
  updateText()
}

setInterval(step, 1000)

style.css

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

table {
  border-collapse: collapse;
}

td {
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.5rem;
  text-align: center;
  background: lightgray;
  position: relative;
  font-weight: bold;
  font-family: monospace;
}

.dead {
}

td::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.dead::before {
  box-shadow: inset -1px -1px gray;
}

.alive {
  position: relative;
}

.alive::before {
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid gray;
  border-right: 2px solid gray;
}

td[data-value="1"] { color: blue }
td[data-value="2"] { color: green }
td[data-value="3"] { color: red }
td[data-value="4"] { color: darkblue }
td[data-value="5"] { color: darkred }
td[data-value="6"] { color: darkgreen }
td[data-value="7"] { color: black }
td[data-value="8"] { color: darkgray }