[7 dni] Tworzenie wciągającej gry z AI

Minął już tydzień odkąd rozpoczęliśmy tworzenie gry webowej w oparciu o D&D5e z Perplexity.AI.

Dzisiaj skupiliśmy się bardziej na ulepszeniach wewnętrznej architektury gry, niż na dodawaniu nowych treści, aby zapewnić jeszcze większą stabilność.

★ Użycie warstwowego płótna (Layered Canvas)

Zamiast jednego płótna, używamy teraz trzech oddzielnych płócien (background, ui, character).

Dzięki temu, zamiast przeрисовывать całe płótno, odświeżamy tylko te części, które wymagają aktualizacji, a następnie łączymy je.

Według (AI) powinno to poprawić ogólną wydajność. ㅎㅎ

Dowiedziałem się też, że podczas pracy z płótnem, brak funkcji save i restore powoduje wzajemne oddziaływanie elementów.

Jeśli chcemy precyzyjnie wyświetlać elementy na płótnie, należy użyć funkcji save i restore.

★ Zmiana na modułowy system ESM (ECMAScript Modules)

Wcześniej ładowaliśmy wszystkie skrypty JavaScript za pomocą tagów <script> w HTML. Jednak wraz z rozrostem kodu, ilość plików JavaScript rosła...

Początkowo, kierując się wspomnieniami z przeszłości, chciałem użyć require.js, ale AI podpowiedziało mi nowocześniejsze rozwiązanie.

Dzięki temu udało się przerobić kod na system ESM. Teraz, niezależnie od wielkości kodu,

W pliku index.html odwołujemy się tylko do pliku main.js, zadeklarowanego jako moduł. Wygląda to znacznie lepiej.

Po ulepszeniu struktury, udało się dodać następujące funkcje:

★ Implementacja interakcji z budynkami

Po wejściu do budynku, w oknie dialogowym pojawiają się opcje wyboru, umożliwiające interakcję poprzez kliknięcie (dotknięcie).

Będzie to podstawa dla dodawania kolejnych systemów. Podczas implementacji napotkaliśmy kilka błędów i koniecznych było sporo poprawek, ale

teraz wszystko działa poprawnie, więc OK.

Teraz w oknie dialogowym pojawiają się opcje wyboru, a po kliknięciu wszystko działa poprawnie. Wskazanie lokalizacji również działa prawidłowo.

W trakcie walki, efekty wizualne są wyświetlane w zależności od wyniku ataku!

W przypadku trafienia wyświetlane jest "Hit!", a w przypadku trafienia krytycznego - "Critical!". Jeszcze wczoraj to nie działało, hehe...

Po uporządkowaniu kodu i ulepszeniu struktury, zaimplementowane funkcje działają zgodnie z oczekiwaniami.

Ponieważ wszystkie obrazy są ładowane na początku gry, udało się zaimplementować ekran ładowania, jak poniżej.

Cóż... teraz gra wydaje się bardziej dopracowaną.

Uważam, że udało się uporządkować i przygotować podstawy, więc przechodzę do kolejnego etapu implementacji.

Na początek zaimplementuję system zaklęć dla klas postaci typu caster, dodatkowe akcje dla klas łotrzyka i wojownika, a także

wydarzenia uruchamiane podczas eksploracji, interakcje w wiosce, takie jak zadania, odpoczynek, handel i scenariusze itp...

Ojej... jeszcze dużo pracy przede mną!?

Ale dzięki AI, idę dalej z radością.

Adres testowy: https://ggoban.com/d2ng/

Adres GitHub: https://github.com/d2ng/