[달리는 까까] 스테이지 이어 달리기

• 데이터 저장

하나의 맵을 쭉 달리는 것 보다는 여러 맵을 이어 달리면서 다양한 배경과 장애물 디자인을 적용하고 난이도도 점점 어려워지게 해야 게임이 더 재밌어질 것이다. 그래서 지금까지 총 4개의 스테이지를 만들었는데, 스테이지가 끝날 때마다 다음 스테이지로 바로 넘어가거나 로비 화면으로 돌아와 현재 점수를 보며 쉴 수 있게 만들었다. 로비 화면에서 플레이 버튼을 다시 눌렀을 때 종료한 스테이지의 다음 스테이지부터 이어 달리며 이전까지의 데이터를 다시 불러오려면 서버와 같은 저장공간이 필요하다. 그러나 아직 서버와의 연결은 구현하지 않았기 때문에 localStorage를 이용해 사용자의 로컬 환경에 데이터를 저장하는 방법을 택했다. 

 

https://ant-hill.tistory.com/81?category=1073273 

JS LocalStorage

전에 localStorage에 대한 글을 쓴 적이 있다. 글에서 볼 수 있듯이 현재 스테이지, 최고 점수, 현재 점수, 쿠키 체력 등의 데이터를 localStorage에 저장해 필요할 때마다 불러왔다.

//스테이지 데이터 불러오기
const stageInfo = {
  stage: [stage1, stage2, stage3, stage4],
  currentStage: {},
  currentStageIndex: localStorage.getItem("currentStageIndex"),
  totalScore: localStorage.getItem("score") * 1,
  gameOver: false,
};

사용자는 게임 창을 껐다가 다시 접속해도 이전 데이터를 유지할 수 있다.

로비 화면 우측 상단의 초기화 버튼은 localStorage를 비우는 버튼이다.

 

• 스테이지 클래스

여러 스테이지를 만들려면 당연히 클래스를 사용하는게 효율적이다. 프로토타입을 정한 후 stage.js 파일에서 각 스테이지의 구성을 설정한다. 스테이지를 추가하고 싶다면 stage.js에 새 스테이지를 추가하고 stageInfo의 stage 배열에 항목을 추가해 주기만 하면 된다.

//스테이지 클래스 생성자
constructor(stage) {
    this.stageName = stage.name;
    this.backgroundUrl = stage.backgroundUrl;
    this.groundUrl = stage.groundUrl;
    this.length = stage.length;
    this.damage = stage.damage;
    this.jumpObstacle = stage.jumpObstacle;
    this.jumpObstaclePosition = stage.jumpObstaclePosition;
    this.doubleJumpObstacle = stage.doubleJumpObstacle;
    this.doubleJumpObstaclePosition = stage.doubleJumpObstaclePosition;
    this.slideObstacle = stage.slideObstacle;
    this.slideObstaclePosition = stage.slideObstaclePosition;
    this.blastPosition = stage.blastPosition;
    this.coinMagicPosition = stage.coinMagicPosition;
    this.giantPosition = stage.giantPosition;
    this.magnetPosition = stage.magnetPosition;
    this.energyPosition = stage.energyPosition;
    this.miniEnergyPosition = stage.miniEnergyPosition;
    this.itemPosition = [];
    this.goodPatternPosition = stage.goodPatternPosition;
    this.jellyPatternPosition = stage.jellyPatternPosition;
    this.totalCoin = 0;

    this.init();
    this.stageStart();
  }

 

• 스테이지마다 데이터 초기화

스테이지가 종료될 때마다 맵 정보를 초기화 해야 한다. 여기서의 정보는 localStorage에 저장된 데이터가 아니라 젤리와 장애물, 아이템 등의 데이터다. 이 정보를 초기화해주지 않으면 전 스테이지에서 놓친 젤리나 아이템이 다음 스테이지에서 겹쳐 나오게 된다.

또한 쿠키의 점프와 슬라이드 상태도 초기화 해준다. 점프를 하면서 스테이지가 끝나더라도 새 스테이지를 시작하면 달리면서 시작하게 된다.

//기존 맵의 모든 요소 삭제 후 다음 스테이지로 인덱스 변경
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;

 

---

🔻모든 코드 보기🔻

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

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

🔻게임 하기🔻

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

DAL GGA