[7 Días] Creación de juegos divertida con IA

Ya ha pasado una semana desde que comenzamos a crear un juego web basado en D&D5e con Perplexity.AI.

Hoy, en lugar de centrarnos en el contenido, hemos dedicado más tiempo a mejorar la arquitectura interna del juego para hacerlo más robusto.

★ Uso de lienzo en capas

En lugar de usar un solo lienzo, lo hemos dividido en tres (fondo, interfaz de usuario, personaje).

De esta manera, en lugar de volver a dibujar todo, solo se actualiza y combina la parte que necesita ser renovada,

lo que (según la IA) ayuda a mejorar el rendimiento general. ㅎㅎ

Además, algo que aprendí esta vez, es que si no se usan las funciones "save" y "restore" al trabajar con lienzos, los elementos se afectan mutuamente,

por lo que si se desea representar con precisión en el lienzo, se deben utilizar "save" y "restore".

★ Cambio al modo ESM

Anteriormente, todo el código JavaScript se cargaba en el archivo HTML mediante la etiqueta <script>, pero a medida que el código se dividía, la cantidad de JavaScript aumentaba...

Por eso, al principio, por inercia, intenté usar require.js, pero la IA me enseñó una tecnología más moderna.

Gracias a eso, lo reestructuré correctamente usando el modo ESM. Ahora, sin importar cuánto aumente el código,

Como se muestra arriba, solo main.js, declarado como módulo, se incluye en index.html. Se ve mucho mejor.

Después de mejorar la estructura general de esta manera, pudimos agregar las siguientes funciones.

★ Implementación de la interacción con las instalaciones

Al entrar en una instalación, aparecen opciones en la ventana de diálogo, y se puede interactuar haciendo clic (o tocando).

Esta será una función básica para agregar varios sistemas en el futuro. Aunque hubo muchos errores y correcciones durante la adición,

ahora funciona correctamente, así que está aprobado.

Ahora, las opciones aparecen en la ventana de diálogo, y al hacer clic, funcionan correctamente. La indicación de ubicación también se muestra correctamente arriba.

¡Y en la batalla, los efectos se muestran de acuerdo con el resultado del ataque, como se muestra a continuación!

Si hay un acierto, ¡se muestra "Hit!" y si hay un crítico, ¡se muestra "Critical!" Esto tampoco funcionaba bien ayer, jejeje...

En general, al organizar el código y mejorar la estructura, se siente que las funciones implementadas funcionan como se esperaba.

Y como todas las imágenes se cargan al comienzo y luego inicia el juego, también se implementó una pantalla de carga como la que se muestra a continuación.

Bueno... ahora se siente más como un juego.

Parece que la organización y la base están listas, así que empezaré a implementar la siguiente etapa.

Primero, implementaré el sistema de hechizos para las clases de lanzadores de conjuros, las acciones adicionales para las clases de pícaro y guerrero, y

eventos que se activan durante la exploración (no en combate), interacciones en la aldea que conducen a misiones, descanso, comercio de artículos, escenarios, etc...

¡Vaya... todavía queda mucho por hacer!?

Pero con la ayuda de la IA, seguiremos adelante con entusiasmo.

Dirección de prueba: https://ggoban.com/d2ng/

Dirección de GitHub: https://github.com/d2ng/