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

It became a sudden series, but it's fun, so it's okay.

Now, the number of inquiries for bugs and minor corrections is increasing little by little, so

It seems difficult to record all the inquiries, but let's write them down.

Q13. In the game above, add a canvas area to display the background image, characters, and monsters above the console area.

-> From then on, this inquiry was requested to add graphics, and while adding the canvas area, I added it to 3 files that separated the necessary functions. At this time, I added the function to draw the background, characters, and monsters, along with the health bar above the characters and monsters. (Wow), I was told that I had to prepare hero, goblin, orc, troll, dragon, and background images myself, so I requested image generation in a new tab using perplexity (flux model illustrator type).

Image generation does not work properly when inputting in Korean, so I requested as follows:

Q13.1. fantasy, hero, right side, 2d pixel, 100x100size, character draw

Q13.2. fantasy, goblin, right side, 2d pixel, 100x100size, character draw

Q13.3. fantasy, orc monster, left side, 2d pixel, 100x100size, draw it.

13.4. fantasy, troll monster, left side, 2d pixel, 100x100size, draw it.

13.5. fantasy, dragon monster, left side, 2d pixel, 100x100size, draw it.

13.6. fantasy, forest, width 800pixel, height 400pixel, draw images

Q14. Please output the entire source code again.

-> Requested a full output for reflection.

Q15. The end of the game.js file is missing. Please output only that file again.

-> A small part of the end of the game.js file was missing, so I requested a re-output of that file only.

Q16. The game.js file is too long. Can it be separated by major functions?

-> Because one js file became too long, I requested separation by function for future management, and it was reflected as follows.

Yes, of course. The game.js file can be separated by major functions to make it easier to manage. Let's separate the files as follows:

characters.js: Character, Player, Monster class definitions
items.js: Weapon, Armor classes and related data definitions
game.js: Game class and main game logic
ui.js: UI related functions (canvas drawing, status updates, etc.)
main.js: Game initialization and execution related functions

Q17. The main.js file is missing. Please output only that file again.

-> The last fifth file was also missing at the end, so I requested a re-output.

Q18. Please output the html source code again to include the separated js files.

-> Requested output of the html source code including the separated files.

Q19. There is a bug where the health bar is not displayed on the canvas during combat. Please check the source code and fix it.

-> It is displayed normally, but the health bar is only shown initially and not during combat, so I requested a correction.

Q20. An error occurs when drawing monsterImage in ui.js. Please fix it.

-> An error occurred during the function, so I requested a correction.

This concludes the lunchtime work, and the results work well.

Hall of Fame