취미
[2 Day] AI와 함께하는 즐거운 게임 제작

2일차 입니다. 하루만에 꽤나 코드의 양과 복잡도가 슬슬 증가하고 있습니다.우선 전체적으로 구조를 정리했습니다.CSS, JS, Image는 모두 폴더 별로 위치 시켰습니다.js파일들은 최대한 기능별로 분리를 해가며 추가해가고 있습니다.던전에서 전투를 추가하기 위해 battle.js 와 monster.js를 추가했습니다.캐릭터 생성도 일부 수정하였습니다.D&D5 공개된 룰북을 기준으로 플레이어는 4개 종족/4개 직업을 선택 가능하고종족과 직업별로 스탯이 다르게 생성됩니다.몬스터도 D&D5 룰북 기준으로 추가하였고, 탐험 중 전투가 발생하면양쪽의 민첩으로 굴림을 진행해 선/후공을 정해 전투가 발생합니다.기본적인 전투는 현재 D&D5룰에 의해 진행된다고 보시면 됩니다.(AI가 다 알아서 만들어 주더라고요..)..

취미
[1 Day] AI와 함께하는 즐거운 게임 제작

새로운 프로젝트로 돌아왔습니다. 전편에서 느낀 점들이 많았기에 이번에는 초반부터 구조를 잡아두고 시작하기로 했습니다. 새로운 Thread를 생성하고 제일 처음 아래와 같은 질의를 했습니다. Q1. 앞으로 javascript와 html, css로 게임을 작성할 거야.Q2. 기본적은 구성은 다음과 같아. 게임은 마을에서 시작하고, 마을은 여관(휴식으로 체력과 마나 회복), 상점(일반적인 소모품 구매 및 판매), 길드(퀘스트와 스킬 제공), 대장간(무기와 방어구 제작과 구매 및 판매), 던전(지하 100층으로 매층마다 몬스터와 전투, 5층 구간에선 중간보스, 10층 구간은 층간보스, 100층은 최종보스 등장)이 있어.A2. 그렇군요! 매우 흥미로운 게임 컨셉입니다. 이 게임의 구조를 좀 더 구체화하고 구현하기..

취미
[5편] AI로 30분 만에 웹 게임 만들어 보기. -마지막-

우선 오늘은 꽤 오래 뚝딱 뚝딱 이것저것 추가한다고 오래 붙들고 있었다. 하지만 해보면서 느낀건 AI도 만능은 아니다.-> 기능이 점점 추가되고 코드가 길어질 수록 조금씩 퀄리티가 내려가고 버그가 생기는데 바로바로 해결되지 않아 결국 디버깅 걸고 내가 하나씩 추적해야 되는 일이 생김 처음부터 구조를 잘 구상해놓고 해야된다.-> 조금씩 조금씩 기능을 붙여가다 보니 단순했던 로직 안에 우겨넣다보니 나중엔 한계가 금방 나오더라. 이게 단순 전투에서 -> 자동 전투 -> 룰북을 추가 -> 룰북안에 페이지 추가 -> 페이지에 조건을 설정해서 해당 조건으로 전투를 수행 -> 일반 평타, 스킬 사용을 룰북에 설정하도록 추가 이렇게 주먹구구로 기능을 붙여나갔더니 제대로 동작시키기 어려워 지더라.. 상점에서 스킬도 판매..

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

이렇게 성실하게 글를 올린 적이 없었는데.. 신문물이 너무 재밌다 보니 성실 연재가 되가고 있습니다. 우선 개선 사항은 아래와 같습니다. 1. 캐릭터(플레이어, 몬스터)에 크리티컬 확률과 크리티컬 데미지 능력치가 추가되어 전투중 크리티컬 확률에 따라 평상시보다 강한 데미지가 발생  1.1. 레벨업 시 크리티컬 확률도 올릴수 있도록 수정 2. 몬스터의 출현확률을 기존(단순 랜덤) 에서 몬스터에 가중치를 부여하고 가중치에 따라 생성되도록 수정  2.1. 몬스터의 종류를 기존 4종에서 12종으로 추가 3. 드랍하는 골드를 활용할 수 있도록 전투 후 상점에서 힐링포션(3종류)를 구매할 수 있도록 추가  3.1. 전투 이후에만 상점을 이용할 수 있도록 현재 상태(idle, battle, shop) 상태를 관리하고..

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

갑분 시리즈가 되었지만 재밌으므로 오케이다. 이젠 조금씩 버그와 소소한 수정을 위한 질의들이 늘어나기 때문에 모든 질의를 다 기록하긴 어려울것 같지만 적어보자. 13. 위 게임에서 콘솔영역 위로 배경이미지와 캐릭터, 몬스터를 보여줄 캔버스 영역을 추가해줘-> 이후부터는 그래픽도 추가하기 위해 해당 질의를 요청하였고, 캔버스 영역을 추가해주면서 각각의 필요한 기능들을 분리한 3개의 파일에 추가하여 줌. 이때 배경, 캐릭터, 몬스터를 그릴 수 있는 기능과 함께 캐릭터와 몬스터 위로 healthbar를 추가하여 주었음. (와우), 각각의 hero, goblin, orc, troll, dragon, background 는 직접 준비해야 한다고 하여 새로운 탭으로 역시 perplexity에 이미지 생성을 요청 (..

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

오늘은 지난 작업물에 이어 코드 분리와 기능 추가를 약간 진행했다. 우선 html, js, css가 모두 한 파일 내 존재하던 소스를 분리해달라고 요청했다. 9. 위 통합소스를 html과 js, css 파일로 분리한 구조로 다시 작성해줘-> index.html, game.js, styles.css 의 3개 구조로 분리해줌 10. 위 소스에서 가운데 콘솔 화면 왼쪽으로 항상 캐릭터의 상태를 확인할수 있는 상태창 영역을 추가하고 관련 기능을 추가해줘-> 좌측으로 고정 사이드바를 추가하고 상태를 항상 확인할 수 있도록 관련 기능 game.js 에 추가/수정 해줌 11. 위 소스에서 스테이터스창에서 스킬포인트를 사용할 수 있는 버튼과 기능을 추가해줘-> 기존 스킬포인트는 alert 창에 직접 입력하는 방식이었기..

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

기본적으로 컴공을 전공하고 인프라, 웹, DB, 클라우드, 리눅스 등등 필드에서 업무를 수행하는 입장이면서도 AI에 대해 큰 효용감을 느끼지 못하던 쪽이었다. 그러다 SKT와 perplexity 프로모션으로 1년 pro 사용권을 얻게 되었기에 어떻게 잘 사용해볼까 고민해보다가 웹 게임을 만들어 보기로 했다. 내가 입력한 프롬프트는 아래와 같다. 1. Hall of Fame 이라는 웹게임에 대해 알고 있어?2. Hall of Fame 같은 웹게임 소스를 생성해줘. (python 코드 생성 됨)3. 위 소스를 자바스크립트와 html 베이스로 수정해줘.4. 위 소스에서 주인공의 상태를 확인할 수 있게 수정해줘. (python 코드 생성 됨)5. 자바스크립트로 변경해주고 위에 통합 소스에 반영해줘.6. 위 통합..

Work
[모니터링] influxdb 2과 grafana 연동 시 과거 alias by 대체하기

과거 influxdb 1에서 grafana 연동 후 사용하는 쿼리는 influxql 기반으로 호출을 하였었고 호출한 데이터의 legend를 위와 같이 ALIAS BY로 재정의 할 수 있었다. 그러나 최근 influxdb 2 기반에서는 사용하는 쿼리가 flux로 변경이 되었고 grafana 에서 과거와 같이 alias by 를 사용할 수 없어 대체 방법을 찾아보았고 아래와 같은 방법으로 사용하면 된다. 오른쪽의 Overrides 탭을 선택하여 Fields with name 추가 후 변경하고자 하는 Legend 를 선택하고 Add override property를 클릭하여 Standard options > Display name을 추가한 뒤 사용하고자 하는 필드명을 입력한다. 끝. 참고사이트 : 정규표현식의..

Work/PROJECT
좌충우돌 개발기 -1-

회사 그룹웨어가 약...간.. 조..금... 그래서 참다참다 조금 구조좀 파악해보고 익스텐션을 만들기로 했다. 처음엔 뭐 유명한 많은 다른 사이트들 확장 프로그램처럼 페이지 내에서 여러가지 옵션과 편의기능을 넣으려고 했는데... 하.. 딥빡.. 구조 자체가 프레임-프레임-프레임-프레임 으로 다중으로 호출되고 내부에서 js,css들은 중첩으로 계속 호출되고 아놔.. 이거 누가 이렇게 짰어. 덕분에 DOM Selector 가 거지같이 동작하고 분명 콘솔창에서 테스르로 코드 실행하면 잘 동작하는것도 익스텐션에서 이벤트 주입하면 동작안하고 뭐야? 하면 해당 DOM을 못찾고... 아니 시X 페이지가 Document 기준으로 하나면 모르겠는데 지 멋대로 안에서 프레임 호출이 중첩되다보니 이놈의 익스텐션이 각 ifr..

취미/창세기전
[Toy Project] 창세기전2 웹버전

요즘 짬짬히 시간을 내서 진행하는 토이 프로젝트! 옛날에 추출했던 창세기전2 스프라이트를 활용해서 자바스크립트로 RPG 만들기 를 진행 중이다. 우선 유튜브에 아주 훌륭한 강좌를 찾아 해당 강좌를 따라가는 중. 참고: (2) Pizza Legends - JavaScript RPG - YouTube Pizza Legends - JavaScript RPG Let's build an RPG from scratch with HTML, CSS, and JavaScript about rival pizza chefs. More about Pizza Legends: https://gamedevshift.com/pizza-legends www.youtube.com 총 24개 코스 중 현재 7번까지 진행했다. 끝까지 쭉 ..

티스토리툴바