[JavaScript 완벽가이드] 89. 게임 리셋기능

이번 FE 게시글은 Udemy 강의를 수강하며 추가로 구현한 내용을 작성해보고자 한다.

먼저 듣고 있는 강의는 다음 링크에서 확인할 수 있다.

 

https://www.udemy.com/course/javascript-zw/

 

---

 

JavaScript의 초반 부분 if-else를 가지고 간단한 몬스터 죽이기 웹 게임을 만드는 프로젝트를 하게 된다.

이곳에서는 html이나 css를 디자인하지 않으며 오로지 javascript를 조작하게 되는데,

처음 시작시 화면은 다음과 같은 모습을 볼 수 있다.

 

Monster Killer 실행시 화면

 

다음에서 내가 추가로 구현하고자 하는 부분은 바로 PLATER HEALTH의 바로 옆 부분에 쓰인 Bonus Life였다.

강의를 그대로 따라하면, Bonus Life의 경우 전체 게임이 돌아가는 중 지거나 이기거나 비겨서 reset이 되어도 다시 주어지지 않는 것이다.

 

추가로 구현하고 싶을 경우 본인이 생각하여 구현해야 한다.

그래서 이 부분을 작성 후 공유하고자 한다. 😉

 

먼저 기본적으로 주어지는 Bonus Life가 어떻게 삭제되는지 보았다.

vendor.js라는 파일을 살펴보면 다음과 같은 function을 확인할 수 있다.

const bonusLifeEl = document.getElementById('bonus-life');

...

function removeBonusLife() {
  bonusLifeEl.parentNode.removeChild(bonusLifeEl);
}

...

 

이 부분을 살펴보면 먼저 getElementById를 통하여 상수 bonusLifeEl에 정의했다.

그다음으로 removeBonusLife를 실행할 경우 parentNode에서 해당 child를 지우게 된다.

 

🎀 그렇다면, 생각해 볼 수 있는 경우의 수는 2가지였다.

첫 번째, Bonus Life가 있는 채로 게임이 reset 될 때.

두 번째,  Bonus Life가 없는 채로 게임이 reset 될 때.

 

처음의 경우에는 이미 Bonus Life가 있기 때문에 굳이 추가할 필요가 없다.

그러나 삭제될 경우에는 다시 parentNode에 child를 추가해야 하는 문제가 발생된다.

 

이 문제점을 가지고 먼저 생각해 낸 것은 parent Node에 id값을 준 뒤 vendor.js 안에서 조작을 진행하는 것이었다.

 index.html의 PLAYER HEALTH 부분을 볼 경우 span 태그로 이루어진 bonus-life를 볼 수 있다.

먼저 PLAYER HEALTH인 h2 부분에 id="Parent-Node"를 주었다.

 

다음으로 vendor.js 의 ReParentNode라는 상수를 선언한 뒤 id를 찾아 연결해 주었다.

그리고 resetGame함수 부분에 Bonus Life가 있는지 판단하기 이전, 가장 중요하게 바꾸어주어야 할 한 가지가 있다.

바로 상수로 선언된 bonus-life를 let 변수로 변경해 주는 부분이다.

이 부분의 경우 bonus life를 지우는 부분에서 removeChild(bonusLifeEl) 해당 함수를 수정하지 않기 위함이다.

 

 🔒 사실 이 코드를 작성하기 이전 createElement를 사용하고 const의 id를 추가한 뒤 innerText를 통해 1이란 값을 준 적이 있다.

그러나 이렇게 할 경우 bonusLifeEl을 삭제하는 부분에서 오류가 발생되고 1을 추가는 할 수 있으나 정상적인 삭제가 어렵게 된다.

 

변수로 bonusLifeEl을 재할당 할 수 있도록 만들어 준 뒤,

우리는 먼저 게임을 재시작하기 전에 해당 요소가 존재하는지 확인해야 한다.

 

강의에 충실하게 Truly & Falsy를 사용해 보았다.

만약 document의 bonus-life라는 값이 참이 아닐 경우, 즉 bonus-life가 없을 경우에만 다음 조건문 내용이 실행된다.

변수에 createElement를 통하여 span 태그를 생성한다.

다만, createElement는 요소가 만들어지긴 했으나 내용이 없기에 다음과 같은 작업을 거친다.

.id를 통하여 해당하는 변수에 id 값을 줄 수 있다.

또한 innerText값을 통하여 1이라는 숫자를 줄 수 있다.

 

✨ 글을 정리하면서 생각났는데 차후 removeBonusLife함수에서 지우는 것이 아닌

innerText를 통한 0과 1을 번갈아가며 간단히 대체할 수 있겠다.

 

그리고 이전 h2 태그와 연결해 둔 ReParentNode에 appendChild를 통하여 끝에 추가함으로써 다시 PLAYER HEALTH 옆 bonus life를 부착할 수 있으며, reset시 정상적으로 작동한다.

 

🎀 물론 app.js에서 reset() 함수를 작성할 때 hasBonusLife를 true로 재설정해주어야 한다.

 

---

이렇게 어영부영 주말에 javascript 강의를 듣다가 추가 구현까지 해보았다.

다음 강의를 듣다가 또 추가 구현할 것들이 생기면 작성 후 스스로 정리할 겸 적어보아야겠다.

요즘 회사 인턴십 생활을 하며 다루는 스킬이 html, css 밖에 없는 것 같아 실력을 다시 쌓아야겠다는 느낌이 들었다. 😂

 

언젠가 일주일에 1번씩 포스팅할 수 있는 날이 오길 바라며..😎