Eggasaurus: JavaScript 워터 클리어 브라우저 게임

이 글은 내가 개발한 자바스크립트 스파 브라우저 게임에서 게임의 시각화를 어떻게 처리했는지 되돌아볼 것이다.
Flatiron이 완성Software Engineering bootcamp되었을 때 저는 자바스크립트 SPA를 프로젝트 그룹으로 구축했습니다.
나는 세 살짜리 아이가 놀 수 있도록 충분한 간단한 놀이를 만들기로 결정했다.(스포일러 경보: 그는 움직이지 않았다.)이로 인해 생긴 게임'Eggasaurus'는 브라우저 게임에 대한 나의 사랑과 내 아들의 공룡에 대한 미혹에서 비롯되었다.사용자는 공룡 애완동물을 만들어 그들과 상호작용할 수 있다.
시간이 지날수록 공룡은 배고픔과 피로, 지루함을 느낀다.이것은 내가 말한 정서 측정기를 통해 직관적으로 나타낼 수 있다.시간의 추이에 따라 정서는 끊임없이 떨어진다.유저는 간호 버튼을 클릭하여 상응하는 정서표를 채울 수 있습니다.

나는 HTML(divs), CSS(배경색, 너비)와 자바스크립트(setInterval, 이벤트 탐지기, HTMLDOM 스타일 속성)의 조합을 통해 이 점을 실현했다.

정서표 HTML 및 CSS

정서표는div로 만들어졌다.각 정서량표(총 3개: 배고픔, 행복, 피로)는 반의divmeters로 시작한다.
이 부div는 경계 반경, 경계, 높이가 있어 실제 쌀을 구성한다.만약 이것이 구식 온도계라면, 그것은 온도계 외부의 유리 조각이 될 것이다.

<div class="meters">
...
</div>

div.meters {
  height: 20px;
  border: 4px solid gray;
  border-radius: 30px ;
  margin-bottom:5px !important;
}

그 다음은 클래스green를 가진child div로 id는 그를 대표하는 정서에 따라 결정된다.문자열 삽입값을 통해 검색할 수 있는 너비 값이 있습니다.이div는 정서의 가치나 수준을 대표한다.온도계의 수은 수준과 유사하다. (만약 수은이 녹색이라면.)

<div class="meters">
  <div id="hunger-meter" class="green" style="width:${this.hungerP}">
    ...
  </div>
</div>

CSS는 정서 레벨div에 부모 레벨과 같은 높이를 부여한다.왼쪽의 부표 하나가 왼쪽에서 성장하고 수축하는 것처럼 보인다.배경색, 단계 값을 직관적으로 표시하는 데 사용;경계의 반경과 우리가 쌀에 대한 착각을 일치시키다.

  div.meters div.green{
    height: 20px;
    float: left;
    border-radius: 30px; 
    background: green;
  }

마지막으로 손자 한 명과 증손 한 명이 더 있다. 그들이 가지고 있는 정령은 의표가 대표하는 정서에 부합된다.그래서 이런 상황에서 배고픈 닭다리.

<div class="meters">
  <div id="hunger-meter" class="green" style="width:${this.hungerP}">
    <div class="sprite-holder">
     <div class="sprite"></div>
    </div>
  </div>
</div>

CSS는 요정 거치대에 배경색을 제공해 정서적 파동을 방지한다.그것은 또한 그것을 우리의 최고급 정서 측정 구역에 완벽하게 배치한다.정확한 아이콘을 표시하기 위해 계기에 따라 배경 위치를 설정합니다.

div.sprite{
    background: url('images/meter_icons.png');
    width: 20px;
    height: 20px;
    background-size: 58px auto;
}
div.sprite-holder{
    width: 25px;
    background-color: #fff;
    float: left;
    position: relative;
    left: -5px;
    top: -5px;
    padding: 5px;
    border-radius: 50%;
}
div#hunger-meter div.sprite{
    background-position: 0px 0px;
}

이러한 정서 계기와의 상호작용을 처리하기 위해 해당하는 관리 버튼이 있다.모든 단추는 영향을 미칠 정서표에 대응하는 배경 이미지와 id가 있습니다.

<div id="care-btns">
  <button id="feed" data-id="${this.id}"></button> 
  <button id="play" data-id="${this.id}"></button> 
  <button id="nap" data-id="${this.id}"></button>
</div>

정서량표 JS

JavaScript는 setInterval, HTMLDOM 스타일 속성, 이벤트 탐지기를 사용하여 정서 단계의 폭을 변경합니다.

간격 설정

우선, 게임에 공룡을 불러오거나 선택할 때 호출moodTimer.이 함수는 디노 대상 id를 받아들이고 setInterval을 사용하여 id를 전달하는 디노 실례에서 함수 decreaseMoods 를 중복 호출합니다.

function moodTimer(dinoId){
    newMoodAdjust = window.setInterval(() => {Dino.findDino(dinoId).decreaseMoods()}, 1000)
}

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

New MoodaJust에서 decrease Moods는 디노 실례에서 1000밀리초 간격으로 호출됩니다.

The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
-- W3Schools

사용자가 로그아웃하거나 다른 공룡 게임을 선택하면clearInterval을 호출합니다.

clearInterval(newMoodAdjust)

사용자가 방금 새로운 공룡을 선택하면 다시 호출moodTimer()하고 새로운 공룡 id를 전달합니다.

감정 감소(HTML DOM 스타일)

New Moodad에서는 초당 decrease Moods 함수만 호출합니다.이 함수는 디노 클래스 메서드입니다.그것은 공룡의 실례적인 기아, 즐거움, 피로 속성이 0보다 높은지 검사한다.만약 그렇다면 상응하는 종류의 방법인hunger()를 호출한다.심심하다피곤하거나.이러한 메서드는 Dino 인스턴스 속성의 값을 조정하고 다른 클래스 메서드를 호출합니다.

    decreaseMoods(){
        if(this.hunger > 0){
            this.hungry()
        }
        if(this.happiness > 0){
            this.bored()
        }
        if(this.tiredness > 0){
            this.tired()
        }
    }

    hungry(){
            this.hunger -= 0.5
            this.adjustHungerMeter()
    }

    bored() { 
            this.happiness -= 0.5
            this.adjustHappinessMeter()
    }

    tired() { 
            this.tiredness -= 0.5
            this.adjustTirednessMeter()
    }

녹색 구역의 폭을 조정함으로써 공룡의 배고픔, 즐거움, 피로 속성치를 시각적으로 유저에게 보여주는 것을 기억하세요. 0은 우리의 마루입니다.일단 이러한 속성과 녹색div의 폭이 0에 이르면 우리는 더 이상 조정할 필요가 없다.
우리의adjust류 방법은 적당한 녹색div를 검색하고 HTMLDOM 스타일 속성을 사용하여 공룡의 배고픔, 즐거움, 피로 속성 값으로 설정합니다.this.hungerP는 배고픔 속성을 백분율 문자열로 변환하는 Getter입니다.그래서 만약에 this.hunger // 50그렇다면this.hungerP // "50%"

    adjustHungerMeter(){
        const hungerMeter = document.getElementById("hunger-meter")
        hungerMeter.style.width = this.hungerP
    }

    adjustHappinessMeter(){
        const happinessMeter = document.getElementById("happiness-meter")
        happinessMeter.style.width = this.happinessP
    }

    adjustTirednessMeter(){
        const napMeter = document.getElementById("tiredness-meter")
        napMeter.style.width = this.tiredP
    }

정서 증가(활동 청중과 스타일)

게임을 탑재하고 공룡을 선택하면 수영센터에서 호출moodListeners()을 합니다.
이 함수는 이벤트 탐지기를 누르면 모든 관리 단추에 추가됩니다.

function moodListeners(){
    document.getElementById("care-btns").childNodes.forEach(btn => {
        btn.addEventListener("click", (e) => {
            const thisDino = Dino.findDino(e.target.dataset.id)
            if(e.target.id == "play"){
                thisDino.play()
            } else if(e.target.id == "feed"){
                thisDino.feed()
            } else if(e.target.id == "nap"){
                thisDino.nap()
            }
        })
    })

}

단추를 눌렀을 때 다른 디노 클래스 방법이 호출됩니다:play ();feed();그리고 쪽잠().
예상대로 이 방법들은 디노의 실례적인 mood 속성 값(100으로 설정)을 증가시키고 위에서 논의한adjust 클래스 방법을 호출할 것이다.

    feed(){
        this.hunger = 100
        this.adjustHungerMeter()
    }
    play(){
        this.happiness = 100
        this.adjustHappinessMeter()
    }
    nap(){    
        this.tiredness = 100
        this.adjustTirednessMeter()
    }

나는 아들이 모든 클릭에 대해 낙담했기 때문에 기분이 점점 좋아지지 않고 최고 수준으로 올라가기로 결정했다.
너는 단지 재미를 위한 게임을 만들어 본 적이 있니?당신은 전문적인 게임 개발자입니까, 아니면 엔지니어입니까?당신이 가장 좋아하는 브라우저 게임은 무엇입니까?(저는 쿠키클릭러와 NGU Idle입니다.)