[react] wordle 사이트

안녕하세요. Jeonhui입니다.

이번 시간에는 제가 만든 wordle사이트에 대해 소개해보도록 하겠습니다.

이 프로젝트는 22.02.24-22.02.26까지 3일에 걸쳐 제작을 하였습니다.

gh-pages를 이용하여 github 페이지를 배포하는 것은 이전 글을 참고해주세요.

2022.02.24 - [web] - [react] github 페이지 배포

사이트 접속은 https://jeonhui.github.io/wordle 입니다.

심심할 때 한 번 해보세요.

---

이 사이트는 react, redux, styled-components, framer-motion을 이용하였습니다.

wordle을 하기 위해서는 기본적인 게임 방법을 알아야하기 때문에

wordle의 게임 방법에 대해 설명드리겠습니다.

 

wordle은 단어를 입력하여 정답의 단어와 비교하여 결과를 색으로 나타내어 줍니다.

정답의 단어의 문자와 입력 문자의 위치와 같은 경우 - 🟩

정답의 단어에 문자가 포함되지만 위치는 다른 경우 - 🟨

정답의 단어에 문자가 포함되지 않는 경우 - 🟥

위의 입력을 통해 해당 단어의 힌트를 얻고, 정답의 단어를 찾는 것이 이 게임의 목표입니다.

 

이제 웹사이트에 대해 설명을 해드리도록 하겠습니다.

기본 레이아웃

wordle사이트 main화면

위 이미지는 제가 제작한 wordle 사이트의 main화면입니다.

입력은 아래 (⬜️) 부분의 입력을 하는 것이고, 각각 input box이지만, js를 통해서 부드럽게 입력이 자연스럽게 되도록하였습니다.

게임 방법은 입력 부분에 단어를 입력한 뒤(아무 문자들이나 입력해도 동작이 됩니다. 이건 데이터베이스가 부족하여 향후에 수정하겠습니다.) Enter 또는 submit 버튼을 누르면 다음과 같이 동작합니다.

wordle 사이트 동작화면

input Box를 다 채우지 않았을 경우 위와 같은 알림이 발생합니다.

이렇게 게임을 진행하면 됩니다.

가이드를 보고 싶으시면 Wordle 좌측 부분에 ?에 마우스를 올리시면 확인하실 수 있고, 진행중인 게임의 자신이 알아낸 단어들을 알고 싶다면 wordle부분에 마우스를 올리시면 됩니다. NEXT버튼을 누르는 경우, 다음 문제로 넘어가게 됩니다.

좌측 가이드 부분 / 우측 게임 진행 힌트

다음과 같이 정답 단어를 찾아주시면 됩니다.

정답화면에서는 다음과 같이 확인할 수 있습니다.

Result 밑에는 게임 결과를 Try에는 시도 횟수가 나타나도록 하였습니다.

워들게임의 결과를 sns계정에 올리는 것이 유행이라 하여 그 결과 보드도 만들어 보았습니다.

 

반응형 웹페이지

아이패드와 아이폰에서의 동작 화면

 

게임이 어려우신 분들을 위한 기능

wordle 타이틀을 여러번 클릭하시면 "모드 사용"이라고 알림이 뜨는데 확인 누르면 최대 횟수가 5번에서 10번으로 증가합니다.

 

---

이 웹사이트의 react 소스코드는 https://github.com/Jeonhui/wordle 에서 보실 수 있습니다.

추가적으로 코드 설명은 다음시간에 이어서하도록 하겠습니다. 읽어주셔서 감사합니다.

궁금하신 점있으시면 댓글 남겨주세요.