[Część 3] Stwórz grę WWW w 30 minut z wykorzystaniem AI.

Nagle seria pytań, ale skoro jest zabawnie, to ok.

Teraz pojawia się coraz więcej błędów i drobnych poprawek, więc

złożenie dokumentacji wszystkich zapytań wydaje się niemożliwe, ale spróbujmy.

P13. Dodaj do gry obszar canvasu, który wyświetlałby tło, postacie i potwory nad obszarem konsoli.

-> Następnie, aby dodać grafikę, wysłano to zapytanie. Dodano obszar canvasu i dodano do 3 oddzielnych plików niezbędne funkcje. Dodano funkcje rysowania tła, postaci i potworów, a także pasek zdrowia (HP bar) nad postaciami i potworami. (Wow!), hero, goblin, orc, troll, dragon i background trzeba przygotować samemu, więc w nowej zakładce poproszono Perplexity o wygenerowanie obrazków (model Flux, typ ilustracji).

Wprowadzanie tekstu w języku polskim nie działało prawidłowo, więc wysłano następujące zapytanie:

P13.1. fantasy, hero, prawa strona, 2d pixel, rozmiar 100x100, narysuj postać

P13.2. fantasy, goblin, prawa strona, 2d pixel, rozmiar 100x100, narysuj postać

P13.3. fantasy, potwór orc, lewa strona, 2d pixel, rozmiar 100x100, narysuj go.

13.4. fantasy, potwór troll, lewa strona, 2d pixel, rozmiar 100x100, narysuj go.

13.5. fantasy, potwór smok, lewa strona, 2d pixel, rozmiar 100x100, narysuj go.

13.6. fantasy, las, szerokość 800 pikseli, wysokość 400 pikseli, narysuj obrazki

P14. Wypisz jeszcze raz cały kod źródłowy.

-> Zapytanie o wypisanie całego kodu źródłowego w celu wdrożenia zmian.

P15. Brakuje końca pliku game.js. Wypisz ponownie tylko ten plik.

-> Z powodu brakującego fragmentu na końcu pliku game.js, wysłano prośbę o ponowne wypisanie tylko tego pliku.

P16. Plik game.js jest zbyt długi. Czy można go podzielić na mniejsze pliki według funkcji?

-> Ze względu na zbyt dużą długość pliku js, wysłano prośbę o podzielenie go na mniejsze pliki według funkcji, co zostało zrealizowane w następujący sposób:

Tak, oczywiście. Plik game.js można podzielić na mniejsze pliki według funkcji, aby ułatwić zarządzanie. Oto podział plików:

characters.js: Definicja klas Character, Player, Monster
items.js: Definicja klas Weapon, Armor i powiązanych danych
game.js: Klasa Game i główna logika gry
ui.js: Funkcje związane z interfejsem użytkownika (rysowanie canvasu, aktualizacja stanu itd.)
main.js: Funkcje inicjalizacji i uruchamiania gry

P17. Brakuje pliku main.js. Wypisz ponownie tylko ten plik.

-> Brakujący piąty plik został ponownie wypisany na prośbę.

P18. Wypisz ponownie kod HTML, aby uwzględnić podzielone pliki JS.

-> Zapytanie o wypisanie kodu HTML zawierającego podzielone pliki.

P19. Pasek zdrowia (healthbar) nie jest wyświetlany na canvasie podczas walki. Sprawdź kod i popraw błąd.

-> Pasek zdrowia jest wyświetlany tylko na początku, a podczas walki znika, dlatego wysłano prośbę o poprawienie błędu.

P20. Wystąpił błąd podczas rysowania monsterImage w pliku ui.js. Proszę o poprawienie.

-> Zgłoszono błąd w funkcji i wysłano prośbę o naprawę.

Na tym zakończyłem pracę przed obiadem, a wynik działa poprawnie.

https://ggoban.com/hof/