포포를 찾아라 미니 게임 만들기(3)

0. 링크

https://popo-game.netlify.app/

1. CSS 수정

모바일에서도 잘 동작하도록 CSS를 수정했다.

img 1	img 2

---

그런데 모바일에서는 고래들이 한쪽에 쏠려서 배치되는 문제가 발생했다.
이는 고정 크기였던 WHALE_SIZE를 현재 gameTarget의 clientWidth를 받아오는 것으로 수정함으로써 해결됐다.

const WHALE_SIZE = gameTarget.clientHeight;

확실히 반응형으로 만드는 것이 살아있는 프로젝트처럼 보여서 좋지만, PC로 버벅임 없이 구현되던 것이 모바일에서는 잘 버벅였다.

2. 문제점

• 이모티콘 이미지가 커서, 모바일에서는 한번에 31개가 보여지기까지 시간이 걸렸다.
• PC에서는 모든 기능이 문제 없이 구현되지만, 모바일에서는 github page, netlify 모두에서 첫 로딩 후 게임 버튼을 누르면 바로 stopGame 로직이 실행되는 에러가 났다. 크롬 개발자 도구로 폰 화면을 확인할 땐 문제가 없는데 폰에서는 문제가 생겼다...아주 큰 문제.

3. 해결

1. 이미지 버벅임

• 이모티콘과 배경 이미지를 다시 제작하는 것은 시간 소모가 크므로 배제
• startGame 함수에서 아이콘 생성과 배치를 맨 위로 끌어 올렸더니, 조금 덜 버벅이는 느낌이 들었다!
• 리액트로 다시 만들어 보는 것이 방법이 될 수 있을 것 같다. 로딩 시간은 걸리겠지만, 구현은 훨씬 깨끗하게 되지 않을까? 리액트를 공부하고 있는 중이라 확실치는 않지만, 충분히 시도해 볼 만하다.

2. 모바일에서 로딩 에러

• gameBtn 내에 i 태그와 span 태그를 나눠 넣어두고 한번에 받아온 뒤, innerText 를 지정해뒀다... 아주아주 아마추어같은 실수였다😭 찾고난 뒤 어이가 없었지만, 다시는 실수 안해야지. 잘 되니까 기쁘다!
• 역시 모든 문제는 컴퓨터가 아니라 나에게 있다(아주 희망적인 이야기!)

그 외

• reload 시에 splash 화면이 뜨도록 했는데, 새로고침 버튼을 눌렀을 때 reload 되지 않고 splash 가 뜨도록 하는 것이 성능에 좋을 것.
• 포포 게임은 여기서 잠시 멈춰두고, 다른 프로젝트로 리액트 연습을 더 한 뒤에, 리액트로 다시 만들어야겠다.