Код работает не так как надо?

Question

[SHUPILOID]

Добрый день, я новичок в js, пытался воплотить игру 'Жизнь', скрипт написал, но не корректно работает. А именно не определяет живых клеток и почему-то setInterval не создает рекурсивный вызов функции. Будьте любезны объясните в чем проблема в моем скрипте

let wrap = document.querySelector('.wrap');
let start = document.querySelector('button');
let stop = document.querySelector('.stop');
let blueArr = [], blueArr2 = [], neighborsArr = [], count = 0, timer;

for (let i = 0; i < 30; i++) {
    blueArr[i] = [];
    for (let j = 0; j < 30; j++) {
        blueArr[i][j] = 0;
        let div = document.createElement('div');
        div.dataset.y = i;
        div.dataset.x = j;
        wrap.append(div)
    }
}


wrap.onclick = function (e) {
    if (e.target === e.currentTarget) {
        return
    }
    e.target.style.background = 'green';
    let y = e.target.dataset.x
    let x = e.target.dataset.y
    blueArr[y][x] = 1
}

function startLife() {
    blueArr2 = blueArr;
    for (let i = 0; i < 30; i++) {
        neighborsArr[i] = [];
        for (let j = 0; j < 30; j++) {
            let neighbors = 0;
       
            if (blueArr[fpm(i) + 1][j] == 1) neighbors++; // верх
            if (blueArr[fpp(i) - 1][j] == 1) neighbors++; // вниз
            if (blueArr[i][fpp(j) - 1] == 1) neighbors++; // влево
            if (blueArr[i][fpm(j) + 1] == 1) neighbors++; // вправо
            if (blueArr[fpp(i) - 1][fpp(j) - 1] == 1) neighbors++; // верх-влево
            if (blueArr[fpp(i) - 1][fpm(j) + 1] == 1) neighbors++; // верх-вправо
            if (blueArr[fpm(i) + 1][fpp(j) - 1] == 1) neighbors++; // вниз-влево
            if (blueArr[fpm(i) + 1][fpm(j) + 1] == 1) neighbors++; // вниз-вправо

            neighborsArr[i][j] = neighbors
            console.log(neighborsArr)
            if (neighborsArr[i][j] == 2 || neighborsArr[i][j] === 3) {
                blueArr2[i][j] = 1;
                document.querySelector(`div[data-x='${i}'][data-y='${j}']`).style.background = 'green'
            } else {
                blueArr2[i][j] = 0;
                document.querySelector(`div[data-x='${i}'][data-y='${j}']`).style.background = 'black'
            }
        }
    }
    blueArr = blueArr2;
    count++;
    document.querySelector('.count').innerHTML = count;
    timer = setInterval(startLife, 300)
}

function fpm(i) {
    if (i === 29) return 0;
    else return i
}

function fpp(i) {
    if (i == 0) return 29;
    else return i
}



start.onclick = startLife

Comments

[NaN]

Выложите код в песочницу и отформатируйте его, невозможно читать же.

[SHUPILOID]

https://codepen.io/dmytrik/pen/wvvvEQv?editors=1010, вот ссылка на песочницу

Answer 1

[NaN]

Посмотрите еще раз документацию как реализовывается setInterval