드림코딩 프론트엔드 필수 브라우저 101 강의를 듣고 실습 프로젝트로 진행한 미니게임
📋 구현내용
✔ 플레이버튼 클릭시 게임 시작
✔ 당근 클릭 시 카운트 -1, 카운트 0 되면 게임 종료
✔ 벌레 클릭 시 게임 종료
✔ 타이머 0초 되면 게임 종료
✔ 게임 종료시 팝업창 노출, 게임 재시작 가능
새롭게 알게 된 내용
.getBoundingClientRect()
컨텐츠의 x, y, width, height 값을 반환하는 함수
게임필드 영역을 확인하기 위해 width, height 값을 활용했다.
element.matches('selector')
element와 selector가 같은지 아닌지 확인해주는 메소드, true, false 반환
이벤트 버블링을 활용해 게임필드영역에 클릭이벤트를 적용하고 클릭된 타겟이 당근, 벌레인지 구별할 때 사용했다.
이전엔 항상 classList.contains()를 사용했었는데 matches로도 같은 기능을 사용할 수 있다는걸 알게됐다.
sound.currenTime = 0;
음악재생 초기화
각 기능별로 클래스 함수를 만들어 모듈화 시켰다.
클래스 함수를 이용하다보니 자연스럽게 this를 이용하고 this의 속성을 경험할 수 있었다.
이론으로만 외우고 있던 this 바인딩..
클릭이벤트에 함수를 적용하기위해서는 this바인딩이 필요하다.
해당 함수 안에서의 this값이 필요하기 때문!
화살표 함수를 이용하면 따로 바인딩 처리를 해주지않아도 되서 화살표함수를 사용했다.
자바스크립트로 타입 보장하기
Object.freeze() 를 이용해 문자열을 고정문자열로 만들어 주었다.
객체를 동결시키는 메소드로, 내부 속성을 변경할 수 없다는 특징을 갖고 있다.
게임종료시 게임 결과를 win, lose, cancle 문자열로 받아서 각기 다른 메세지를 제공한다.
Reason변수에 할당된 속성이기때문에 Reason 입력시 포함하고있는 3가지 속성을 확인가능해 오타를 방지할 수 있고, 자동입력이 가능하다는 장점이 있다.
