Refactor code structure for improved readability and maintainability

assets/js/script.js

@@ -0,0 +1,195 @@
+const row = 20;
+const col = 40;
+
+function setColor(matriz) {
+    for (var i = 0; i < row; i++) {// cambiando el color de las células
+        for (var k = 0; k < col; k++) {
+            matriz[i][k].className = matriz[i][k].getAttribute('data-cell') == '0' ? 'cell' : 'cell bg-color';
+        }
+    }
+}
+
+function getCanCell(r, c, matriz, cellType = 1) {
+    let cont = 0;
+
+    if (c > 0) {
+        if (matriz[r][c - 1].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (c < (col - 1)) {
+        if (matriz[r][c + 1].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (r > 0) {
+        if (matriz[r - 1][c].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (r > 0 && c > 0) {
+        if (matriz[r - 1][c - 1].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (r > 0 && c < (col - 1)) {
+        if (matriz[r - 1][c + 1].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (r < (row - 1) && c > 0) {
+        if (matriz[r + 1][c - 1].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (r < (row - 1) && c < (col - 1)) {
+        if (matriz[r + 1][c + 1].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    if (r < (row - 1)) {
+        if (matriz[r + 1][c].getAttribute('data-cell') == cellType) {
+            cont++;
+        }
+    }
+
+    return cont;
+}
+
+function getRandom(){
+    return Math.floor(Math.random() * (10 - 1) + 1)%2;
+}
+
+function clearMatriz(matriz) {
+    for (var i = 0; i < row; i++) {
+        for (var k = 0; k < col; k++) {
+            matriz[i][k] = 0;
+        }
+    }
+}
+
+function joinMatriz(matriz, matriz_tmp) {
+    for (var i = 0; i < row; i++) {
+        for (var j = 0; j < col; j++) {
+            matriz[i][j].setAttribute('data-cell', matriz_tmp[i][j]);
+        }
+    }
+}
+
+window.onload = () => {
+    let idInterval = 0;
+    let cont = 0;
+
+    var celdas = document.getElementsByClassName('cell');
+    var matriz = Array(row);// creando matriz y asignando longitud de filas
+    var matriz_tmp = Array(row);// creando matriz temporal y asignando longitud de filas
+
+    var message = document.getElementsByClassName('message')[0];
+    var showMessage = (text)=>{
+        message.hidden = false;
+        message.innerText = text;
+        message.style.opacity = 1;
+        setTimeout(()=>{
+            let cont = 1;
+            let id = setInterval(()=>{
+                cont -= 0.05;
+                message.style.opacity = cont;
+                if(cont <= 0){
+                    message.hidden = true;
+                    clearInterval(id);
+                }
+            }, 100)
+        }, 1000);
+    }
+
+    for (var i = 0; i < row; i++) {// asignado longitud de columnas a cada fila
+        matriz[i] = Array(col);
+        matriz_tmp[i] = Array(col);
+    }
+
+    var answer = confirm("¿Generar Células vivas aleatoriamente?");
+    if(!answer){
+        alert('Selecciona las células vivas y presiona enter. Puedes presionar la tecla espaciadora para reiniciar');
+        showMessage('Modo Selección Iniciado');
+    }else{
+        showMessage('Modo Aleatorio Iniciado');
+    }
+    var press = false;
+    for (var i = 0; i < row; i++) {// asignando elementos a cada columna
+        for (var k = 0; k < col; k++) {
+            matriz[i][k] = celdas[cont++];
+            if(answer){
+                matriz_tmp[i][k] = getRandom() ? 1 : 0;// asignando células vivas o muertas aleatoriamente
+            }else{
+                matriz_tmp[i][k] = 0;// asignando células muertas
+                matriz[i][k].onclick = (e)=>{// asignando evento de click a células
+                    if(!press){
+                        if(e.target.getAttribute('data-cell') == 0){
+                            e.target.setAttribute('data-cell', 1);
+                        }else{
+                            e.target.setAttribute('data-cell', 0);
+                        }
+                        setColor(matriz);
+                    }else if(idInterval != 0){
+                        showMessage('Primero Reinicia el Juego');
+                    }
+                }
+            }
+        }
+    }
+
+    setColor(matriz);
+
+    var call = ()=>{
+        idInterval = setInterval(() => {
+            for (var i = 0; i < row; i++) {
+                for (var k = 0; k < col; k++) {
+                    if (matriz[i][k].getAttribute('data-cell') == 0) {// analizando las células muertas
+                        if (getCanCell(i, k, matriz) == 3) {// si hay 3 células vivas vecinas entonces vive
+                            matriz_tmp[i][k] = 1;
+                        }
+                    } else if (matriz[i][k].getAttribute('data-cell') == 1) {// analizando las células vivas
+                        let cellLife = getCanCell(i, k, matriz);
+                        if (cellLife < 2) {// si una celula viva tiene menos 2 vecinos vivos, entonces muere
+                            matriz_tmp[i][k] = 0;
+                        } else if (cellLife >= 2 && cellLife <= 3) {// si una celula viva tiene 2 a 3 vecinos vivos, entonces vive
+                            matriz_tmp[i][k] = 1;
+                        } else if (cellLife > 3) {// si una celula viva tiene más de 3 vecinos vivos, entonces muere.
+                            matriz_tmp[i][k] = 0;
+                        }
+                    }
+                }
+            }
+            joinMatriz(matriz, matriz_tmp);// uniendo la matriz con la matriz temporal
+            clearMatriz(matriz_tmp);// limpiando matriz temporal
+            setColor(matriz);// insertando color de matriz
+        }, 400)
+    }
+
+    press = false;
+    window.addEventListener('keydown', (e)=>{
+        if(e.keyCode == 13 && !press && !answer){
+            press = true;
+            showMessage('Juego Iniciado');
+            call();
+        }else if(idInterval != 0 && e.keyCode == 32 && press){
+            clearInterval(idInterval);
+            clearMatriz(matriz_tmp);
+            joinMatriz(matriz, matriz_tmp);
+            setColor(matriz);
+            press = false;
+            showMessage('Juego Reiniciado!');
+        }
+    })
+
+    if(answer){
+        call();
+    }
+}