네이버 블로그에 적었던 내용을 옮긴 글
다이스 게임이란 걸 해본 적이 있는가
(나는 어디서도 해본 적이 없었음)
다양한 다이스 게임이 있겠지만, 나는 되게 간단한 다이스 게임을 보게 되었다.
두 명의 플레이어가 있고, 주사위의 숫자가 1이나 2가 나오면 다음 플레이어로 순서가 넘어가게 된다.
하지만, 3 이상부터 주사위를 맘에 드는 숫자가 나올 때까지 굴릴 수 있는데, 그 사이에 1이나 2가 나오면 그냥 0점을 얻게 된다!
그게 아니면, 그냥 처음 굴렸던 주사위 숫자에 만족해서 바로 그 점수를 얻어갈 수도 있다.
결국엔, 50점을 먼저 획득하는 플레이어가 이기는 게임임!
이 게임을 바닐라 자바스크립트로 구현할 수 있기에, 간단하고 라이트하게 한번 구현해봤다
어떤 식으로 코드를 작성했었는지는
https://github.com/JeongminJamie/dice-game 여기 깃허브 링크에서 확인할 수 있음
"BEM 형식대로 하는 것이 생각보다 쉽지 않았다"
이런 식으로 작성을 하게 되었었는데, 확실히 연습이 많이 필요해 보이는 class 이름 작성법이다..
"리액트를 사용하다 바닐라 자바스크립트로 하려니 까먹고, updateUI function을 state 바뀌는 함수마다 넣지 않는 실수를 했다"
state가 바뀌는 함수 내 가장 바깥 scope에서 updateUI 함수 넣어주며 해결
"게임이 끝날 때 쯤에, 이긴 플레이어의 점수가 업데이트 된 후에 게임 종료를 시키고 싶었다"
하지만, await을 쓸 수 없고 어떻게 해결해야 할 지 고민 :(
짧은 시간의 setTimeout을 사용하여 웹에서 플레이어의 점수가 50이 넘고 난 후 game over가 뜨게 했다
"getElementByClassName이 가져온 HTML collection 문제를 마주해버렸다"
이미지 요소를 가져오고 싶어 getElementByClassName을 사용했다. 하지만, console로 찍었을 때 img 요소 하나가 아닌 html collection을 가져왔다.
여기서 HTML Collection란?
- 웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합
- 유사 배열 객체
- for...of문으로 순회 가능한 iterable한 객체
- DOM의 변경 사항을 실시간으로 반영하는 객체
HTML Collection 객체를 반환하는 메서드로는
getElementByTagName()과 getElementByClassName()이 있다
나는 collection이 아닌 요소 한 줄만 필요했기에, querySelector을 사용함으로써 해결했다
디자인은 볼품없지만 다이스 게임 기능 구현은 완성!
