Drk0027/El-juego-de-la-vida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correcciones en la documentacion y actualizacion de entradas en el blog

Browse Source
This commit is contained in:
Drk0027
2025-12-09 11:09:03 -05:00
parent 580736bc88
commit bad54d1c11
6 changed files with 473 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
Documentacion/analisis.html Normal file
View File

@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>JSDoc: Home</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Home</h1>
<h3> </h3>
<section>
<article>
<h1>El juego de la vida. Una reescritura en vainilla javascript.</h1>
<h1 id="analisis-de-la-situacion">Analisis de la situacion</h1>
<h2 id="tabla-de-contenidos">Tabla de contenidos</h2>
<ul>
<li><a href="#analisis-de-la-situacion">Analisis de la situacion</a>
<ul>
<li><a href="#tabla-de-contenidos">Tabla de contenidos</a></li>
<li><a href="#introduccion">Introduccion</a></li>
<li><a href="#codigo-heredadolegado">Codigo Heredado/Legado</a>
<ul>
<li><a href="#estructura-básica-de-una-pagina-web">Estructura básica de una pagina
web.</a></li>
<li><a href="#el-archivo-indexhtml">El archivo Index.html</a></li>
</ul>
</li>
<li><a href="#bibliografia">Bibliografia</a></li>
</ul>
</li>
</ul>
<h2 id="introduccion">Introduccion</h2>
<p>Cuando quise este estudiar este codigo, pense que solo seria cuestion de copiar y pegar para verlo
funcionando, pero me encontré que he compartido irresponsablemente algo que no le seriviria a nadie.
Muy especialmente es notable que falten grandes trozos de codigo y que no haya comentarios
significativos. Por eso y como practica para mi, he decidido explorarlo y reescribirlo en vainilla
javascript, agregando comentarios detallados que permitan a los interesados en estudiar el codigo
aprender mas facilmente como funciona.</p>
<p>Mientras realizaba este analisis, tambien fui descubriendo que podia agregar nuevas cosas
interesantes, que describire mas adelante, pero por el momento, el primer desafio era, el codigo en
el que me basé para hacer el mio.</p>
<h2 id="codigo-heredado-legado">Codigo Heredado/Legado</h2>
<p>Segun la wikipedia:</p>
<blockquote>
<p>Legacy code o código heredado es código fuente relacionado con un sistema operativo o una
tecnología de computación sin soporte técnico. El término también puede aplicarse a código
insertado en software más moderno para integrar u ofrecer soporte a una función creada en el
pasado; por ejemplo dar soporte a una interfaz en serie incluso aunque muchos sistemas modernos
no tienen un puerto serial. (wikipedia,2021)</p>
</blockquote>
<p>Luego de investigar con mas empeño este codigo y su autor, he encontrado un repositorio de GitHub. Si
bien este codigo puede encontrarse en <a href="https://github.com/jpulgarin/canvaslife">aqui</a>,
solo está el codigo javascript, sin el archivo index.html necesario para poder ejecutar la practica.
en el mismo repositorio es posible encontrar un enlace a un servidor actualmente inactivo.</p>
<blockquote>
<p>Titulo: El sitio de Pulgarín esta muerto desde quien sabe cuando
<img src="images/sitio_pulgarin.png"
alt="El sitio de Pulgarín esta muerto desde quien sabe cuando">
</p>
<p><strong>Fuente:</strong> Elaboración propia</p>
</blockquote>
<p>Por esta razon, comenzaremos analizando las partes necesarias para la creacion de una pagina web con
javascript.</p>
<h3 id="estructura-b-sica-de-una-pagina-web-">Estructura básica de una pagina web.</h3>
<p>Una pagina web no es mas que un documento escrito con HTML.</p>
<p>HTML es un lenguaje de etiquetas con las que se define la estructura del documento. Se caracteriza
por ser facil de interpretar, tanto por maquinas como por humanos y es el estandar para las paginas
web hasta el momento. A pesar de que es un estandar, sufre cambios a lo largo del tiempo para poder
agregar y quitar caracteristicas que le permitan funcionar mejor en diferentes dispositivos, por lo
que un codigo muy antiguo podria no funcionar en navegadores muy modernos. </p>
<p>La version mas actual de HTML es la 5 y la que uso actualmente. Publicada en el año 2014, estandarizo
muchas etiquetas nuevas que hasta ese momento podrian estar limitadas solo a ciertos navegadores que
las interpretaran correctamente. En este caso, la etiqueta canvas existe desde el año 2004 de la
mano de Apple en su navegador Safari, y entre el año 2005 y 2006 fue adoptado por los motores de
gecko y opera, obviamente dejando a internet explorer al margen de su uso <a
href="https://en.wikipedia.org/wiki/Canvas_element">wikipedia,2021</a></p>
<p>La estructura básica de un documento HTML es la siguiente:</p>
<pre><code><span class="hljs-section">&lt;html&gt;</span>
<span class="hljs-section">&lt;head&gt;</span>
<span class="hljs-section">&lt;/head&gt;</span>
<span class="hljs-section">&lt;body&gt;</span>
<span class="hljs-section">&lt;/body&gt;</span>
<span class="hljs-section">&lt;foot&gt;</span>
<span class="hljs-section">&lt;/foot&gt;</span>
<span class="hljs-section">&lt;/html&gt;</span>
</code></pre>
<p>Las etiquetas se caracterizan por estar cerradas entre <a
href="https://es.wikipedia.org/wiki/Signo_mayor_que#Par%C3%A9ntesis_angulares">parentesis
angulares</a> &quot;&lt;&gt;&quot; donde la primera palabra dentro de ellas es el nombre de la
etiqueta que los identifica. las palabras que se agreguen a la etiqueta seran considerados
atributos, por ejemplo \<html lang='es'> donde el par &quot;lang=&#39;es&#39;&quot; permite al
navegador determinar el idioma del documento.</p>
<p>Las etiquetas html tienen una jerarquia, donde cada elemento puede contener otros elementos. para
eso, cada etiqueta que abre, debe cerrar con otra con el mismo nombre, pero usando una barra
diagonal antes de el. por ejemplo \
</html>
</p>
<p>Hay mas cosas para abarcar sobre html, especialmente sobre la <a
href="https://es.wikipedia.org/wiki/Web_sem%C3%A1ntica">web semantica</a>, la cual es una buena practica para
todo tipo de paginas web si quieren ser lo mas accesibles posible, pero por ahora nos vamos a concentrar en la
reconstruccion del codigo que nos interesa.</p>
<h3 id="el-archivo-index-html">El archivo Index.html</h3>
<p>El punto de inicio de todo sitio web es el archivo index.html, aunque esto puede cambiar de acuerdo al servidor. En
realidad el archivo puede tener cualquier nombre siempre y cuando se comience a navegar por el, pues es quien
contiene los enlaces iniciales para la primera navegacion.</p>
<p>Dado que carecemos de un archivo html del cual partir, construiremos uno propio, sin grandes pretenciones para ver
nuestro codigo funcionar.</p>
<pre><code><span class="hljs-section">&lt;html&gt;</span>
<span class="hljs-section">&lt;head&gt;</span>
<span class="hljs-section">&lt;/head&gt;</span>
<span class="hljs-section">&lt;body&gt;</span>
<span class="hljs-section">&lt;/body&gt;</span>
<span class="hljs-section">&lt;/html&gt;</span>
</code></pre>
<p>Hay que recordar que los documentos html se cargan en la memoria haciendo un barrido desde el principio hasta el
final del mismo, por lo que cada etiqueta solo tendra disponible en la memoria del dispositivo, solo lo que haya
sido cargado hasta el momento en el que ella sea cargada. por lo que, por ejemplo, si hay elementos con estilos css
en la etiqueta body y los archivos CSS no han sido cargados todavia, apareceran sin formato alguno. De la misma
forma, el codigo javascript no podra acceder a etiquetas que no existan hasta el momento en el que ellas sean
cargadas.</p>
<p>Por esta razon, cualquier script que se desee ejecutar, deberia ser cargado hasta el final del documento;</p>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
...
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>&gt;</span><span class="handlebars"><span class="xml">
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span></span>
</code></pre>
<p>O en su defecto, utilizar un metodo onLoad en javascript que permita esperar a que se cargue todo el documento antes
de intentar acceder al mismo.</p>
<h2 id="bibliografia">Bibliografia</h2>
<p><a href="https://es.wikipedia.org/wiki/C%C3%B3digo_heredado">Código Heredado(2021), Obtenido de la wikipedia</a></p>
<p><a href="https://en.wikipedia.org/wiki/Canvas_element">Canvas Element(2021), Obtenido de la wikipedia</a></p>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2>
<h3>Classes</h3>
<ul>
<li><a href="graficos.html">graficos</a></li>
<li><a href="Punto.html">Punto</a></li>
</ul>
<h3>Global</h3>
<ul>
<li><a href="global.html#_contarvecinos">_contarvecinos</a></li>
<li><a href="global.html#getPuntoBajoMouse">getPuntoBajoMouse</a></li>
<li><a href="global.html#iniciar">iniciar</a></li>
<li><a href="global.html#init">init</a></li>
<li><a href="global.html#limpiar">limpiar</a></li>
<li><a href="global.html#parar">parar</a></li>
<li><a href="global.html#procesarCelula">procesarCelula</a></li>
<li><a href="global.html#siguiente_generacion">siguiente_generacion</a></li>
</ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Fri Sep 10 2021 08:16:05
GMT-0500 (GMT-05:00)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>

392
Documentacion/index.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<html lang="es">
<head>
<meta charset="utf-8">
<title>JSDoc: Home</title>
@@ -15,18 +16,18 @@
<body>
<div id="main">
<div id="main">
<h1 class="page-title">Home</h1>
<h1 class="page-title">Home</h1>
<h3> </h3>
<h3> </h3>
@@ -37,171 +38,248 @@
<section>
<article><h1>El juego de la vida. Una reescritura en vainilla javascript.</h1>
<h1>Tabla de contenidos</h1>
<section>
<article>
<h1>El juego de la vida. Una reescritura en vainilla javascript.</h1>
<h1>Tabla de contenidos</h1>
<ul>
<li><a href="#el-juego-de-la-vida-una-reescritura-en-vainilla-javascript">El juego de la vida. Una
reescritura en vainilla javascript.</a></li>
<li><a href="#tabla-de-contenidos">Tabla de contenidos</a></li>
<li><a href="#introducci%C3%B3n">Introducción</a>
<ul>
<li><a href="#justificaci%C3%B3n-del-trabajo">Justificación del trabajo</a></li>
<li><a href="#contexto-y-estado-del-arte">Contexto y estado del arte</a>
<ul>
<li><a href="#pulgarinco">Pulgarin.co</a></li>
<li><a href="#pmaveu">pmav.eu</a></li>
<li><a href="#javascriptplainenglishio">javascript.plainenglish.io</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#desarrollo">Desarrollo</a>
<ul>
<li><a href="#an%C3%A1lisis-de-la-situaci%C3%B3n">Análisis de la situación</a></li>
<li><a href="#inicializaci%C3%B3n-de-un-proyecto-con-npm-init">Inicialización de un proyecto
con npm init</a></li>
<li><a href="#uso-de-clases-en-javascript">Uso de clases en JavaScript</a></li>
<li><a href="#implementaci%C3%B3n-de-un-sistema-de-inicializaci%C3%B3n">Implementación de un
sistema de inicialización</a></li>
<li><a href="#implementaci%C3%B3n-de-un-sistema-de-dibujado">Implementación de un sistema de
dibujado</a></li>
<li><a href="#implantaci%C3%B3n-de-un-sistema-de-funciones-publicas">Implantación de un
sistema de funciones publicas</a></li>
<li><a href="#uso-de-comentarios-para-jsdoc">Uso de comentarios para jsdoc</a></li>
<li><a href="#compilando-en-jsdoc">Compilando en JSDoc</a></li>
<li><a href="#service-workers-y-pwa">Service workers y PWA</a>
<ul>
<li><a href="#usos-de-pwa-y-app-cache-para-trabajo-offline">usos de pwa y app cache
para trabajo offline</a></li>
</ul>
</li>
<li><a href="#web-responsiva">Web responsiva</a></li>
<li><a href="#hosting-http-y-https">hosting http y https</a></li>
<li><a href="#readmemd-y-otros-archivos-de-documentaci%C3%B3n">Readme.md y otros archivos de
documentación</a></li>
</ul>
</li>
<li><a href="#conclusiones-y-trabajos-futuros">Conclusiones y trabajos futuros</a></li>
<li><a href="#bibliograf%C3%ADawebgraf%C3%ADa">Bibliografía/webgrafía</a></li>
</ul>
<h1>Introducción</h1>
<p>Hace mucho tiempo, antes de intentar tomarme en serio la programación, publique <a
href="https://interlan.ec/2020/05/23/el-juego-de-la-vida-en-javascript/">un post en mi blog
sobre el juego de la vida</a>. Habiendo mejorado mucho mis capacidades para leer código y hacer
muchas cosas mas, decidí retomar mi blog para llenarlo con nuevos contenidos que ayuden a otras
personas a las que les interesen las mismas cosas que a mi.</p>
<p>Mientras exploraba mis escasos aportes a la red, me topé con el post original que hice sobre el juego
de la vida. Estaba completamente en ruinas en cuanto a estar lleno de links rotos, imágenes
faltantes y contenidos desactualizados.</p>
<p>Desempolvando un poco, elimine los links rotos puesto que no llevaban a ningún lado. Las imágenes las
tuve que eliminar porque los hostings que las contenían habían muerto o las habían removido y ni
siquiera recuerdo de que iban (aprendí la lección, debo controlar que las imágenes que copio se
alojen en mi propio servidor para evitar estas cosas, pero tampoco olvidare citar las fuentes
originales).</p>
<p>Es bastante increíble que la primera vez que revise este algoritmo no haya validado si funcionaba o
no, que tecnologías usaba o siquiera si el sitio continuaba vivo. Para ser un post del 2020, todos
los links eran del año 2011 por lo que no es raro encontrar problemas como cosas desaparecidas.</p>
<blockquote>
<p>Titulo: El sitio de Pulgarín esta muerto desde quien sabe cuando
<img src="images/sitio_pulgarin.png"
alt="El sitio de Pulgarín esta muerto desde quien sabe cuando">
</p>
<p><strong>Fuente:</strong> Elaboración propia</p>
</blockquote>
<h2>Justificación del trabajo</h2>
<p>Realmente este trabajo es mas para pulir mis habilidades leyendo código ajeno, entendiendo como
funciona y reescribiéndolo en una forma mejorada y funcional, pero también es un pequeño aporte en
español para internet, puesto que es justo allí donde aprendí a programar.</p>
<p>Quien desee explorar mi código, puede hacerlo libremente. También publicaré en enlace de GitHub donde
pueden descargar el proyecto completo y si lo desean, pueden citarme cuando realicen sus practicas.
</p>
<p>Conforme he avanzado en el estudio de este código, también he aprovechado para aprender nuevas cosas.
Por ejemplo, en este articulo también se explicará el uso de JSDoc, comentarios para JSDoc,
aplicaciones web progresivas, deducción de herramientas de trabajo mediante la lectura de código
incompleto y mas. Espero que este trabajo sea de ayuda para aquellos que estén comenzando en el
mundo de la programación.</p>
<h2>Contexto y estado del arte</h2>
<blockquote>
<p>El Juego de la vida es un autómata celular diseñado por el matemático británico John Horton
Conway en 1970.
Hizo su primera aparición pública en el número de octubre de 1970 de la revista Scientific
American, en la columna de juegos matemáticos de Martin Gardner. Desde un punto de vista
teórico, es interesante porque es equivalente a una máquina universal de Turing, es decir, todo
lo que se puede computar algorítmicamente se puede computar en el juego de la vida.</p>
<p>Desde su publicación, ha atraído mucho interés debido a la gran variabilidad de la evolución de
los patrones. Se considera que el Juego de la vida es un buen ejemplo de emergencia y
autoorganización. Es interesante para científicos, matemáticos, economistas y otros observar
cómo patrones complejos pueden provenir de la implementación de reglas muy sencillas. <a
href="https://es.wikipedia.org/wiki/Juego_de_la_vida">(Wikipedia,2021)</a></p>
</blockquote>
<p>Las reglas del juego de la vida son sencillas:</p>
<ul>
<li>Una célula viva con menos de dos vecinos vivos se muere (de soledad)</li>
<li>Una con dos o tres vecinos vivos sobrevive</li>
<li>Una con más de tres vecinos vivos se muere (por sobrepoblación)</li>
<li>Una célula muerta con exactamente tres vecinos vivos, nace (por reproducción)</li>
</ul>
<p>Estas simplicidades de las reglas hacen que básicamente sea el juego mas fácil de programar que se me
ocurre.</p>
<p>A pesar de que es algo que se conoce desde mas de medio siglo, me propuse buscar la implementación
mas simple posible para poder aprender y entender como funciona este juego a nivel de programación.
para esto, he localizado las siguientes implementaciones:</p>
<h3>Pulgarin.co</h3>
<p>La implementación mas sencilla que he encontrado. Pero debido a que es algo ya muy viejo, se ha
perdido el código html y las dependencias jquery de las que depende.</p>
<h3>pmav.eu</h3>
<p><a href="https://pmav.eu/stuff/javascript-game-of-life-v3.1.1/">javascript game of life</a></p>
<p>Es tal vez una de las implementaciones mas extensas que he encontrado, pero muy compleja para
entender como principiante. También es una implementación muy antigua, de alrededor del año 2008 o
2010. Al menos la pagina sigue viva.</p>
<h3>javascript.plainenglish.io</h3>
<p><a
href="https://javascript.plainenglish.io/the-game-of-life-using-javascript-fc1aaec8274f?gi=ca6f1846eddf">the
game of life using javascript</a></p>
<p>Tal vez la mejor documentada de todas las implementaciones que he visto. Una lastima no haberla visto
antes de comenzar este proyecto, pero al menos aprendí a hacerlo por mi cuenta.</p>
<h1>Desarrollo</h1>
<p>Es raro que un código de 329 líneas de código requiera tanta atención, pero he de abarcar todas estas
cosas en artículos distintos que enlazo a continuación.</p>
<h2>Análisis de la situación</h2>
<p><a href="analisis.html">Análisis de situación</a></p>
<p>Como deducir la tecnología utilizada en el código original</p>
<h2>Uso de clases en JavaScript</h2>
<p>Usar clases en JavaScript organiza el código, modela entidades complejas (POO), facilita la herencia y encapsula datos/comportamiento, haciendo el código más mantenible y legible, especialmente en proyectos grandes, y su sintaxis es familiar para desarrolladores de otros lenguajes orientados a objetos como C++. Permiten crear objetos con propiedades y métodos, reutilizar código con la herencia (extends), y controlar la visibilidad (público/privado).</p>
<p><strong>Razones Clave para Usar Clases:</strong></p>
<ul>
<li><a href="#el-juego-de-la-vida-una-reescritura-en-vainilla-javascript">El juego de la vida. Una reescritura en vainilla javascript.</a></li>
<li><a href="#tabla-de-contenidos">Tabla de contenidos</a></li>
<li><a href="#introducci%C3%B3n">Introducción</a>
<ul>
<li><a href="#justificaci%C3%B3n-del-trabajo">Justificación del trabajo</a></li>
<li><a href="#contexto-y-estado-del-arte">Contexto y estado del arte</a>
<ul>
<li><a href="#pulgarinco">Pulgarin.co</a></li>
<li><a href="#pmaveu">pmav.eu</a></li>
<li><a href="#javascriptplainenglishio">javascript.plainenglish.io</a></li>
<li>Organización y Estructura: Agrupan datos (propiedades) y comportamientos (métodos) en un solo lugar, creando &quot;plantillas&quot; (clases) para objetos similares (ej. Animal, Usuario).</li>
<li>Reutilización de Código (Herencia): El uso de extends permite que una clase hija herede y extienda funcionalidades de una clase padre, evitando duplicación de código.</li>
<li>Encapsulación: Permiten ocultar detalles internos (propiedades privadas), exponiendo solo lo necesario a través de métodos públicos, lo que reduce dependencias y simplifica el mantenimiento.</li>
<li>Legibilidad y Familiaridad: La sintaxis de clases (class, constructor, super) es más clara y similar a otros lenguajes POO, facilitando la comprensión para desarrolladores que vienen de Java, Python, etc.</li>
<li>Manejo de Estado: Son ideales para modelar entidades que necesitan mantener un estado (datos) y realizar acciones (métodos), como un &quot;Rectángulo&quot; que recuerda sus dimensiones.</li>
<li>Constructor: El método constructor especial inicializa el objeto automáticamente al crearlo con new, simplificando la configuración inicial.</li>
</ul>
</li>
</ul>
</li>
<li><a href="#desarrollo">Desarrollo</a>
<ul>
<li><a href="#an%C3%A1lisis-de-la-situaci%C3%B3n">Análisis de la situación</a></li>
<li><a href="#inicializaci%C3%B3n-de-un-proyecto-con-npm-init">Inicialización de un proyecto con npm init</a></li>
<li><a href="#uso-de-clases-en-javascript">Uso de clases en JavaScript</a></li>
<li><a href="#implementaci%C3%B3n-de-un-sistema-de-inicializaci%C3%B3n">Implementación de un sistema de inicialización</a></li>
<li><a href="#implementaci%C3%B3n-de-un-sistema-de-dibujado">Implementación de un sistema de dibujado</a></li>
<li><a href="#implantaci%C3%B3n-de-un-sistema-de-funciones-publicas">Implantación de un sistema de funciones publicas</a></li>
<li><a href="#uso-de-comentarios-para-jsdoc">Uso de comentarios para jsdoc</a></li>
<li><a href="#compilando-en-jsdoc">Compilando en JSDoc</a></li>
<li><a href="#service-workers-y-pwa">Service workers y PWA</a>
<ul>
<li><a href="#usos-de-pwa-y-app-cache-para-trabajo-offline">usos de pwa y app cache para trabajo offline</a></li>
</ul>
</li>
<li><a href="#web-responsiva">Web responsiva</a></li>
<li><a href="#hosting-http-y-https">hosting http y https</a></li>
<li><a href="#readmemd-y-otros-archivos-de-documentaci%C3%B3n">Readme.md y otros archivos de documentación</a></li>
</ul>
</li>
<li><a href="#conclusiones-y-trabajos-futuros">Conclusiones y trabajos futuros</a></li>
<li><a href="#bibliograf%C3%ADawebgraf%C3%ADa">Bibliografía/webgrafía</a></li>
</ul>
<h1>Introducción</h1>
<p>Hace mucho tiempo, antes de intentar tomarme en serio la programación, publique <a href="https://interlan.ec/2020/05/23/el-juego-de-la-vida-en-javascript/">un post en mi blog sobre el juego de la vida</a>. Habiendo mejorado mucho mis capacidades para leer código y hacer muchas cosas mas, decidí retomar mi blog para llenarlo con nuevos contenidos que ayuden a otras personas a las que les interesen las mismas cosas que a mi.</p>
<p>Mientras exploraba mis escasos aportes a la red, me topé con el post original que hice sobre el juego de la vida. Estaba completamente en ruinas en cuanto a estar lleno de links rotos, imágenes faltantes y contenidos desactualizados.</p>
<p>Desempolvando un poco, elimine los links rotos puesto que no llevaban a ningún lado. Las imágenes las tuve que eliminar porque los hostings que las contenían habían muerto o las habían removido y ni siquiera recuerdo de que iban (aprendí la lección, debo controlar que las imágenes que copio se alojen en mi propio servidor para evitar estas cosas, pero tampoco olvidare citar las fuentes originales).</p>
<p>Es bastante increíble que la primera vez que revise este algoritmo no haya validado si funcionaba o no, que tecnologías usaba o siquiera si el sitio continuaba vivo. Para ser un post del 2020, todos los links eran del año 2011 por lo que no es raro encontrar problemas como cosas desaparecidas.</p>
<blockquote>
<p>Titulo: El sitio de Pulgarín esta muerto desde quien sabe cuando
<img src="images/sitio_pulgarin.png" alt="El sitio de Pulgarín esta muerto desde quien sabe cuando"></p>
<p><strong>Fuente:</strong> Elaboración propia</p>
</blockquote>
<h2>Justificación del trabajo</h2>
<p>Realmente este trabajo es mas para pulir mis habilidades leyendo código ajeno, entendiendo como funciona y reescribiéndolo en una forma mejorada y funcional, pero también es un pequeño aporte en español para internet, puesto que es justo allí donde aprendí a programar.</p>
<p>Quien desee explorar mi código, puede hacerlo libremente. También publicaré en enlace de GitHub donde pueden descargar el proyecto completo y si lo desean, pueden citarme cuando realicen sus practicas.</p>
<p>Conforme he avanzado en el estudio de este código, también he aprovechado para aprender nuevas cosas. Por ejemplo, en este articulo también se explicará el uso de JSDoc, comentarios para JSDoc, aplicaciones web progresivas, deducción de herramientas de trabajo mediante la lectura de código incompleto y mas. Espero que este trabajo sea de ayuda para aquellos que estén comenzando en el mundo de la programación.</p>
<h2>Contexto y estado del arte</h2>
<blockquote>
<p>El Juego de la vida es un autómata celular diseñado por el matemático británico John Horton Conway en 1970.
Hizo su primera aparición pública en el número de octubre de 1970 de la revista Scientific American, en la columna de juegos matemáticos de Martin Gardner. Desde un punto de vista teórico, es interesante porque es equivalente a una máquina universal de Turing, es decir, todo lo que se puede computar algorítmicamente se puede computar en el juego de la vida.</p>
<p>Desde su publicación, ha atraído mucho interés debido a la gran variabilidad de la evolución de los patrones. Se considera que el Juego de la vida es un buen ejemplo de emergencia y autoorganización. Es interesante para científicos, matemáticos, economistas y otros observar cómo patrones complejos pueden provenir de la implementación de reglas muy sencillas. <a href="https://es.wikipedia.org/wiki/Juego_de_la_vida">(Wikipedia,2021)</a></p>
</blockquote>
<p>Las reglas del juego de la vida son sencillas:</p>
<ul>
<li>Una célula viva con menos de dos vecinos vivos se muere (de soledad)</li>
<li>Una con dos o tres vecinos vivos sobrevive</li>
<li>Una con más de tres vecinos vivos se muere (por sobrepoblación)</li>
<li>Una célula muerta con exactamente tres vecinos vivos, nace (por reproducción)</li>
</ul>
<p>Estas simplicidades de las reglas hacen que básicamente sea el juego mas fácil de programar que se me ocurre.</p>
<p>A pesar de que es algo que se conoce desde mas de medio siglo, me propuse buscar la implementación mas simple posible para poder aprender y entender como funciona este juego a nivel de programación. para esto, he localizado las siguientes implementaciones:</p>
<h3>Pulgarin.co</h3>
<p>La implementación mas sencilla que he encontrado. Pero debido a que es algo ya muy viejo, se ha perdido el código html y las dependencias jquery de las que depende.</p>
<h3>pmav.eu</h3>
<p><a href="https://pmav.eu/stuff/javascript-game-of-life-v3.1.1/">javascript game of life</a></p>
<p>Es tal vez una de las implementaciones mas extensas que he encontrado, pero muy compleja para entender como principiante. También es una implementación muy antigua, de alrededor del año 2008 o 2010. Al menos la pagina sigue viva.</p>
<h3>javascript.plainenglish.io</h3>
<p><a href="https://javascript.plainenglish.io/the-game-of-life-using-javascript-fc1aaec8274f?gi=ca6f1846eddf">the game of life using javascript</a></p>
<p>Tal vez la mejor documentada de todas las implementaciones que he visto. Una lastima no haberla visto antes de comenzar este proyecto, pero al menos aprendí a hacerlo por mi cuenta.</p>
<h1>Desarrollo</h1>
<p>Es raro que un código de 329 líneas de código requiera tanta atención, pero he de abarcar todas estas cosas en artículos distintos que enlazo a continuación.</p>
<h2>Análisis de la situación</h2>
<p><a href="analisis_situacion.md">Análisis de situación</a></p>
<p>Como deducir la tecnología utilizada en el código original</p>
<h2>Inicialización de un proyecto con npm init</h2>
<p>uso del comando npm init y configuración de las opciones del proyecto</p>
<h2>Uso de clases en JavaScript</h2>
<p>razones para utilizar clases en javascript, como se crean, inicializan y razón para usarlas al reescribir este código</p>
<h2>Implementación de un sistema de inicialización</h2>
<p>forma en la que se inicializan las clases, variables dentro de las clases y funciones que llaman métodos en clases</p>
<h2>Implementación de un sistema de dibujado</h2>
<p>Estudio de la clase gráficos, como funciona en lienzo canvas y la variable de contexto (ctx)</p>
<p>funciones de dibujado y como se reciclan</p>
<h2>Implantación de un sistema de funciones publicas</h2>
<p>Funciones publicas que realizan tareas adicionales</p>
<h2>Uso de comentarios para jsdoc</h2>
<p>Comentarios en jsdoc, como pueden ayudar a la documentación de un código y como se ven en Visual Studio Code.</p>
<h2>Compilando en JSDoc</h2>
<p>Modificación del código de package.json para agregar comandos de jsdoc</p>
<p>opciones de configuración, y parámetros adicionales</p>
<h2>Service workers y PWA</h2>
<h3>usos de pwa y app cache para trabajo offline</h3>
<p>https://www.pwabuilder.com</p>
<h2>Web responsiva</h2>
<h2>hosting http y https</h2>
<p>Etiquetas que permiten a la pagina web adaptarse a los tamaños de pantalla</p>
<h2>Readme.md y otros archivos de documentación</h2>
<h1>Conclusiones y trabajos futuros</h1>
<p>Estoy bastante sorprendido de todo lo que se puede hacer con algo tan simple que se puede resumir en cuatro reglas. pero parece que queda mucho mas.</p>
<p>al juego le hacen falta muchas cosas, pero las que he visto hasta el momento son las siguientes:</p>
<ul>
<li><strong>Debería poder modificar el tamaño del lienzo</strong></li>
</ul>
<p>Al leer el código se pueden encontrar algunos comentarios que he dejado, que demuestran que al menos lo he intentado.</p>
<p>Me gustaría que el código permita crear un lienzo del ancho de la pantalla, pero eso tal vez haga el código muy extenso para mi propósito original.</p>
<p>He intentado utilizando algo de CSS, pero el resultado es que, si bien el lienzo se adapta al ancho de la pantalla, se pierde precisión del click, haciendo que solo un cuarto de la pantalla sea preciso y el resto no detecte el click en las partes que corresponde.</p>
<ul>
<li><strong>Debería permitir arrastrar y soltar para dibujar en el lienzo</strong></li>
</ul>
<p>Curiosamente es una función que se encuentra en el código original. El problema es que no logre implementarla sin que se rompa todo. Tengo que estudiar mas para saber como hacerlo.</p>
<ul>
<li><strong>Hay bugs extraños, muy extraños</strong></li>
</ul>
<p>Aunque he creado una función para iniciar y otra para parar la ejecución del temporizador para procesar las nuevas generaciones, en algunos casos y por alguna razón, es imposible detener el temporizador después de funcionar correctamente antes. Es un problema extraño que pensé que se solucionaría si controlaba las veces que se puede usar la función iniciar. Tal vez deba agregar un changelog y un control de versiones, quien sabe.</p>
<ul>
<li><strong>Funciones adicionales</strong></li>
</ul>
<p>Una vez terminado el proyecto me di cuenta de que seria genial que haya mas funciones, pero tal vez dejaría de ser didáctico si hago eso. Aun así destaco lo siguiente:</p>
<ol>
<li>Seria genial si se pudiera generar un arreglo aleatorio para iniciar</li>
<li>Me gustaría agregar una lista de arreglos prediseñados para poder ver como funcionan los diferentes patrones ya descubiertos.</li>
<li>Me gustaría que se puedan configurar los colores</li>
<li>¡Agregar publicidad! Bueno, es algo que siempre quise aprender a hacer y muchos de los códigos que he encontrado la agregan.</li>
<li>¿Comentarios y sugerencias? Tal vez es muy optimista agregar un elemento así en una aplicación super simple, mas aun sabiendo que no creo que reciba algún comentario en mi propio blog.</li>
</ol>
<h1>Bibliografía/webgrafía</h1>
<p><a href="https://www.codeandbeyond.org/2011/01/code-katas-la-practica-hace-al-maestro.html">Code katas, la practica hace al maestro(2011).Obtenido de www.codeandbeyond.org</a></p>
<p><a href="https://julianpulgarin.com/canvaslife/">El juego de la vida(2011), obtenido de www.pulgarin.co</a> (enlace roto)</p>
<p><a href="https://es.wikipedia.org/wiki/Juego_de_la_vida">El juego de la vida(2021), obtenido de es.wikipedia.org</a></p>
<p><a href="https://pmav.eu/stuff/javascript-game-of-life-v3.1.1/">El juego de la vida (2008-2010), obtenido de pmav</a></p>
<p><a href="https://javascript.plainenglish.io/the-game-of-life-using-javascript-fc1aaec8274f?gi=ca6f1846eddf">the game of life using javascript (2020), javascript.plainenglish.io</a></p></article>
</section>
<h1>Conclusiones y trabajos futuros</h1>
<p>Estoy bastante sorprendido de todo lo que se puede hacer con algo tan simple que se puede resumir en
cuatro reglas. pero parece que queda mucho mas.</p>
<p>al juego le hacen falta muchas cosas, pero las que he visto hasta el momento son las siguientes:</p>
<ul>
<li><strong>Debería poder modificar el tamaño del lienzo</strong></li>
</ul>
<p>Al leer el código se pueden encontrar algunos comentarios que he dejado, que demuestran que al menos
lo he intentado.</p>
<p>Me gustaría que el código permita crear un lienzo del ancho de la pantalla, pero eso tal vez haga el
código muy extenso para mi propósito original.</p>
<p>He intentado utilizando algo de CSS, pero el resultado es que, si bien el lienzo se adapta al ancho
de la pantalla, se pierde precisión del click, haciendo que solo un cuarto de la pantalla sea
preciso y el resto no detecte el click en las partes que corresponde.</p>
<ul>
<li><strong>Debería permitir arrastrar y soltar para dibujar en el lienzo</strong></li>
</ul>
<p>Curiosamente es una función que se encuentra en el código original. El problema es que no logre
implementarla sin que se rompa todo. Tengo que estudiar mas para saber como hacerlo.</p>
<ul>
<li><strong>Hay bugs extraños, muy extraños</strong></li>
</ul>
<p>Aunque he creado una función para iniciar y otra para parar la ejecución del temporizador para
procesar las nuevas generaciones, en algunos casos y por alguna razón, es imposible detener el
temporizador después de funcionar correctamente antes. Es un problema extraño que pensé que se
solucionaría si controlaba las veces que se puede usar la función iniciar. Tal vez deba agregar un
changelog y un control de versiones, quien sabe.</p>
<ul>
<li><strong>Funciones adicionales</strong></li>
</ul>
<p>Una vez terminado el proyecto me di cuenta de que seria genial que haya mas funciones, pero tal vez
dejaría de ser didáctico si hago eso. Aun así destaco lo siguiente:</p>
<ol>
<li>Seria genial si se pudiera generar un arreglo aleatorio para iniciar</li>
<li>Me gustaría agregar una lista de arreglos prediseñados para poder ver como funcionan los
diferentes patrones ya descubiertos.</li>
<li>Me gustaría que se puedan configurar los colores</li>
<li>¡Agregar publicidad! Bueno, es algo que siempre quise aprender a hacer y muchos de los códigos
que he encontrado la agregan.</li>
<li>¿Comentarios y sugerencias? Tal vez es muy optimista agregar un elemento así en una aplicación
super simple, mas aun sabiendo que no creo que reciba algún comentario en mi propio blog.</li>
</ol>
<h1>Bibliografía/webgrafía</h1>
<p><a href="https://www.codeandbeyond.org/2011/01/code-katas-la-practica-hace-al-maestro.html">Code
katas, la practica hace al maestro(2011).Obtenido de www.codeandbeyond.org</a></p>
<p><a href="https://julianpulgarin.com/canvaslife/">El juego de la vida(2011), obtenido de
www.pulgarin.co</a> (enlace roto)</p>
<p><a href="https://es.wikipedia.org/wiki/Juego_de_la_vida">El juego de la vida(2021), obtenido de
es.wikipedia.org</a></p>
<p><a href="https://pmav.eu/stuff/javascript-game-of-life-v3.1.1/">El juego de la vida (2008-2010),
obtenido de pmav</a></p>
<p><a
href="https://javascript.plainenglish.io/the-game-of-life-using-javascript-fc1aaec8274f?gi=ca6f1846eddf">the
game of life using javascript (2020), javascript.plainenglish.io</a></p>
</article>
</section>
</div>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="graficos.html">graficos</a></li><li><a href="Punto.html">Punto</a></li></ul><h3>Global</h3><ul><li><a href="global.html#_contarvecinos">_contarvecinos</a></li><li><a href="global.html#getPuntoBajoMouse">getPuntoBajoMouse</a></li><li><a href="global.html#iniciar">iniciar</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#limpiar">limpiar</a></li><li><a href="global.html#parar">parar</a></li><li><a href="global.html#procesarCelula">procesarCelula</a></li><li><a href="global.html#siguiente_generacion">siguiente_generacion</a></li></ul>
</nav>
<nav>
<h2><a href="index.html">Home</a></h2>
<h3>Classes</h3>
<ul>
<li><a href="graficos.html">graficos</a></li>
<li><a href="Punto.html">Punto</a></li>
</ul>
<h3>Global</h3>
<ul>
<li><a href="global.html#_contarvecinos">_contarvecinos</a></li>
<li><a href="global.html#getPuntoBajoMouse">getPuntoBajoMouse</a></li>
<li><a href="global.html#iniciar">iniciar</a></li>
<li><a href="global.html#init">init</a></li>
<li><a href="global.html#limpiar">limpiar</a></li>
<li><a href="global.html#parar">parar</a></li>
<li><a href="global.html#procesarCelula">procesarCelula</a></li>
<li><a href="global.html#siguiente_generacion">siguiente_generacion</a></li>
</ul>
</nav>
<br class="clear">
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Fri Sep 10 2021 08:16:05 GMT-0500 (GMT-05:00)
</footer>
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Fri Sep 10 2021 08:16:05
GMT-0500 (GMT-05:00)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>

10
LICENCE.MD Normal file
View File

@@ -0,0 +1,10 @@
La Licencia MIT (MIT)
---------------------
Copyright (c) [2025] [Drk0027]
Por la presente se concede permiso, libre de cargos, a cualquier persona que obtenga una copia de este software y de los archivos de documentación asociados (el "Software"), para utilizar el Software sin restricción, incluyendo sin limitación los derechos a usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar, y/o vender copias del Software, y a permitir a las personas a las que se les proporcione el Software a hacer lo mismo, sujeto a las siguientes condiciones:
El aviso de copyright anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A GARANTÍAS DE COMERCIALIZACIÓN, IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS AUTORES O LOS TITULARES DEL COPYRIGHT SERÁN RESPONSABLES DE NINGUNA RECLAMACIÓN, DAÑOS U OTRAS RESPONSABILIDADES, YA SEA EN UNA ACCIÓN DE CONTRATO, AGRAVIO O CUALQUIER OTRO MOTIVO, DERIVADAS DE O EN CONEXIÓN CON EL SOFTWARE O EL USO U OTRAS OPERACIONES CON EL SOFTWARE.

60
README.md
View File

@@ -28,6 +28,8 @@
# Introducción
Actualmente Hay una entrada en el [blog interlan](https://interlan.ec/2021/09/08/el-juego-de-la-vida-una-reescritura-en-vainilla-javascript/) sobre este tema y el codigo se encuentra publicado en [GitHub](https://github.com/drk0027/juegodelavida) y mi repo [Gitea](https://git.interlan.ec/Drk0027/El-juego-de-la-vida)
Hace mucho tiempo, antes de intentar tomarme en serio la programación, publique [un post en mi blog sobre el juego de la vida](https://interlan.ec/2020/05/23/el-juego-de-la-vida-en-javascript/). Habiendo mejorado mucho mis capacidades para leer código y hacer muchas cosas mas, decidí retomar mi blog para llenarlo con nuevos contenidos que ayuden a otras personas a las que les interesen las mismas cosas que a mi.
Mientras exploraba mis escasos aportes a la red, me topé con el post original que hice sobre el juego de la vida. Estaba completamente en ruinas en cuanto a estar lleno de links rotos, imágenes faltantes y contenidos desactualizados.
@@ -93,51 +95,19 @@ Es raro que un código de 329 líneas de código requiera tanta atención, pero
Como deducir la tecnología utilizada en el código original
## Inicialización de un proyecto con npm init
uso del comando npm init y configuración de las opciones del proyecto
## Uso de clases en JavaScript
razones para utilizar clases en javascript, como se crean, inicializan y razón para usarlas al reescribir este código
Usar clases en JavaScript organiza el código, modela entidades complejas (POO), facilita la herencia y encapsula datos/comportamiento, haciendo el código más mantenible y legible, especialmente en proyectos grandes, y su sintaxis es familiar para desarrolladores de otros lenguajes orientados a objetos como C++. Permiten crear objetos con propiedades y métodos, reutilizar código con la herencia (extends), y controlar la visibilidad (público/privado).
## Implementación de un sistema de inicialización
**Razones Clave para Usar Clases:**
forma en la que se inicializan las clases, variables dentro de las clases y funciones que llaman métodos en clases
- Organización y Estructura: Agrupan datos (propiedades) y comportamientos (métodos) en un solo lugar, creando "plantillas" (clases) para objetos similares (ej. Animal, Usuario).
- Reutilización de Código (Herencia): El uso de extends permite que una clase hija herede y extienda funcionalidades de una clase padre, evitando duplicación de código.
- Encapsulación: Permiten ocultar detalles internos (propiedades privadas), exponiendo solo lo necesario a través de métodos públicos, lo que reduce dependencias y simplifica el mantenimiento.
- Legibilidad y Familiaridad: La sintaxis de clases (class, constructor, super) es más clara y similar a otros lenguajes POO, facilitando la comprensión para desarrolladores que vienen de Java, Python, etc.
- Manejo de Estado: Son ideales para modelar entidades que necesitan mantener un estado (datos) y realizar acciones (métodos), como un "Rectángulo" que recuerda sus dimensiones.
- Constructor: El método constructor especial inicializa el objeto automáticamente al crearlo con new, simplificando la configuración inicial.
## Implementación de un sistema de dibujado
Estudio de la clase gráficos, como funciona en lienzo canvas y la variable de contexto (ctx)
funciones de dibujado y como se reciclan
## Implantación de un sistema de funciones publicas
Funciones publicas que realizan tareas adicionales
## Uso de comentarios para jsdoc
Comentarios en jsdoc, como pueden ayudar a la documentación de un código y como se ven en Visual Studio Code.
## Compilando en JSDoc
Modificación del código de package.json para agregar comandos de jsdoc
opciones de configuración, y parámetros adicionales
## Service workers y PWA
### usos de pwa y app cache para trabajo offline
https://www.pwabuilder.com
## Web responsiva
## hosting http y https
Etiquetas que permiten a la pagina web adaptarse a los tamaños de pantalla
## Readme.md y otros archivos de documentación
# Conclusiones y trabajos futuros
@@ -165,11 +135,11 @@ Aunque he creado una función para iniciar y otra para parar la ejecución del t
Una vez terminado el proyecto me di cuenta de que seria genial que haya mas funciones, pero tal vez dejaría de ser didáctico si hago eso. Aun así destaco lo siguiente:
1. Seria genial si se pudiera generar un arreglo aleatorio para iniciar
2. Me gustaría agregar una lista de arreglos prediseñados para poder ver como funcionan los diferentes patrones ya descubiertos.
3. Me gustaría que se puedan configurar los colores
4. ¡Agregar publicidad! Bueno, es algo que siempre quise aprender a hacer y muchos de los códigos que he encontrado la agregan.
5. ¿Comentarios y sugerencias? Tal vez es muy optimista agregar un elemento así en una aplicación super simple, mas aun sabiendo que no creo que reciba algún comentario en mi propio blog.
1. Seria genial si se pudiera generar un arreglo aleatorio para iniciar
2. Me gustaría agregar una lista de arreglos prediseñados para poder ver como funcionan los diferentes patrones ya descubiertos.
3. Me gustaría que se puedan configurar los colores
4. ¡Agregar publicidad! Bueno, es algo que siempre quise aprender a hacer y muchos de los códigos que he encontrado la agregan.
5. ¿Comentarios y sugerencias? Tal vez es muy optimista agregar un elemento así en una aplicación super simple, mas aun sabiendo que no creo que reciba algún comentario en mi propio blog.

0
bugs_conocidos.md
View File

2
package.json
View File

@@ -8,5 +8,5 @@
"generatedocs": "jsdoc -c jsdoc.conf index.js README.md -d Documentacion"
},
"author": "drk0027",
"license": "ISC"
"license": "MIT"
}