[7 Day] Fun Game Development with AI

It's been a week since we started creating a web game based on D&D5e with Perplexity.AI.

Today, we focused more on improving the internal architecture for a more robust game rather than adding content.

★ Layered Canvas Implementation

Instead of using a single canvas, we separated it into three canvases (background, ui, character).

This approach allows us to redraw only the necessary parts instead of the entire canvas, resulting in a more efficient update process.

According to (the) AI, this improves overall performance. ㅎㅎ

I learned something new this time: without canvas save and restore, each element affects each other.

To accurately represent elements on the canvas as intended, use save and restore.

★ Switch to ESM

Previously, all js files were loaded using <script> in html, but as the code was divided, the amount of js increased...

Initially, I tried using require.js, clinging to old habits, but the AI taught me modern techniques.

Thanks to that, I successfully refactored the code using ESM. Now, no matter how much the code grows,

As shown above, only the main.js declared as a module is included in the index.html. It looks good.

After improving the overall structure in this manner, we could add the following features:

★ Facility Interaction Implementation

Entering a facility displays choices in the dialog box, allowing interaction through clicks (touches).

This will be a fundamental feature for adding various systems in the future. There were many bugs and revisions during the addition, but

it works fine now, so it's OK.

Now, choices appear in the dialog box, and clicking them works correctly. The location indicator above is also displayed correctly.

And in combat, effects are displayed according to the attack result, as shown below!

If a hit occurs, "Hit!" is displayed, and if a critical hit occurs, "Critical!" is displayed. This didn't work well yesterday, but it does now, hehe...

By organizing the code and improving the structure, the implemented features work as expected.

Since all images are loaded at the beginning of the game, a loading screen has also been implemented as shown below.

It feels more like a game now.

The basic groundwork seems to be complete, so I'll start implementing the next stage.

First, I'll implement a spell system for casters, additional actions for rogues and fighters, and

events triggered during exploration, quests, rest, item trading, scenarios, etc. through interactions in town...

Oh dear... there's still a lot to do!?

Still, it's fun moving forward with the AI's help.

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

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