[달리는 까까] UI 개선

기존 alert()나 confirm()을 이용해 다음 스테이지 이어달리기 또는 로비로 돌아가기 기능을 구현했었다. 기능은 잘 동작하지만 전체 UI와 맞지 않는 디자인이다 보니 이질감이 생겼다. 이번에는 쿠키런과 비슷한 디자인으로 확인창을 디자인 해봤다.

 

완성된 확인창

 

확인창을 띄우는 방법은 paused 박스나 crash_filter를 띄우는 방식과 동일하다. 확인창을 디자인한 후 display: none;으로 설정하고, 스테이지를 클리어하면 display: block;으로 변경하면 된다.

기존에 alert()과 confirm()을 사용할 때와 내부적인 코드는 동일하기 때문에 금방 만들 수 있었다.

const nextStage = () => {
  cookie.movex = 0;
  gameBackground.gameBox.style.transform = `translateX(${0}px)`;

  allJellyComProp.arr.forEach((j) => {
    j.el.remove();
  });
  allJellyComProp.arr.splice(0); //배열 요소 전부 삭제

  allObstacleComProp.arr.forEach((o) => {
    o.el.remove();
  });
  allObstacleComProp.arr.splice(0);

  allItemComProp.arr.forEach((i) => {
    i.el.remove();
  });
  allItemComProp.arr.splice(0);

  newStage = new Stage(stageInfo.stage[stageInfo.currentStageIndex]);
  stageInfo.currentStage = newStage;

  gameProp.gameClear = false;
  document.querySelector(".stage_guide").style.display = "none";
};

const backLobby = () => {
  cookie.movex = 0;
  gameBackground.gameBox.style.transform = `translateX(${0}px)`;

  allJellyComProp.arr.forEach((j) => {
    j.el.remove();
  });
  allJellyComProp.arr.splice(0);

  allObstacleComProp.arr.forEach((o) => {
    o.el.remove();
  });
  allObstacleComProp.arr.splice(0);

  allItemComProp.arr.forEach((i) => {
    i.el.remove();
  });
  allItemComProp.arr.splice(0);

  location.href = "index.html";
  document.querySelector(".stage_guide").style.display = "none";
};

 

모든 스테이지를 클리어했을 때는 다른 확인창을 띄운다.

 

 

---

🔻모든 코드 보기🔻

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

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

🔻게임 하기🔻

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

DAL GGA