From bdf09be9b5e1edfd76b25b36f007d084a5039cf5 Mon Sep 17 00:00:00 2001 From: Rafael Minaya Date: Thu, 1 Jan 2026 10:29:26 -0400 Subject: [PATCH] Refactor code structure for improved readability and maintainability --- assets/css/style.css | 39 ++ assets/image/icon.png | Bin 0 -> 13969 bytes assets/js/script.js | 195 ++++++++++ index.html | 860 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 1094 insertions(+) create mode 100644 assets/css/style.css create mode 100644 assets/image/icon.png create mode 100644 assets/js/script.js create mode 100644 index.html diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..21ba477 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,39 @@ +html, body{ + width: 100%; + height: 100%; + margin: 0%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +table{ + width: 100%; + height: 100%; + border-collapse: collapse; +} + +table, td, tr{ + border: 1px solid black; +} + +.bg-color{ + background-color: black; +} + +.message{ + width: 15rem; + height: 5rem; + margin: 10px; + background-color: black; + color: white; + border-radius: 2rem; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0px; + left: 0px; + opacity: 0; +} \ No newline at end of file diff --git a/assets/image/icon.png b/assets/image/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..d9e1cf9e21459761b2e0c679727eb6f2abbd5c59 GIT binary patch literal 13969 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 Lxmc>_6#ahyScNE8 literal 0 HcmV?d00001 diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..1bf57a5 --- /dev/null +++ b/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(); + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e85d51b --- /dev/null +++ b/index.html @@ -0,0 +1,860 @@ + + + + + + + + + Juego de la Vida + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file