👾 Programo el Juego de la Vida de Conway en JavaScript paso a paso
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- 👾 ¿Te suena el Juego de la vida de Conway? ¿Tienes curiosidad por programar tú mismo este curioso autómata celular? En este vídeo aprenderás, paso a paso cómo crearlo en JavaScript desde tu propio navegador web.
⌨ Descarga el código completo desde mi cuenta de GitHub
👉 github.com/jav...
Apréndelo TODO sobre los Autómatas Celulares en este vídeo
👉 • Cómo crear complejidad...
🎮 ¿Quieres más? Aprende a programar tus primeros juegos HTML5 paso a paso y desde cero con mi curso de Udemy
👉 www.udemy.com/...
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
Graciaas, me re salvaste! porque le di mil vueltas al tema de como contar los vecinos. Yo lo estoy haciendo en Java pero me re ayudo tu forma de resolverlo :D
Mil gracias
Muchas Gracias amigo, yo soy brasileño e su video ayudo me. !Gracias!
Vengo de tu github, genial la explicación!
¡Muchas gracias! :D
Yo también estoy en examenes pero siempre hay tiempo para ver tus videos. Adelante Javier.
¡Qué bonito eso, Judy! Muchísimas gracias ^_^ ¡Un abrazo grande!
¡Recordad que tenéis el código, listo para su descarga, en la descripción del vídeo! ¡Espero que os guste! El próximo vídeo será el tutorial paso a paso de Wireworld ;)
Like porque programar es increíble.
👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻👨💻
¡Buenísimo el comentario, Mr Robot! ;)
Wow. Ya lo estoy viendo
Qué bueno! Espero que te guste! Ya me contarás qué tal y que sepáis que el próximo tutorial será el de Wireworld 🙂
buff.. un amigo mas avanzado que yo en programación me propuso hacer este juego por mi mismo, pasaron 3 días y no logre un avance significativo mas allá de crear el tablero, me hizo entender lo mucho que me falta aprender y practicar a diario para ser un buen programador. gracias javi! (por cierto lo estoy haciendo en java que es el lenguaje por el que empece este camino de ida)
Excelente video y muy interesante, fue 1 hora que paso como 5 minutos
Qué bueno Manuel! Gracias 😁 pues ya tengo grabado el tutorial de Wireworld. Lo chulo, es que adaptar el código sólo me llevó 10 minutos!! Si os gustan estos autómatas podemos adaptar otros más adelante como: fluidos, gases o generación procedural de cuevas ☺
@ Genial, que este tema es muy interesante 😀
Estupendo! Me ha encantado programar wireworld, era la primera vez que lo creaba y ha sido muy fácil de adaptar 😁
es hermoso. Una vez que tenga todo los conocimientos en javascript intentare hacerlo :D gracias por el codigo:)
¡Hola Anth_Ger! La verdad es que sí que es muy bonito. Este es un algoritmo clásico y a mi me encanta. Ahora estoy trabajando en una versión que simula líquidos, usando este tipo de reglas. Espero tener listo el vídeo pronto y que lo disfrutéis ¡Un abrazo y mil gracias por tu comentario! :)
Gran video! lo escribi de principio a fin pero valio la pena
¡Muchas gracias, Rodrigo! Me alegra mucho que te haya gustado ^_^
Coooooosmico
Lo hice y quedó chulo
¡Qué bueno, Gerardo! Si te animas, te recomiendo probar el de Wireworld. Los cambios en las reglas son mínimos y puedes simular circuitos eléctricos. Es muy interesante ¡Un abrazo, crack y a seguir creando! ;)
@@javianmuniz
O por dios. Me contestó, sabe que existo 😅
Ese de los circuitos lo intentaré también, me parece muy interesante y muchas gracias por tus vídeos.
Me encanta la manera en la qué explicas y la manera en que calmas nuestras frustraciones cuando no sale.
Saludos desde México.
Hola, gracias por dar explicaciones, lo entiendo hasta yo, puedo seguir el hilo del programa y también entiendo el funcionamiento del problema en si. Animo lo haces excelente.😻
Muchas gracias! está increíble! seguí el video y todo funciona pertecto.
Genial, Juan Camilo! Me alegra mucho eso 😊
Me declaro fan absoluto!
¡Muchísimas gracias, Pedro! Me alegra muchísimo que te haya gustado, ya sabes que para mi es un honor viniendo de ti, compañero ^_^ ¡Un abrazo!
Gracias, justo lo que necesitaba. Yo intentaba hacer un tilemap con una tabla en html y me estaba volviendo loco xD
Je je je pues nada, Ezequiel, un placer el poder ayudar ^_^
Muchísimas gracias!! Ha sido de muchísima ayuda :)
¡Me alegra un montón leer eso! ¡Mil gracias! :D
Cada vídeo que veo me gusta más que el anterior, pero tengo que decirte que hasta siguiéndote paso a paso, cometo errores que me llevan horas descubrir, pero siento que eso me ayuda a pensar: ¿donde esta el error para que haga lo que hace, y no lo que quiero que haga?
Gracias por tu aportación a la programación básica autodidacta jejeje.
¡Muchísimas gracias, Carlos! Te lo agradezco mucho. El que voy a subir el jueves (y que estoy terminando de montar justo ahora, creo que te va a encantar) ^_^
Lo que comentas es muy común, yo tardé 2 horas en encontrar un error en este vídeo (esa parte no la grabé pero me pasó) xD son gajes del oficio ;)
¡De nada, compañero, es un placer! Nos vemos en el vídeo del jueves ¡FELICES FIESTAS! ^_^
Muy bueno!! muy bien explicado y bastante ameno!!
Lo voy a intentar
Excelente Javier! Aprendiendo JavaScript de tu mano! Contagias la pasión con la que lo explicas! Lanzo propuesta/reto para tu valoración, ¿como verías hacer un nivel de Super Mario World? Pueden ser fases del proyecto en vídeos cortos. Saludos! :)
¡Muchas gracias, Miguel! Me alegra que te esté gustando el contenido del canal (de hecho, en media hora sale el nuevo vídeo sobre autómatas celulares en el que enseño cómo programar Wireworld) :D Respondiendo a tu pregunta: ¡SI! de hecho, ya tengo programado un juego de plataformas 2D, a pantalla partida, para 2 jugadores que además soporta gamepad. Iré dosificando los tutoriales e iremos poco a poco, pero uno de mis objetivos con este canal es: ir haciendo nuestras propias librerías para juegos (para saber cómo funciona todo) hasta clonar juegos clásicos de 8 y 16 bits ^_^ ¡Un saludo y muchas gracias! :D
A los 12 años programe el juego de la vida con GWBasic, ahora tengo 42 años, hace 20 años me pidieron algunos modelos para presentar en una olimpiada de informatica y con el lenguaje Qbasic programe el juego de la vida en 3D, fue tan bueno que una revista de informatica me hizo una entrevista e incluyo el codigo en sus paginas, hace unos 6 años vi uno similar en minecraft pero no se veía tan bien, ahora busco como encontrar con redes neuronales el comportamiento de cada celda en imagenes consecutivas al azar, como encontrarle sentido a la estática de un televisor, soy de esos que piensan que hay un mensaje oculto en el número Py ;) ;)
Los que aprendimos a programar pronto, amamos jugar con el código, porque en su día nos dedicábamos a eso: a jugar ¡Muchas gracias por tu comentario, Carlos! Ya me irás comentando tus progresos ¡Un abrazo! :)
@@javianmuniz Busque "El juego de la vida" en youtube en el formato 3d y aunque hay varios intentos, la mayoría son de dimensiones muy limitadas, me imagino por la capacidad de calculo que conlleva, el unico que me ha sorprendido mucho es el de Softology, tienes que verlo, una de sus variantes crea un impresionante símil de un hormiguero. th-cam.com/video/dQJ5aEsP6Fs/w-d-xo.html
Bastante interesante, lo veré poco a poco, como utilidad a los juegos creo recordan el juego "Lemmings" para el tema de pixelado que saltaban los pixeles y desaparecía cuando excavan la tierra. Saludos Javier
¡Muchas gracias amigo! ¡Es cierto! Lemmings utilizaba un sistema en el que los pixels eran modificables y se podían hacer agujeros y demás. Sí, aquí también estaríamos hablando de una especie de autómata celular o, al menos, se podría utilizar. Muy buen apunte, no lo recordaba. Molaría programar un Lemmings más adelante. Me lo apunto ;) ¡Un abrazo!
Excelente video, muy pro
Buenisimo!
¡Muchas gracias David! Si te ha gustado, el de Wireworld puede que te guste también. Es una adaptación de las reglas para simular circuitos eléctricos. Próximamente quiero hacer también otro sobre simulación de fluidos basado en autómatas celulares ¡Un saludo, crack! :)
wow, buen video!
Gracias Sergio! Me alegra mucho que te haya gustado :)
Te ganaste un nuevo sub bro
Se agradece mucho ese comentario y también la paciencia, Justin. Aunque me he tomado un tiempo de TH-cam, espero regresar pronto y con mucho más contenido ;) ¡Un abrazo!
Eres super majo, super buen programador y me has salvado la vida. Mil gracias Javier :)
Un Erasmus en su última asignatura desde eslovenia te da las gracias
Gracias tío! Te lo agradezco mucho 😊
Muchas Gracias de verdad me hiciste comprender mejor la forma de programar Saludos
Muy bueno! Gracias
BUENARDOOO
¡Gracias Ignacio! :)
Muchas gracias Javier, muy buenos tus videos, sin embargo siempre que veo un video tuyo donde estas codeando, no dejo de sentir incomodidad debido al desorden de código, funciones regadas por todas partes, nombres multilenguaje. Mi sugerencia es que cuando hagas estos videos (muy entretenidos muchas gracias), aplica desde el inicio algo de clean code para poder seguirlo mas fácilmente.
Gracias Fernando! Sí, tienes razón es una de mis asignaturas pendientes. Tomo nota. Un abrazo!
Buen vídeo... Nuevo sub :')
¡Hola Juan, bienvenido! Muchas gracias, amigo :D
sos un grande
Excelente video brother, muchas gracias!! :D
El video esta muy bueno, el audio perfecto lo unico incomodo producto del mic el sonido de cada vez que traga saliba...
Tomo nota! Gracias! 😊
Hola javier me ha gustado tu video y quiero aprender programar html y javascript me gustaría saber que visualizador de codigos usas para programar Gracias.
¡Hola bcq_20! muchas gracias por tu comentario :D espero que aquí aprendas muchas cosas nuevas y descubras todo un mundo nuevo de posibilidades a la hora de programar :) Con respecto al editor hay 2 que me gustan mucho: Atom (el del vídeo ) y Notepad++ (muy sencillo pero potente a la vez) ¡Un saludo! :D
@@javianmuniz muchas gracias por la respuesta
Hay un punto que no estoy entendiendo. En la funcion dibujaTablero(obj) se está ejecutando la siguiente linea:
obj[y][x].dibuja();
¿Cómo es posible siendo "dibuja()" una función del objeto "Agente" y "obj" un objeto Array creado por la función creaArray2D(f,c)? Es decir, obj esta usando una función privada que no podría estar usando. Bueno, eso es lo que no entendí. Gracias
¡Hola Ezequiel! Es un array de objetos, por eso se puede invocar al método "dibuja". De todas formas JavaScript es muy flexible en estas cosas. ¡Un saludo y gracias!
Wey tienes 777 suscriptores o: yo también estoy suscrito
¡Gracias Fran! poco a poco vamos haciendo comunidad ¡Un abrazo grande! (esta tarde... nuevo vídeo) ;)
Yo me he creado una red neuronal en el juego de la vida pero en Python
No soy para JavaScript
Yo he utilizado redes neuronales en imagenes al azar para darme una idea de cuales fueron las reglas que le dieron ese patron y así predecir cual fue la imagen de origen o cual podría ser la consecutiva
Carlos David Correa Santillan si es una manera de hacerla, hay bastantes estrategias
@@CarlosDavidCorreaSantillan ¡Qué flipe! Yo ahí me pierdo, pero me parece una pasada eso, Carlos :D
@@javianmuniz deberías hacer un "Juego de la vida" 3d como te dije antes que hice, no requiere un cambio de reglas solo tienes que rastrear las ocho celdas vecinas del plano y las 18 celdas de los planos contiguos, es como si fuera una cascara, iba decir concha pero en mi país esa palabra tiene otras implicaciones... en qbasic funciona bastante mas lento que en java pero y si haces girar el cubo puedes llegar a ver una evolución extraordinaria, hasta ahora se lo he puesto como desafio a todos los youtuber incluso los que hacen juegos en 3d y se borraron del mapa, con lo facil que es...
@@javianmuniz Podrías ver que de una imagen al azar a otra hay un cambio, podrías llegar a inferir que reglas hicieron que un pixel cambiara a cero, uno o quedase como esta en base a las celdas vecinas, pero perderías mucho tiempo, mas si la imagen es grande, las redes neuronales pueden hacer este trabajo y de paso hallar un orden subyacente mucho mas bello, como veras, soy eso que ustedes llaman friki... Espero que tu proximo paso sean los fractales
Se podría crear el juego Breakout entendiendo este Código? Como haría para que cuando el estado sea que están convinados uno desaparezca y el otro rebote en diagonal
Se podrían combinar, la verdad. Además el Breakout es un juego muy sencillo de implementar. Puede que más adelante lo programemos, como parte de los juegos clásicos :)
Lo unico que no he entendido es como la matriz reconoce a los vecinos de cada pixel.
Cada objeto pixel, tiene una copia de sus vecinos (los objetos)
aunque le cambie a 2d me sigue marcando el mismo error, que hago?
¿Lo tienes desarrollado en Python?
¡Hola Mario! No, Python es una de mis asignaturas pendientes, lo lamento.
@@javianmuniz Empezaremos con JS... Gracias.
En este vídeo se formula en Excel un simulador del 'juego de la vida', de John H. Conway, sin usar macros ni programación en VBA: th-cam.com/video/fGJQRFFJrgY/w-d-xo.html.
Que tan difícil es programarlo?
222
Busque conway de gta spainRP no esto 🤣😓