285 lines
18 KiB
HTML
Executable File
285 lines
18 KiB
HTML
Executable File
<!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>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>Organización y Estructura: Agrupan datos (propiedades) y comportamientos (métodos) en un solo lugar, creando "plantillas" (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 "Rectángulo" 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>
|
|
|
|
|
|
<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>
|
|
|
|
<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> |