Tower Defense - 디펜스 게임 기획 및 바이브 코딩

# Tower Defense - 디펜스 게임 기획 및 바이브 코딩 ## 예전에 재밌게 했던 기억 (아시는 분은 이름이나 링크 좀 알려주세요.) 오래된 타워 디펜스 (아마도 Flash 로 만들어졌던걸로 기억) 게임 하나 찾아줘. Vector TD 는 아니야. Desktop Tower Defense 와 게임 방식은 거의 동일한데 디자인이 조금 더 세련되었어. ## 기획 C:/kipid/Tower-Defence/index.html 분석해서 업그레이드 해줘. 파일은 다른 파일 C:/kipid/Tower-Defence/Tower-Defence-v1-0-1.html 에 저장해줘. 정사각형 n x n grid 에서 모든 것들이 이루어짐. 몹들이 왼쪽에서 나와서 오른쪽으로 들어가는 무리가 있고 위쪽에서 나와서 아랫쪽으로 들어가는 무리가 있음. 몹들은 지상병력으로 타워가 막고 있는곳은 뚫고 지나지 못하고 자신들의 목적지 (왼쪽에서 나온 몹들은 오른쪽 목적지로, 위쪽에서 나온 몹들은 아랫쪽 목적지로) 로 뚫린 길 (가로, 세로 방향으로 막히지 않아야 뚫린 길임.) 을 따라 움직이게 됨. 공격은 하지 않으며 각 stage level 이 올라갈수록 체력이 높아진다거나 몹을 잡으면 체력이 조금 적은 여러마리로 분화한다거나 함. 특정 stage level 에서는 공중 몹이나와서 지상의 방어타워에 길막힘 당하지 않고 각자의 목적지로 직진함. 방어타워는 일반 타워, 스플레시 타워, 공중만 타격하는 타워, 자기 주위 1칸까지만 공격하되 적들을 둔화시키는 타워, 멀리까지 지상군을 공격하며 범위 공격을 주는 타워, 단일 타겟에게 큰 피해를 입히는 플라즈마 타워 등이 존재 함. 각 타워는 적절한 초기비용과 업그레이드 비용이 있음. 초기 설치했을때는 약하지만, 업그레이드를 하면 할수록 강해짐. 타워 건물을 선택하면 업그레이드 하거나 되팔 수 있고, 되팔때는 지금까지 타워를 건설하고 업그레이드 하는데 들어간 총 비용보다 적은 금액만 되돌려 받게 됨. JavaScript 와 jQuery 등을 사용해 웹에서 돌아갈 수 있게 단일 html 파일로 만들어주고, JavaScript 와 CSS 를 허용하는 블로그에 업로드할 수 있게 만들어줘야 함. jQuery 는 version 3.7.1 을 써주고 https://tistory1.daumcdn.net/tistory/1468360/skin/images/jquery.js 주소에서 가져다 써줘. ## TOC ## 개선사항 1 그리드는 32 x 32 으로 만들어주고, 몹들은 왼쪽 가운데 8 grid, 윗쪽 가운데 8 grid 정도에서 나와서 오른쪽 가운데 8 grid, 아랫쪽 가운데 8 grid 정도로 들어가는걸로 해주고. 제일 바깥은 몹들이 못지나가는 벽으로서 활용해줘. 모바일에서도 플레이 할 수 있게 width 는 % 단위 적극 활용해줘. 실제로 게임이 동작하도록 만들어줘. 끝까지 끈질기게 노력해줘. ## 개선사항 2 아직도 첫 타워부터 안지어지고 있어. 그리고 초반 세팅은 일반 타워 30개 정도 만들 수 있는 재화부터 시작하게 해주고. 타워는 각 종류별로 개성있게 기하학적으로 뚜렸이 다르도록 디자인 해줘. Border 의 굵기나 색상으로 각 타워의 업그레이드 정도도 쉽게 알아챌 수 있도록 만들어주고. ## 개선사항 3 모든 타워는 2 x 2 grid 를 차지하도록 만들어주고. 몹들은 가로, 세로로 안막힌 곳이 있어야 지나다닐 수 있고 타워가 지어진 곳으로는 이동 못하도록 만들어줘. 타워를 새로 세웠을 때, 지상 몹들이 목적지까지 가는 route 가 없어지면 그곳에는 타워를 지을 수 없게 만들어줘. ## 개선사항 4 타워 건설 로직은 타워 건설에서 타워 종류를 선택하고 grid 위쪽으로 mouse cursor 를 이동하면 mouse over 인 곳에 흐릿하게 지어질 타워 미리보기를 할 수 있게 제공해주고, 그 상태에서 클릭해주면 미리보기가 제공된 곳에 그대로 타워가 완공되게 만들어줘. 타워는 겹쳐지을 수 없게 mouse 가 움직이는 곳을 쫓아 다니면서 타워가 겹쳐지는 곳은 빨간 바탕으로 나타내주고, mouse 가 지을 수 있는 곳에 있다면 녹색 바탕으로 지을 수 있음을 표현해줘. ## 개선사항 5 한 화면에 게임의 UI 가 모두 들어갈 수 있도록 max-width:100vw; max-height:100vh; 등으로 강제해주고, 폰에서 가로 모드로 볼 때랑 세로 모드로 볼 때 UI 를 적절하게 배치해서 게임을 편히 즐길 수 있도록 만들어줘. 완공된 타워는 되팔 수 있게 만들어줘. 그 타워를 짓고 업그레이드 하는데 든 돈보다는 적은 대략 총 든 비용의 80% 정도의 재화만 돌려주도록 해줘. 몹들이 나오고 들어가는 곳은 1 grid 바깥으로 만들어줘. ## 개선사항 6 32 x 32 grid 로 만들어주고 제일 바깥 grid cell 은 벽이거나 몹이 출현하고 목적지로서 빠져나가는 곳이 되게 만들어줘. 몹이 출현하고 목적지로서 빠져나가는 곳은 색을 적절히 입혀줘. ## 개선사항 7 타워 건설할 때, 마우스가 위치한 정확한 곳에 건설을 시도하도록 만들어줘. 지금은 왼쪽 위에서만 조금씩 이동하고 있어. ## 개선사항 8 몹들이 이동하는 모습이 안보여. 너무 빨라서 안보이거나, 시각화해주는 부분 코드가 잘못된거 같아. 고쳐줘. ## 개선사항 9 몹들의 모습이 안보여 동그란 형태에 바로 아래엔 체력바가 달린 형태 예뻤는데, 코드를 이리저리 고친 다음부터는 화면상에 안나타나네. 그리고 타워 건설하는 미리보기가 실제 grid 랑 일치하지 않고 살짝씩 엇갈리고 있어. 그리고 단 한개의 타워조차 건설/완성을 못하고 있어. 몹의 이동경로를 막는게 아닌데도 초록빛깔로 떠서 지어지는 지역이 아무데도 없는것처럼 보여. 개선해줘. ## 개선사항 10 거의 다 됐어 조금만 더 힘내줘. 몹들은 모양이 다양하게 원, 세모, 네모, 오각형, 육각형, 팔각형, 별모양 등으로 만들어주고. 몹의 현재 체력이 몹 바로 위에 바 형태로 나타나게 해줘. 100% 체력에서 타워에 맞고 깍이는 걸 실시간으로 보여줘. 타워가 지어지는 곳이 grid 가 표현된 곳에서 8px 정도 차이가 나던데 정확하게 일치하도록 만들어줘. 아마도 grid 전체에서 x, y 위치가 grid 를 그릴때 x, y 에 선 그린거랑 일치하지 않는거 같은데. 이걸 깔끔하게 일치시켜줘. 그리고 mouse over 일 때 미리보기로 지어지는 곳이 보이는데, 클릭하고 보면 그것보다 한칸정도 위 아래 왼쪽 오른쪽으로 옮겨져서 지어지는것도 같은데 이런 불일치가 안 일어나게 주의해서 코드 짜줘. ## 개선사항 11 Cannot build here or not enough money. 라는 경고가 뜨면서 아무 자리에도 건물을 건설할수가 없어. 고쳐줘. 그리고 UI 가 가로가 긴 창에 맞게 오른편에 Status, Build Tower, Start Next Wave 가 오도록 만들어줘. C:/kipid/Tower-Defence/Tower-Defence-v1-0-0.html 는 참조하지 말고 C:/kipid/Tower-Defence/index.html 만 참조/분석해서 업그레이드 해줘. 파일은 다른 파일 C:/kipid/Tower-Defence/Tower-Defence-v1-0-1.html 에 저장해줘. C:/kipid/Tower-Defence/Tower-Defence-v1-0-1.html 는 참조/분석해서 업그레이드 하는데 도움 되도록 해주고. 몹들 체력바는 푸른색으로 만들어줘. 몹 클릭하면 전체 체력, 현제 체력 보이도록 만들어줘. ## RRA