Cómo crear tu propio juego de palabras

¿Cómo funciona un juego web como Wordle? ¿Qué necesitas saber para crear tu propio juego?

No todos los juegos requieren un gran equipo de desarrollo y años de desarrollo para ser un éxito. Wordle, por ejemplo, fue creado por Josh Wardle para su socio Palak Shah en poco tiempo y, a pesar de su simplicidad y sus pocas funciones, su increíble popularidad le valió un rescate del New York Times.

¿Cómo funciona un juego web como Wordle?

Si tiene una idea para un juego simple pero adictivo que podría llamar la atención del mundo y generarle mucho dinero, es muy posible que usted mismo escriba una aplicación web como Wordle.

El marco del sitio web de Wordle es, como cualquier sitio web, HTML, un lenguaje de marcado de hipertexto. Este es el código en el que se basan todos los sitios web para decirle a su navegador dónde colocar los elementos cuando se carga la página. El sitio que está leyendo actualmente está codificado en HTML, lo que proporciona no solo el contenido real, sino también instrucciones para mostrar ese contenido, desde la posición del menú hasta el tamaño de la fuente.

Además de HTML, existe CSS, Cascading Style Sheets: este es un complemento de HTML para facilitar la disposición de los elementos, ya sean propiedades de una imagen o un bloque de texto. Con CSS, si tiene varias páginas en su sitio, puede establecer sus propiedades visuales una vez en lugar de por página.

Si quieres poder crear páginas web, necesitas aprender HTML y CSS, aunque muchos servicios te permiten hacer esto sin escribir una sola línea de código. Estos servicios ofrecen la posibilidad de arrastrar y soltar sus elementos en una interfaz muy avanzada y tomar el control de todo el HTML y CSS.

Para que un sitio sea completamente interactivo como Wordle, también necesita JavaScript para convertir páginas HTML y CSS estáticas en páginas más dinámicas, ya sea un cuadro de búsqueda o una barra de herramientas. JavaScript puede manipular video, 2D o 3D, almacenar información ingresada por el usuario, cargar datos de una base de datos, realizar cálculos, ejecutar código predefinido de acuerdo con una acción particular del usuario, etc.

Como explicó Josh Wardle a TechCrunch, Wordle se escribió en JavaScript, un código que se carga cuando se carga la página, lo que permite jugar sin conexión una vez que se completa la carga inicial. Los navegadores modernos pueden comprender y ejecutar JavaScript, que en nuestro caso carga una palabra de una base de datos, identifica la entrada del usuario y proporciona información para cada letra.

El propio Josh Wardle admite que el código del juego no es especialmente complejo, lo que explica por qué era posible descargar Wordle completo antes de que lo comprara el NYT, con todas las palabras en su base de datos. También fue posible encontrar soluciones simplemente examinando el código fuente del sitio.

¿Qué necesitas saber para crear tu propio juego?

Pero, ¿cómo creas tú mismo un juego como Wordle? La programación requiere aprendizaje, pero no necesita saber todo sobre HTML, CSS y JavaScript para crear algo al nivel de Wordle. Como se explica en Codecademy, una de las técnicas de programación utilizadas es un ciclo for que verifica cada letra ingresada y la muestra en el color apropiado.

Codecademy es uno de los sitios donde puedes aprender HTML, CSS, JavaScript y muchos otros lenguajes de desarrollo web de forma gratuita. Los ejercicios están bien estructurados y siempre aprendes haciéndolos directamente en tu navegador. Verás cómo hacerlo y podrás ver las consecuencias directamente. Algunas funciones y tutoriales avanzados requieren una suscripción paga, pero ya se puede aprender mucho de forma gratuita.

Treehouse va más allá que Codecademy y debe pagar $ 25 / mes para usarlo (prueba gratuita disponible). Es un recurso más profesional y eficiente para aprender HTML, CSS, JavaScript y más, pero va mucho más allá de lo que necesitas para un juego como Wordle. Considera si quieres ir más allá.

Lo opuesto a Tree House, Dash . El sitio solo cubre los conceptos básicos de HTML, CSS y JavaScript, pero es completamente gratuito y especialmente apto para principiantes. Todo se administra directamente en su navegador y, al igual que Codecademy, aprende haciendo para aprovechar al máximo lo que estos lenguajes tienen para ofrecer.

Esta lista está lejos de ser exhaustiva, especialmente porque estos son solo recursos en inglés, puede encontrarlos fácilmente en francés, pero son una buena base para comenzar a aprender sobre HTML, CSS y JavaScript. Depende de ti jugar… ¡y codificar!