[달리는 까까] 점수와 쿠키 체력 업데이트 및 인게임 UI

• 점수 업데이트

쿠키가 젤리를 먹으면 그 젤리의 점수만큼 총 점수에 더해준다. 점수는 젤리 종류에 따라 다르게 설정해 준다. 젤리 객체를 생성할 때 점수를 넘겨주는 방법도 있겠지만 간단하게 젤리 클래스에서 처리했다.

this.score = type === "coin" ? 10 : type === "" ? 100 : type === "yellow_bear" ? 200 : type === "pink_bear" ? 300 : type === "blue_bear" ? 500 : type === "big_bear" ? 1000 : 0;

점수 업데이트는 젤리 클래스의 crashJelly() 메서드에서 충돌을 체크한 후 setScore() 메서드를 호출해 처리한다.

setScore() {
    if (!gameProp.paused) {
      stageInfo.totalScore += this.score;
      document.querySelector(".score_box").innerText = stageInfo.totalScore;
      if (this.type === "coin") {
        stageInfo.currentStage.totalCoin += 1;
        document.querySelector(".coin_amount").innerText = stageInfo.currentStage.totalCoin;
      }
    }
  }

setScore() 메서드에서는 gameProp의 총 점수 데이터와 플레이어에게 보이는 점수 화면을 함께 업데이트하며 코인 획득량도 관리한다.

 

• 체력 업데이트

게임이 시작되면 체력이 프레임마다 작은 폭으로 줄어든다. 장애물에 부딪히면 체력이 크게 깎이고 생명물약을 먹으면 체력이 증가한다(물약 아이템은 추후 아이템 업데이트 포스팅에서 다룬다).

체력이 0 이 되면 쿠키는 죽고 게임이 끝난다. 체력은 쿠키 클래스의 minusHp()와 plusHp()에서 관리한다.

 minusHp(hp) {
    const hpBox = document.querySelector(".game_info .hp .hp_background .hp_progress");
    this.hpValue += hp;
    this.hpProgress = Math.max(0, (this.hpValue / this.defaultHpValue) * 100);
    hpBox.style.width = this.hpProgress + "%";

    if (this.hpValue <= 0) {
      this.dead();
    }
  }
  plusHp(hp) {
    const hpBox = document.querySelector(".game_info .hp .hp_background .hp_progress");
    this.hpValue = Math.min(this.defaultHpValue, this.hpValue + hp);
    this.hpProgress = Math.min(100, (this.hpValue / this.defaultHpValue) * 100);
    hpBox.style.width = this.hpProgress + "%";
  }

minusHp에서는 체력이 0 미만으로 떨어지지 않도록, plusHp에서는 체력이 최대 체력을 초과하지 않도록 Math를 이용해 관리한다.

 

• 인게임 UI

인게임 화면이다. 좌측 상단에는 현재 쿠키에 대한 간단한 설명이 있다. 나중에 쿠키 선택 기능을 추가한다면 해당 내용이 바뀌게 될 것이다. 그 아래에는 총 코인 획득량이 있다. 가운데에는 쿠키의 체력바가 있고, 바로 오른쪽에 총 점수가 표시된다. 우측 상단의 버튼으로 일시정지를 할 수 있다. 

나중에 게임 플레이 요소들이 업데이트 되면 UI도 추가되겠지만, 게임 플레이에 꼭 필요한 정보들은 모두 포함한 UI다.

 

---

🔻모든 코드 보기🔻

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

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

🔻게임 하기🔻

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

DAL GGA