[달리는 까까] 메인 화면을 로비로 만들기

index.html에 해당하는 로비 화면이다. 스크린샷이라 움직임은 보이지 않지만 가운데에 귀여운 쿠키가 띠용거리며 서있다.

맨 위 가운데에는 내 최고 점수와 현재 점수가 표시된다. 게임을 플레이하면 여러 스테이지를 달리게 되는데, 스테이지 하나가 끝날 때 마다 현재 점수에 해당 스테이지의 점수가 더해진다. 이렇게 쿠키가 죽거나 마지막 스테이지를 클리어할 때까지 달린 점수를 모두 더해 기록을 저장한다. 최고 점수는 현재까지 세운 모든 기록 중 최고 점수다. 

맨 오른쪽 상단의 동그란 버튼은 지금까지의 모든 데이터를 리셋하는 버튼이다. 최고 기록과 현재 기록이 모두 사라진다.

우측 하단의 Play 버튼을 눌러 게임을 플레이할 수 있다.

 

왼쪽 상단에는 현재 점수에 맞는 랭크 이미지와 랭크 이름이 보여진다. 현재는 데이터가 없기 때문에 UNRANKED가 보인다. 랭크에 마우스를 올리면 랭크 가이드가 위 그림과 같이 나타난다.

 

좌측 하단에 "필독"이라며 반짝거리는 버튼을 넣었다. 자기 혼자 커졌다 작아졌다 하며 관심을 끌기 때문에 안 눌러볼 수 없을 것이다. 필독 버튼을 누르면 게임 소개와 플레이 방법이 써있는 상세 페이지가 열린다. 스크롤바를 현재 UI와 잘 어울리게 디자인했다.

.lobby .notice_page::-webkit-scrollbar {
  width: 20px;
}
.lobby .notice_page::-webkit-scrollbar-track {
  background-color: orange;
}
.lobby .notice_page::-webkit-scrollbar-thumb {
  background-color: wheat;
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 10px;
}

 

 

---

🔻모든 코드 보기🔻

https://github.com/mkthebea/CCKK_Run.git

GitHub - mkthebea/CCKK_Run: A fangame of [CookieRun: Ovenbreak]

🔻게임 하기🔻

https://mkthebea.github.io/CCKK_Run/

DAL GGA