Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/crud0626/catch-to-carrot

This repository was made referring to Dream Coding by Ellie's lecture
https://github.com/crud0626/catch-to-carrot

Last synced: 5 days ago
JSON representation

This repository was made referring to Dream Coding by Ellie's lecture

Host: GitHub
URL: https://github.com/crud0626/catch-to-carrot
Owner: crud0626
Created: 2021-11-08T13:31:52.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2022-06-20T13:34:48.000Z (over 2 years ago)
Last Synced: 2024-11-09T22:08:53.729Z (2 months ago)
Language: JavaScript
Size: 6.81 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Catch-to-carrot

## 프로젝트 설명

정해진 시간내에 버그를 피해 당근을 잡으면 승리하는 게임입니다.

Demo Link : [Catch-to-carrot](https://crud0626.github.io/Catch-to-carrot/)

## 기술 스택

## 지원 브라우저

| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge ✔️ | last version ✔️ | last version ✔️ |

## 특징

- 모바일 환경을 감안한 아이템 배치

다양한 뷰포트 사이즈에 맞게 아이템이 배치될 수 있도록 유동적으로 아이템을 배치해야 했습니다.

다만, 적용 도중 **이미지 크기로 인해 위치가 0vw(vh) 또는 100vw(vh)에 가깝게 배치되면 스크롤바가 생기는 현상을 발견**하였습니다.

이를 해결하기 위해 유저가 플레이 버튼을 클릭하면 **현재 뷰포트의 크기를 기준으로

아이템의 절반크기를 제외하고 배치될 수 있도록 배치 가능 영역을 계산하는 로직을 추가**하였습니다.

---

- 일시정지 기능 추가

게임 사용성 개선을 위해 일시정지 기능을 추가하였습니다.

다만, 일시정지 기능을 적용하는 단계에서 일시정지 중 아이템이 클릭되는 현상을 발견했고 이를 막기 위해 2가지 방법에 대해 고민하였습니다.

> 1. 기존에 등록된 이벤트를 제거하는 방법
> 2. 모달을 감싸는 컨테이너를 추가해 필드 부분을 컨테이너로 가리는 방법

위 2가지 방법을 모두 수행해보고 성능 측정 및 코드의 가독성을 고려했을 때 두번째 방법이 적합하다고 판단되어 두 번째 방법으로 적용하였습니다.

---

- 일시정지 및 난이도 설정 기능 추가

난이도가 있으면 좋을 것 같아 Easy, Normal, Hard로 3가지의 난이도 설정 기능을 추가하였습니다.

마크업은 input태그의 radio를 통해 마크업 하였으며 난이도에 따라 아이템의 개수가 달라집니다.

**난이도를 선택하지 않으면 시작할 수 없고 게임 진행중 및 일시정지중에는 난이도를 변경할 수 없도록 하였으며

게임 종료시 난이도 선택 창을 표시하며 이전에 선택된 난이도를 유지시켜 별도 동작 없이 redo버튼을 클릭하게 되면 이전 난이도 그대로 진행되도록 로직을 작성**했습니다.