요즘 듣고 있는 강의에서 프로젝트로 당근 게임을 만들고 있다.
정적 페이지를 먼저 만들고 약간의 자바스크립트를 더했다.
(지금 동적요소 추가하느라 만들어 놓은 몇개 요소는 숨겨져있음)
HTML 작업 중 이슈(나한테만)
- 재생 버튼, 타이머, 당근 카운터를 원래 각자 다 position absolute를 줘서 top %변경으로 나란히 배치를 했는데 화면크기를 줄이니까 저것들이 겹쳐졌다.. what?? 그래서 쟤네들을 div하나로 묶어서 3요소에 한 번에 flex를 줘서 정렬했다. 요소 전체는 position absolute를 사용해서 백그라운드 위에 배치시켰다. 지금 생각해보니 fixed를 줬어도 괜찮을 것 같은 느낌... 혼자+독학 이라 뭐가 더 좋고 그런지 모르겠음 ㅎ
자바스크립트로 지금까지 한 것
- 재생버튼 누르면..?
- 정지 아이콘으로 변경
- 버그랑 당근 백그라운드에 올리기
- 10초 타이머 카운트 시작
- 버그를 잡으면..?
- lose 팝업 창 띄움
- 10초 타이머가 out되면..?
- lose 팝업 창 띄움
이렇게 작업했다. 현재까지 쓴 코드도 고쳐야할 점 너무 많고 추가해야할 기능 많고.. 동시에 일어나는 일, 정지시키는 일..😵💫
일단 실행되면 맞는 거라는 엘리님을 믿고 무작정 똥코드를 써재낀다...
그다음에 코드 수정이든 리팩토링이든 뭐든 해보면되는거 아니겠어?
(솔루션 유혹 넘치는데 강의 옆 디스커션에 다들 혼자 해봤다고 자랑하는 글 보면 솔루션을 볼 수가 없어짐..)
아니 근데 HTML과 CSS를 자스 작업 도중에 자꾸 수정하게 된다.
고쳐야할 것..?
버그 이미지를 자스에서 불러왔더니 이게 로딩 되기전에 버그의 위치를 잡으려하니까 오류가 난다. 그래서 오류가 나는 건지 다른 이유가 있는 지 모르겠지만. 지금 현재 내가 아는 오류의 이유로는 로딩 차이때문이라는 것 밖에 모르니까 일단 그렇다고 치자... 그래서 버그랑 당근을 죄다 HTML에 쑤셔넣고, 재생버튼에 클릭 이벤트를 추가해서 클릭이되면 show 클래스를 추가하여 보이도록 했다.
근데 좌표를 랜덤으로 주니 자꾸 백그라운드 이미지 밖으로 삐져나간다..
늬들 거기에 뭐 있니?? 왜 자꾸 거기로 가는거야? 이 경우 width와 height에 최대 px제한이 필요하다는 것 까지 알겠다. 근데 어떻게? 이제 여기서 또 막히는 거지. 그래서 일단 냅뒀다. 랜덤으로 불러오는 것도 힘들었다. 구글링해서 코드 붙여넣음. 그래도 코드 이해는 함. 최대 px제한 고치는 김에 다시 공부할거야.
(아 백그라운드 빠져나가는 것도 모자라 있어야할 필드 위로도 올라감 이 문제 해결이 시급해보임)
그 다음.. 타이머 시작을 해냄 근데 당근을 다 잡았을 때 타이머가 멈춰야함. 그리고 버그를 잡아서 게임에 졌을 때도 타이머가 멈춰야함.
이거 구현 어떻게 함? 버그 잡았을 때 타이머 멈추는 건 할 수 있을 것 같다.
근데 당근을 다 잡았을 땐? 내가 생각한 방법은 당근의 클래스 검사를 해서 모든 당근에 remove가 들어있으면 WON 팝업 창을 띄우는 것.
(당근을 잡으면 remove클래스를 추가해 CSS에 display: none;을 설정하여 당근을 사라지도록했다.) 아니면 어떻게 해볼 수 있을까?
(지금 코드를 완전 중구난방으로 짜놨기 때문에, 같은 이벤트 하에서 일어나는 일들을 한 코드에 묶어야 할 필요가 있다. 지금 같은 이벤트를 여러번 선언했음;)
일단 내가 구현해놓은 것들 중에서 고쳐야할 것들은 정리가 된듯하다.
- 당근, 버그 지정한 필드위에서만 랜덤 배치 시키기
- 당근 다 잡았을 때 타이머 중지 시키기
- 당근 다 잡았을 때 WON 팝업 띄우기
..더 없나..?
앞으로 더 해야할 작업..?
- 요소 동작 시 소리 이펙트 입히기(이건 제일 마지막에 작업할거야)
- 당근 개수 카운팅 하기(하나 잡을 때마다 10에서 내려가도록. 어려울것으로 예상 됨 🤨)
- 타이머 숫자 조작하기 (젤어려울 것으로 예상🤯)
..이게 전부인가? 일단 생각나는 건 여기까지
