[7 Giorni] Creazione di un gioco divertente con l'AI

È già passata una settimana da quando abbiamo iniziato a creare un videogioco web basato su D&D5e con Perplexity.AI.

Anche oggi, invece di concentrarci sui contenuti, abbiamo dedicato più tempo al miglioramento dell'architettura interna per rendere il gioco più solido.

★ Utilizzo di canvas stratificati

Invece di utilizzare una singola canvas, abbiamo separato la canvas in tre (sfondo, interfaccia utente, personaggio).

In questo modo, invece di ridisegnare l'intera scena, vengono aggiornate solo le parti che necessitano di un refresh, e poi vengono combinate.

Questo dovrebbe migliorare le prestazioni generali, a detta dell'(AI). ㅎㅎ

Ho imparato anche questo: se non si usano save e restore nelle operazioni sulla canvas, i singoli elementi si influenzano a vicenda.

Se si vuole rappresentare con precisione sulla canvas ciò che si desidera, è necessario utilizzare save e restore.

★ Passaggio al metodo ESM

In precedenza, in html, tutto il codice js veniva caricato tramite <script>, ma con la suddivisione del codice, la quantità di js aumentava sempre di più...

Quindi, inizialmente, per abitudine, volevo usare require.js, ma l'intelligenza artificiale mi ha insegnato una tecnologia più moderna.

Grazie a questo, ho potuto ristrutturare il codice in modo efficiente utilizzando il metodo ESM. Ora, non importa quanto aumenti il codice,

Come mostrato sopra, solo main.js, dichiarato come module, è incluso in index.html. È molto più ordinato.

Dopo aver migliorato la struttura generale in questo modo, è stato possibile aggiungere le seguenti funzionalità.

★ Implementazione dell'interazione con le strutture

Entrando in una struttura, nella finestra di dialogo vengono visualizzate delle opzioni e si può interagire tramite clic (o tocco).

Questa sarà una funzionalità fondamentale per l'aggiunta di vari sistemi in futuro. Durante l'aggiunta, ci sono stati molti bug e modifiche da apportare,

ma ora funziona correttamente, quindi OK.

Ora le opzioni vengono visualizzate nella finestra di dialogo e funzionano correttamente quando si clicca. Anche l'indicazione della posizione funziona correttamente.

E anche nel combattimento, a seconda del risultato dell'attacco, viene visualizzato un effetto come mostrato di seguito!

Se si colpisce, viene visualizzato "Hit!" e se si ottiene un colpo critico, viene visualizzato "Critical!" Anche questo ieri non funzionava correttamente, hahaha...

In generale, dopo aver riorganizzato il codice e migliorato la struttura, le funzionalità implementate funzionano come previsto.

Poiché tutte le immagini vengono caricate all'inizio del gioco, è stata implementata anche una schermata di caricamento come quella qui sotto.

Beh... ora sembra davvero un gioco.

Credo di aver completato la fase di organizzazione e di consolidamento delle basi, quindi inizierò a implementare la fase successiva.

Per prima cosa, implementerò il sistema di incantesimi per le classi di incantatore, le azioni aggiuntive per le classi di ladro e guerriero,

gli eventi che si verificano durante l'esplorazione, le quest, il riposo, il commercio di oggetti e gli scenari tramite interazioni nel villaggio, ecc...

Oh, c'è ancora molto da fare!?

Comunque, grazie all'aiuto dell'AI, andrò avanti con entusiasmo.

Indirizzo di prova: https://ggoban.com/d2ng/

Indirizzo Github: https://github.com/d2ng/