[HTML/SCSS/Typescript 프로젝트] Wordle Game

프로젝트 개요 

• Wordle 게임 만들기
• 2022.05.13-2022.05.16
• HTML/SCSS/Typescript
• https://github.com/Seungyoonkim66/wordle

Wordle : 단어 맞추기 게임  

---

 

wordle은 2021년 10월 공개되어 2021년 12월 말부터 꾸준히 인기를 얻고 있는 영어 단어 맞추기 게임입니다. 자세한 게임 방법은 링크를 참고하시기 바랍니다. 이 프로그램이 순수 자바스크립트로만 만들어졌다는 소문(?)을 듣고 흥미를 가졌다가 typescript와 scss를 공부해볼 겸 이 프로젝트를 시작했습니다.

 

---

프로그램은 한 판마다 한 단어를 답으로 설정합니다. 이때 단어를 불러오는 API로 http://random-word-api.herokuapp.com/home를 활용했습니다. 기존의 게임은 다섯 단어이지만 Wordle by seungyoon은 우측 중앙에 선택 박스에서 단어 길이를 조절할 수 있습니다. 아래는 2개를 단어 길이로 선택한 경우입니다.

사용자가 답을 입력하고 submit 버튼을 누르거나 칸을 다 채운 후 엔터키를 누르면 채점을 합니다. 채점 결과는 기존 wordle 게임방식과 유사합니다.

• 채점 전 : 회색 
• 입력한 알파벳이 답으로 지정된 단어에 속하지만 그 위치가 일치하지 않는 경우 : 노란색
• 입력한 알파벳의 종류와 위치가 답과 일치하는 경우 : 파란색
• 알파벳 종류와 위치가 모두 일치하지 않는 경우 : 빨간색 

사용자가 입력한 답이 정답이 아니라면 위와 같이 박스 색상으로 알파벳 채점 결과를 보여주고 다음 라운드를 진행합니다. 그러다가 정답을 맞춘 경우 아래와 같이 알림창이 뜨며 게임이 종료됩니다. 안내 창에는 사용자가 답을 맞추기 위해 시도한 횟수를 알려줍니다. 

게임에서 설정된 답은 answer 버튼을 눌러 확인할 수 있습니다. 

---

코드는 아래 github에서 확인하실 수 있습니다.

GitHub - Seungyoonkim66/wordle: wordle game

 

---

 

이번 프로젝트의 가장 큰 의의는 typescript를 활용해본 것입니다. typescript 기본 개념을 공부하고 직접 활용해보면서 타입스크립트의 유용함을 느꼈습니다. 자바스크립트와 달리 컴파일 하면서 타입이나 로직상 오류를 확인할 수 있어 더 정확한 코드를 작성할 수 있게 해준다는 점이 아주 좋았습니다. 특히나 자바스크립트와 호환성이 좋아 config를 덜 strict하게 설정해두고 차차 기존 프로젝트에 사용한 자바스크립트를 타입스크립트로 변환할 수 있다는 점이 아주 놀랍습니다. 앞으로 개발할 때 자바스크립트보다는 타입스크립트를 사용하는 방향으로 나아갈 것 같네요! 

또 css만 사용하다가 처음 scss를 사용해보았는데 많이 활용해보지는 못했지만 css 파일에서 변수를 사용할 수 있다는 점이 아주 흥미로워 scss, sass에 대해서도 더 공부해볼 계획입니다.

첨부한 github에서 프로젝트를 다운받아 npm install > npm run dev 로 실행시켜 맘껏 수정하셔도 되고 그냥 index.html을 켜서 게임을 즐겨보세요!