[3편] AI로 30분 만에 웹 게임 만들어 보기.

갑분 시리즈가 되었지만 재밌으므로 오케이다.

이젠 조금씩 버그와 소소한 수정을 위한 질의들이 늘어나기 때문에

모든 질의를 다 기록하긴 어려울것 같지만 적어보자.

Q13. 위 게임에서 콘솔영역 위로 배경이미지와 캐릭터, 몬스터를 보여줄 캔버스 영역을 추가해줘

-> 이후부터는 그래픽도 추가하기 위해 해당 질의를 요청하였고, 캔버스 영역을 추가해주면서 각각의 필요한 기능들을 분리한 3개의 파일에 추가하여 줌. 이때 배경, 캐릭터, 몬스터를 그릴 수 있는 기능과 함께 캐릭터와 몬스터 위로 healthbar를 추가하여 주었음. (와우), 각각의 hero, goblin, orc, troll, dragon, background 는 직접 준비해야 한다고 하여 새로운 탭으로 역시 perplexity에 이미지 생성을 요청 (flux 모델 illustrator 타입)

한글로 입력시 정상적으로 이미지 생성이 잘 되지않아 아래와 같이 요청

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. 전체 소스를 다시 한번 출력해줘

-> 반영을 위해 전체 출력 요청을 하였음.

Q15. game.js 파일 끝부분이 누락되었어. 해당 파일만 다시 출력해줘

-> game.js 파일 끝부분에 약간의 누락이 생겨 해당 파일만 재 출력 요청

Q16. game.js 파일이 너무 길어. 주요 기능별로 분리할 수 있을까?

-> 하나의 js파일이 너무 길어지다 보니 추후 관리를 위해 기능별 분리 요청하였고 아래와 같이 반영해주었음

네, 물론입니다. game.js 파일을 주요 기능별로 분리하여 더 관리하기 쉽게 만들 수 있습니다. 다음과 같이 파일을 분리해 보겠습니다:

characters.js: Character, Player, Monster 클래스 정의
items.js: Weapon, Armor 클래스 및 관련 데이터 정의
game.js: Game 클래스 및 주요 게임 로직
ui.js: UI 관련 함수 (캔버스 그리기, 상태 업데이트 등)
main.js: 게임 초기화 및 실행 관련 함수

Q17. main.js 파일이 누락되었어. 해당 파일만 다시 출력해줘

-> 마지막 5번째 파일이 역시 끝에 누락이 생겨 재출력을 요청

Q18. 분리한 js 파일들을 포함하도록 html 소스를 다시 출력해줘

-> 분리한 파일들을 포함하는 html 소스 출력 요청

Q19. healthbar 가 전투 중에는 canvas에 출력되지 않는 버그가 있어. 소스를 확인하고 수정해줘.

-> 정상적으로 출력되나 최초에만 health 바가 노출되고 전투중에는 나오지 않아 수정 요청

Q20. ui.js 에서 monsterImage 를 draw 할때 에러가 발생해. 수정해줘

-> 기능 중 오류가 발생하여 수정 요청

여기까지 해서 점심 시간 작업 마무리 하였고 결과물은 잘 동작합니다.

https://ggoban.com/hof/