Need help with game of life

JavaScript
1

Note to moderators: This is an entirely different thing to the last game of life post I made, the other project has been scrapped.

Hello! I’m here yet again, trying to make the game of life. The other project was just too messy and I decided to keep it as it was as a weird little automata thing.

Anyways, the new project is below. The issue is that cells cannot be clicked anymore, even though it worked in the past. Any help is appreciated

https://codepen.io/JP-CSStudent/pen/yyLXKWr?editors=0010

2

Could you go thought code and explain briefly what is happening when and why?

3

Basically, when you arrive, a for loopis used to generate a matrix representing the cells.

let matrix = []
for (let i = 0; i < 22; i++) {
  matrix.push([])
  for (let j = 0; j < 45; j++) {
    let state
    if (Math.random() < 0.1) {
      state = 'alive'
      matrix[i].push(1)
    } else {
      state = 'dead'
      matrix[i].push(0)
    }
    display.innerHTML += `<div class="cell ${state} ${j}" id="${(i * 45) + j}"></div>`
  }
}

Then, by clicking the “Start” button, you activate an Interval that runs every 1000ms.

Every tick of the interval, this thing is run:

let temp = []
      for (let i = 0; i < 22; i++) {
        temp.push([])
        for (let j = 0; j < 45; j++) {
          let neighbors = [
            matrix?.[i]?.[j - 1] || 0, //left
            matrix?.[i]?.[j + 1] || 0, //right
            matrix?.[i - 1]?.[j] || 0, //down
            matrix?.[i + 1]?.[j] || 0, //up
            matrix?.[i - 1]?.[j - 1] || 0, //down-left
            matrix?.[i - 1]?.[j + 1] || 0, //down-right
            matrix?.[i + 1]?.[j - 1] || 0, //up-left
            matrix?.[i + 1]?.[j + 1] || 0 //up-right
          ].reduce((a,b) => a + b)
          
          
          const cell = document.getElementById((i * 45) + j)
          
          if (neighbors < 2) {
            temp[i].push(0)
            cell.classList.remove('alive')
            cell.classList.add('dead')
          } else if (neighbors > 4) {
            temp[i].push(1)
            cell.classList.remove('dead')
            cell.classList.add('alive')
          } else {
            temp[i].push(0)
            cell.classList.remove('alive')
            cell.classList.add('dead')
          }
          
          
        }
      }
      matrix = temp
      console.log(matrix)

It basically checks 4 neighboring cells, but I believe it has a glitch. Problem is… Idk that it is

4

So, for cell to not die, it needs to have more than 4 neighbors alive? There doesn’t seem to be many such cells at the start.

5

no. The conditions are:

If you have less than 2 neighbors, die. If your neighbors are less than 4, live, else, die

6

Hmm, that doesn’t seem to match the code

7

actually, you’re right. My bad. allow me to update the thing

8

Thanks! After that and some logic re-adjustment, it works!

9

Anyways, could you please help me testing clicking the grid?

4 some reason it stopped working 4 me and I think I screwed it up

10

It feels like cells are not even clicked

11

Any help w the new issue is aprecciated