소리넣기 하던 중
백그라운드 배경음악을 깔고 게임에서 지거나 이기면 배경음이 멈춘다.
여기까진 좋음.
근데 게임을 재시작하면 배경음악이 처음부터 다시 재생되는 것이 아니라 아까 멈춘 그 지점부터 재생되는 것이다..?
function pauseSound(sound) {
sound.pause();
}pause를 사용해서 그런가 싶어 end를 찾아봤는데 , 이건 이벤트 핸들러를 사용해야 했다. 흐으으음 뭘까? 강의를 마저 봐야겠다.
강의를 들어보니 내가 사용한 방식 똑같이 사용했다. 끊긴지점에서 다시 시작되는 게 맞나보다. 가 아니고 더 들어보니 ㅋㅋ .currentTime 옵션을 사용해서
사운드를 재생할때마다 시작점을 0으로 되돌려준다. 그럼 처음부터 다시 재생되는 것임 !! 내 검색능력 뭐지🥲
게임 마무리
자잘한 스타일링 변경, 추가적으로 기능 구현하기
-
나는 개인적으로 transform을 이용해서 요소에 효과를 입히면 필요하지 않는 이상 속도 조절은 개인 취향이라고 생각한다.
*-*
그래서 sclae을 조정하거나, background-colour를 변경한다거나 할때, 앵간해서는 transition을 건드리지 않는 편.
근데 보통 강의에서는 설정을 하더라 연습이 필요할 땐 따라했는데 이젠 내가 넣고싶은 요소만 transition을 추가로 설정해준다. -
CSS 스타일링 시, 똑같은 스타일링 코드를 짤 경우 그 요소는 묶어주는 게 좋은데, 예를 들면 이런경우에,
.carrot,
.bug {
transition: transform 100ms ease-in;
}
.carrot:hover,
.bug:hover {
transform: scale(1.1);
cursor: pointer;
}아무 생각 없이 따로 썼다가 강의 보면서 고쳤다.
- 커서로 선택되게 하고 싶지 않을 때,
user-select: none;
cursor: auto;처음 알았다! 유용하게 쓰일 듯.
이로써... 두려워했던, 자신감도 잃었던(회복중) 당근게임 파트를 마무리했다.!!! 🎉🎉🎉🎉👏🏻👏🏻👏🏻👏🏻 포기하지 않고 계속 하니 결국 끝을 맞이 하는구나😊
이제 리팩토링 강의가 남았다 ㅎㅎㅎ 그전에 복습하고! 넘어갈 것이다.~~
비록 혼자 끝까지 완성은 못했지만, 많은 걸 배울 수 있었던 수업이었다.
게임이라는게 데이터가 저장되어야 하고, 재시작을 할 수 있다는 점에서
어떤 변수가 필요하고, 필요한 변수를 어떻게 만들어볼 수 있는 지 알게 되었다.
특히, score, timer, started(게임의 시작상태)를 저장해두는 기본 값이 필요하다는 것에서 많은 깨달음을 얻었고,, 사실 ㅋㅋ 충격🤯받음! 전혀 생각 해보지도 못했던 거라서.. 그래서 더 재밌었다!
또 함수를 이용해 기능 구현을 차례차례 해나가는 것을 보고, 혼자 먼저 실습을 해보는 데 있어서 많은 도움이 되었다.
그리고, 사람은 정말 다르기때문에, 같은 동작을 하는 코드라도 어떻게 짜는지도 정말 다르다. 이건 틀린 것이 아니라 다른 것.😃
특히 당근과 벌레를 클릭했을 때, 당근을 사라지게 하고 벌레는 팝업창을 띄우도록 할때.
나는 event.target.className을 사용했는데, 선생님은 target.matches를 사용한 부분.
이 모든 코드를 혼자 어설프게라도 구현했다면 정~말 좋았겠지만, 그러지 못했다.
나는 요소들이 각자 동작하는 것은 구현했다. 하지만 게임이 시작되면 같이 시작되어야하는 것, 게임이 멈추면 같이 동작해야하는 것들을 연결해서 생각하는 것에 부담을 많이 느꼈다. 그래서 흥미도 잃었다. ㅋㅋ 복잡하고 모르겠고 ㅜ 복합된 감정. 하나씩 차근차근 하면 될텐데 ㅎ. 앞으로 이런 감정을 잘 이겨내야겠다.
즐거웠던 실습이었다.😊
