[Part 4] Creating a Web Game in 30 Minutes with AI.

I've never been so diligent in posting articles before... but this new tool is so fun that I'm becoming a diligent serial poster.

Here are the improvements:

1. Critical hit chance and critical damage stats have been added to characters (players, monsters). During combat, stronger damage than usual occurs depending on the critical hit chance.

1.1. Critical hit chance can now be increased when leveling up.

2. Monster appearance probability has been changed from the previous method (simple random) to a weighted system where monsters are generated according to their weights.

2.1. The number of monster types has been increased from 4 to 12.

3. Added the ability to purchase healing potions (3 types) from the shop after battles, using the gold obtained.

3.1. The shop can only be used after a battle. The current state (idle, battle, shop) is managed, and the UI radius changes accordingly.

3.2. Added logic to the shop UI so that items can be purchased from the shop and the character's HP can be restored.

(Added) 4. Added responsive CSS considering mobile devices.

4.1. I asked for responsive CSS, and it was fixed in a snap. Amazing...

(Added) 5. Modified button display status according to each state.

5.1. Buttons were displayed in all states, causing inconveniences such as the game resetting when pressing "start game" again. This has been fixed so that buttons are displayed according to their respective states.

(Added) 6. Solved the problem where the battle turn was progressing twice.

6.1. I requested a fix for this once, but there was no problem with the battleTurn() function. However, upon reviewing the related parts, I found that there was a duplication of event handling; an onclick event in the HTML and an event listener injected from main.js. I reported this to perplexity, and received this reply. ㅎㅎ

(Added) 7. Minor changes: Player and monster names are now displayed above the health bar during battle, and the background has been changed.
7.1. The new background seems to fit better. I plan to modify it so that the player can set their character's name at the start.

(Added) 8. Added mana to players and monsters. Names can now be set before playing.
8.1. Modified so that players can set their name at the beginning and the game proceeds with that name.

8.2. Mana has been added to players and monsters, and it is displayed on the canvas.

8.3. I plan to improve the game so that skills can be purchased randomly from the shop (like in a roguelike game) and used in battle. (Skills will be purchased like in a roguelike game – expanding in a specific tree order).

Actually, it now takes more than 30 minutes a day, unlike the title suggests.

If I hadn't separated the files by function, I would have suffered at this stage...

Still, after finishing the work today, it seems to have a fairly decent shape of a simple web game, although it's simple.

ㅎㅎ

Test address: https://ggoban.com/hof/