이미지 스프라이트기법으로 이미지를 관리하여 용량을 최적화 하였습니다.- Vanilla Javascript로 웹 컴포넌트화
이벤트 위임을 이용한 기능 구현
-
각 버튼을 클릭하면 난이도별로 게임을 실행 할 수 있습니다.
-
이벤트 위임을 활용하기 위해 부모요소에게만 이벤트를 주어 각 버튼들을 컨트롤 할 수 있게 했습니다.
- 난이도별로 카드가 렌더링되고, 각 난이도별로 n초간 카드의 앞 면을 보여줍니다.
- 게임 화면에서도 마찬가지로 많게는 64개에 달하는 모든 카드들을
이벤트 위임을 활용하여 컨트롤 함으로써 메모리를 절약해주었습니다. - 게임이 시작되는 즉시 타이머가 실행이 되며 상단의 줄어드는 효과는
HTML의프로그래스바를 활용하여 구현하였습니다.
- 첫 번째 카드와 두 번째 카드가 동일한 것을 확인해주기 위해
HTML의data-속성을 사용하였습니다. - 카드를 여러장 뒤집어지는 것을 막기 위해 카드가 두장 뒤집어졌을 때 모든
li요소들에게
pointerEvent를none으로 적용해주고 카드를 다시 뒤집을 땐pointerEvent를auto로 적용해주었습니다.
- 제한된 시간 안에 같은 카드를 다 찾지 못한 경우 게임이 종료되고 모달창이 띄워집니다.
- 총 점수, 맞춘 횟수, 틀린 횟수가 표시됩니다.
- 시간 안에 카드를 다 찾은 경우 게임이 종료되고 모달창이 띄워집니다.
- 클리어한 시간과 총 점수, 맞춘 횟수, 틀린 횟수가 표시되며 각 정보들은
로컬 스토리지에 저장됩니다.
- 게임 종료 후, 스코어 보드의 정보가 변경됩니다.
- 하단의 스코어 정보는
로컬 스토리지에 저장된 정보이며, 게임이 끝난 후로컬 스토리지에 저장된
정보를 불러와 메인화면에서 렌더링을 해줍니다.
HTML/CSSJavaScript
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent