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

오늘은 지난 작업물에 이어 코드 분리와 기능 추가를 약간 진행했다.

 

우선 html, js, css가 모두 한 파일 내 존재하던 소스를 분리해달라고 요청했다.

 

9. 위 통합소스를 html과 js, css 파일로 분리한 구조로 다시 작성해줘

-> index.html, game.js, styles.css 의 3개 구조로 분리해줌

 

10. 위 소스에서 가운데 콘솔 화면 왼쪽으로 항상 캐릭터의 상태를 확인할수 있는 상태창 영역을 추가하고 관련 기능을 추가해줘

-> 좌측으로 고정 사이드바를 추가하고 상태를 항상 확인할 수 있도록 관련 기능 game.js 에 추가/수정 해줌

 

11. 위 소스에서 스테이터스창에서 스킬포인트를 사용할 수 있는 버튼과 기능을 추가해줘

-> 기존 스킬포인트는 alert 창에 직접 입력하는 방식이었기 때문에 요청하였고 스킬포인트가 있으면 버튼이 활성화되어 직관적으로 사용할 수 있도록 수정해줌

 

12. 위 소스에서 전투에서 승리하면 몬스터의 등급에 따라 골드를 드랍하고 획득한 골드는 스테이터스창에서 확인할 수 있도록 수정해줘

-> 골드를 드랍하게 기능을 추가하였고, 좌측 상태창에서 확인가능하도록 수정해줌.

 

위 4개 질의를 통해 화면이나 구성이 좀더 그럴듯해졌고 추후 상점 등의 기능을 추가할 기반이 마련되었다.

 

추후 상점 기능 추가(회복아이템 등), 스킬 시스템 추가 등으로 확장해보도록 하겠다.

 

https://ggoban.com/hof/

Hall of Fame Game