Need help with Game of life

JavaScript
1

Hello. Recently, I decided to temporarily take a break from the frontend certification projects, and work on smth else.

I settled on the game of life, and it has been going well, except for one thing.

Occasionally, when attempting to read the neighbors of a cell, it outputs the following error into the console:

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I have no idea what makes this happen, as I’ve even implemented some ternaries to try to get rid of undefined values, but it was no use

As far as I’m aware, the following cells are affected:

image
image986×592 26.7 KB

The project is down below:

1 Like
2

Great idea for a project, love it.

I’m not able to replicate this error. When I open the project none of the cells seem to be changing. I tried resetting and starting a number of times.

If I uncomment all of the console.logs I can find, I only get “tick” written to the log, nothing else.

3

the cells currectly only register their neighbors by clicking on them while the simulation is paused.

Click reset, then click on one of the affected cells, and you should see the error right in the console

4

getElementById returns null if the selector doesn’t match. I assume you are feeding undefined to Array.from by way of optional chaining.

Array.from(null?.classList) // TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
5

Thanks for being so helpful as always! I finally figured out what’s wrong and tweaked some ternaries to properly handle the error

6

Update:

Properly adding the cellular logic into every tick made the thing a forkbomb for some reason…

7

(Undrowning cuz its kinda urgent)

8

Hello. Since my last post on the game of life, I’ve changed quite a few things, the main thing being that the thing now uses a matrix to access specific cells.

However, the indexing system has some ‘slight issues’.

It will always return the following error to the console:

Uncaught TypeError: Cannot read properties of undefined (reading '1') 
 at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-3957c795-1af3-bfa1-f37c-fac37d486ea5:119

The project link is below

9

Log out what cell.dataset.row - 1 is on the initial run.

Without really reading the code, I assume you end up doing this.

matrix[-1][1] // TypeError: Cannot read properties of undefined (reading '1')
10

indeed, it’s -1, but I’m not sure on what to do

[1,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0],
[1,1,1,0,0,0,0,0,1,0,1,1,0,0,0,1,0,0,1,0],
[0,0,1,0,0,1,0,0,0,1,0,0,0,1,1,0,1,0,0,0]

A section of the matrix looks like this, and to get the upper cell we need to check the same item in the above row.

The only problem is handling cases in rows 0 or 19, (or at the ends of any row) in which this is attempted:

-1: undefined (can't even be defined)
0: undefined [1,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0] undefined,
...
19: undefined [0,0,1,0,0,1,0,0,0,1,0,0,0,1,1,0,1,0,0,0] undefined,
20: undefined

What I’m trying to figure out is how to handle those cases

11

if instead of 0 you use 100, you can use % 20

100 % 20 =0
101 % 20 = 1
.
.
.
119 % 20 = 19
120 % 20 = 0

and also
99 % 20 = 19

12

I get that thing is the mod operator, but where am I supposed to use it?

13

where you are having issues to go from 0 to 19 and from 19 to 0

14

Inside tick().

The buggy code is the following:

/*Matrix is just the thing I showed above, 0s and 1s
representing dead and living cells*/
for (let j = 1; j < 21; j++) {
      for (let i = 2; i < 22; i++) {
        let cell = document.getElementById((j - 1) * 22 + i);
        let id = (j - 1) * 22 + i;
        console.log(cell.dataset.row - 1)
        const leftCell = matrix[Number(cell.dataset.row)][Number(cell.dataset.col) - 1]
        const rightCell = matrix[Number(cell.dataset.row)][Number(cell.dataset.col) + 1]
        const downCell = cell.dataset.col == 19? undefined : matrix[Number(cell.dataset.row + 1)][Number(cell.dataset.col)]
        const upCell = cell.dataset.col == 0? undefined : matrix[Number(cell.dataset.row - 1)][Number(cell.dataset.col)]
        console.log(id, leftCell, rightCell, downCell, upCell)
      }
    }
15

so there you can use the mod operator, instead of using j and i like that, you give them values that are at least 20 bigger, so you avoid going in the negatives, and use the mod operator to get a valid value for the grid

16

yeah… I think you misunderstood me.

The grid can fetch values for itself perfectly fine, but cell neighbor detection is what’s failing

say you have this slice of the matrix:

[
...
[0,0,1],
[1,1,0], //The cell we're currently looking at is in the middle
[1,0,1],
...
]

to get the cell above it, we look at the same item, in the upper row, and get 0

[
...
   v //This is the cell above it
[0,0,1],
[1,1,0], 
[1,0,1],
...
]

That works fine, but let’s say now we have this:

[
[1,1,0], //Here is the cell we're looking at
[1,0,1],
...
]

The cell is at the top of the matrix (row 0) and tries to reach row -1

[
v //This is the cell above it (or so does the code think)
undefined
[1,1,0],
[1,0,1],
...
]

That is the issue

17

if to get the cell you use 100 % 20 and (100 - 1) % 20 you get 0 and 19 avoiding this issue

if instead you don’t want the pac-man effect, maybe conditional chaining?

18

Thanks! it works now! (with the exception that now some cells think they have more living neighbors than they really do, probably because of the mod thing)

Edit: This also leads to the automata behaving… weirdly to say the least