[7 dagen] Leuk game maken met AI

Het is alweer een week geleden dat we met Perplexity.AI begonnen zijn aan de ontwikkeling van een webgame gebaseerd op D&D5e.

Vandaag hebben we ons meer gericht op het verbeteren van de interne architectuur voor een nog robuustere game in de toekomst dan op het toevoegen van content.

★ Gebruik van gelaagde canvas

In plaats van één canvas te gebruiken, hebben we drie afzonderlijke canvas (background, ui, character) aangemaakt.

Op deze manier hoeven we niet het hele canvas opnieuw te tekenen, maar alleen de delen die moeten worden bijgewerkt. We tekenen deze delen opnieuw en voegen ze vervolgens samen.

Dit zou (volgens de AI) de algehele prestaties moeten verbeteren. Haha.

Ik heb tijdens dit proces ook geleerd dat als je bij het werken met canvas geen gebruik maakt van save en restore, de verschillende elementen elkaar kunnen beïnvloeden.

Als je elementen precies wilt weergeven zoals je wilt, moet je save en restore gebruiken.

★ Overgestapt op ESM

Voorheen laadden we alle js-bestanden in de html met <script>. Maar naarmate de code steeds meer werd opgesplitst, groeide het aantal js-bestanden enorm...

Aanvankelijk wilde ik, vanuit een oude gewoonte, require.js gebruiken, maar de AI heeft me een modernere techniek geleerd.

Dankzij de AI heb ik de code succesvol omgezet naar ESM. Nu kunnen we zoveel code toevoegen als we willen, zonder problemen.

Zoals je ziet, wordt alleen main.js (aangegeven als module) in index.html genoemd. Het ziet er netjes uit.

Na het verbeteren van de structuur, konden we de volgende functionaliteiten toevoegen:

★ Implementatie van interactie met faciliteiten

Wanneer je een faciliteit betreedt, verschijnen er keuzes in het dialoogvenster, en kun je via klikken (of tikken) interageren.

Dit zal de basis vormen voor het toevoegen van diverse systemen in de toekomst. Er waren wel wat bugs en wijzigingen nodig tijdens de implementatie, maar...

Nu werkt het goed, dus alles is OK.

Nu verschijnen er keuzes in het dialoogvenster, en werken de interacties correct. De locatie-aanduiding werkt ook goed.

En tijdens gevechten worden effecten weergegeven afhankelijk van het resultaat van de aanval!

Bij een treffer verschijnt "Hit!" en bij een kritische treffer "Critical!" Dit werkte gisteren nog niet goed, haha...

Door de code op te schonen en de structuur te verbeteren, werken de geïmplementeerde functies veel beter dan verwacht.

Omdat we alle afbeeldingen vooraf laden, hebben we ook een laadscherm kunnen implementeren.

Het voelt nu echt als een game.

De basis is gelegd, dus we gaan nu verder met de volgende fase.

We gaan eerst een spreukensysteem voor casters, extra acties voor rovers en vechters, en andere systemen implementeren.

Daarna komen de gebeurtenissen tijdens exploratie, quests, rusten, handel, en het scenario in het dorp...

Hé, er is nog zoveel te doen!?

Maar met de hulp van de AI gaan we vrolijk verder.

Test adres: https://ggoban.com/d2ng/

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