210118_TIL (포켓몬게임 Javascript 완성)

🍎 오늘 한 일

---

✔️ 포켓몬 게임 - Javascript 마무리
오전부터 오후까지 시간이 있어서, 페어분과 어제 못다한 기능들을 구현하기로 했다. 오전에는 캐릭터들에 애니메이션들을 추가하는 작업에 중점을 두기로 했고, 오후에는 localStorage에 정보를 저장하고 불러오는 작업에 중점을 두기로 했다. 사실 둘 다 잠을 별로 못자서 굉장히 멍한 상태였는데, 그 상태로 포켓볼이 벽에 닿으면 방향을 바꿔 튕겨나가는 애니메이션을 추가하는 작업을 하다가 약간 멘탈이 나갈뻔하기도 했다. transform이나 transition은 직관적으로 어떤 애니메이션이 적용되는지 바로 알 수 있는데, 포켓볼 작업은 직접 수식을 적용해야했기 때문이었다.. 페어분의 제안으로 아예 잠시 리프레시를 했더니 오히려 머리가 맑아져서 오후 시간동안 남은 할일들을 빠르게 끝낼 수 있었던 것 같다. local Storage에는 배열 형태로 각 유저의 정보가 담긴 객체를 넣어주어 정보를 기억하도록 했다. 기존에 동일 id로 접속한 기록이 있으면, 이전 정보가 담긴 객체를 불러와 게임 시작시 초기값으로 사용하고, 게임이 끝나면 그 객체에 업데이트된 정보를 넣어주는 부분이 헷갈렸는데 이 부분은 for of문과 조건문을 통해 해결할 수 있었다.

✔️ 포켓몬 게임 - 새로 알게된 것 기록해두기
사실 아직은 내가 배운걸로 어디까지 만들 수 있는지도 잘 모르겠고, 또 얼마나 더 많은 기능이 있는지 가늠도 안되는 상태라 기능을 구상할 때도 일단은 다 해보고 안되면 말자!라는 마음이었다. 잘만 검색하면 구글에는 정말 모든게 다 있기 때문에., 많은 도움을 받아 기획했던것과 거의 비슷하게 완성할 수 있었다. 검색을 통해 복붙해온 코드를 변수명이나 일부 값만 바꿔 가져다쓴 부분도 있었는데, 우선 시간 내에 완성부터하고 이해하자고 하고 넘어갔었다. 그래서 완성 후 이런 부족한 부분들은 좀 더 제대로 찾아보는 시간을 가졌다. 특히 이번에는 처음 보는 애니메이션과 관련된 CSS 속성이나 코드들이 있기도 하고, 이벤트와 관련해서 궁금한 것들이 생겨서 내일 마저 좀 더 알아보도록 해야겠다. 몸은 좀 힘들었지만 페어분과 처음부터 끝까지 함께 협업하며 재밌게 진행했기도 했고 기획대로 잘 마무리 한 것 같아 기록으로 남기려고 회고록을 간단히 쓰던 중이었는데, 새로 알게된 것들도 추가해 내일 마무리짓도록 해야겠다.

 

🍎 기억할 것

---

✔️ pointer-events: none;
 HTML 요소에 정의된 클릭, 상태(hover,active..), 커서 옵션 등 비활성화하기

 

🍎 더 공부할 것

---

✔️ 객체 정렬로 게임에 유저 순위 뜨게하기
✔️ keyup, keydown, keypress 동작의 차이점 정확히 이해하기
✔️ relative, absolute 개념 정확히 알아두기
✔️ grid...