예전에 써둔 게임도감 만드는 글인데
너무 조잡하기도 하고 글도 너무 못 써서 수정하러 왔다
이때 절망 좀 했나보다
사진이 귀엽다
내가 가볍게 생각했던 것은
게임의 장비 도감을 모아두는 사이트
대상 게임은 "로보토미코퍼레이션" 이라는 게임
게임 내에는 눈,코,입,머리 ... 다양하게 장비를 착용할 수 있다.
사이트의 실사용성은 고인물이 되면 필요없지만
- 각 장비는 부위마다 하나씩 밖에 착용할 수 없음
- 능력치는 총 4개로, 장비마다 가지고 있는 능력치(스탯)가 다름
- 즉 어떤 장비 조합으로 게임을 운용할 지 생각하기 위한 용도
이 목적을 생각하며 사이트를 제작해보기로 했다.
레이아웃 구상
대략적으로 마크업을 짰었다.
아이 못생겼어
대강 레이아웃을 정리하자면
- 헤더는 로고나 제목이 들어간다
- 두 번째 섹션은 착용 부위와, 능력치 태그가 모인 영역
각 태그를 클릭하면, 부위별로 혹은 능력치 별로 장비를 모아보는 기능을 한다. - 세 번째 섹션은 존재하는 장비들의 리스트가 나열된다.
- ❗두 번째와 세 번째 섹션 사이에 빠진 부분이 있다.
내가 원하는 장비를 선택하면, 총 능력치 합을 보여줄 것이다.
필요 데이터
우선 모든 장비들의 정보가 있어야?
사이트에 보여줄 수 있다.
장비의 정보들은 JSON형태로 저장하기로 결정했다.
나름 포폴겸 공부를 위해 만들었던 것이기도 하고,
JSON과 나중에 fetch()까지 다뤄보고 싶어서 JSON파일을 만들기로 결정!
JSON
- JSON은 서버에서 클라이언트로 데이터를 보낼 때 쓰는 양식
- "key" : "value" 쌍으로 이루어진 객체. 중괄호에 감싸져서 사용한다
(ex : {"name" : "홍길동"} )- (나는 아직 서버를 못 다루기 때문에(...) 별도의 json파일을 만들어서 소통하기로 정했다.)
필요한 정보는
장비의 이름(gift) / 착용 부위(pos) / 장비 이미지(img) / 능력치 /
능력치 외 부가능력 / 어떤 몬스터에게 얻을 수 있는지(who) /
장비의 등급(grade) / 획득 확률(percent) / 사용자 체크 여부(checked)
*사용자 체크 여부는, 사이트 내에 기능 사용을 위해서 추가로 넣은 정보다. (체크한 장비를 표시하기 위함)
아래는 필요 데이터를 JSON방식으로 저장할 때 포맷
{
"gift" : "참회",
"pos" : "머리1",
"img" : "이미지 소스가 들어간다",
"stat" : {
"W" : 2, //능력치는 W,R,B,P 라고 지정했다(게임 내 스펠링 앞자리를 따옴)
"etc" : "해당 환상체 작업 성공률 10% 상승" //능력치 외 부가능력
},
"who" : "단 한번의 악과 수백 가지의 선행",
"grade" : "zayin",
"percent": 10,
"checked" : "false"
}각 정보를 이런 식으로 정리 후, 모든 장비들을 배열에 담을 것이다.
list라는 키에 배열을 저장할 것이므로
형태는 list : [{ },{ },{ }, ... ,{ }] 이런 모습이 될 예정.
이제 리스트를 다시 정리하러 가야한다...
