항해 플러스: 제 1회 코육대 - 행맨 게임

https://hanghaeplus-coyukdae.oopy.io/

항해 플러스: 제1회 코육대

 

항해에서 진행하는 코육대에 참가했다.

세뱃돈 계산기, 행맨 게임, 송편 터뜨리기, 테트리스, 총알 피하기, 자유 종목 6가지가 있었고 행맨 게임을 선택했다.

 

행맨 게임은 8가지 미션과 4가지 제약사항이 존재했다.

1. 가족들이 함께 볼 수 있도록 프론트도 구현해서 배포하세요.
2. 문제를 선택할 수 있도록 영어 단어를 랜덤으로 3개 띄워주세요.
3. 선택한 문제의 단어를 글자 단위로 숨깁니다. (e.g., "apple" -> "_ _ _ _ _")
4. 화면에 26개 알파벳을 띄워주세요.
5. 선택한 알파벳과 정답을 비교합니다.
6. 일치하는 알파벳이 있을 경우 기존 UI에서 사라지고 해당 위치에 표시됩니다.
7. 틀릴 경우 기존 위치에서 알파벳이 빨간색으로 바뀌고, 오류 횟수를 증가시킵니다.
8. 오류 날 때마다 ‘교수대-밧줄-머리-팔-손-몸통-다리-발’ 순서로 그려서 그림이 완성되면 ‘실패’ 를 띄웁니다. (오류 횟수 8번 이상은 실패)



• 랜덤으로 띄워주기 위해 영어 단어는 30개 이상 등록되어 있어야 합니다.
• 등록된 영어 단어의 글자 수는 최대 10개입니다.
• 사용자가 모든 글자를 맞추거나 오류 횟수가 8번 이상일 경우 게임이 종료됩니다.
• 게임이 종료되면 정답을 표시하고 결과 메시지를 출력하세요.

1번 미션을 해결하기 위해 React를 이용하여 진행했고, 하나의 페이지만을 생성했다.

 

2번 미션을 해결하기 위해 메인 페이지는 아래와 같이 생성했다.

3번 미션 처럼 위의 보라색 세 버튼 중 하나를 클릭하면 랜덤으로 단어가 선택되고 그에 맞는 밑줄이 생성된다.

4번 미션에 명시되어 있는 것처럼 26개의 알파벳 버튼도 함께 생성된다.

이 때 알파벳 버튼은 키보드 형태로 배치했다.

 

 

알파벳을 선택했을 때 맞으면 해당 알파벳이 진한 파란색으로 바뀐다. (5번 미션)

그와 동시에 밑줄 대신 해당 문자로 나타낸다. (6번 미션)

 

알파벳 선택 시 존재하지 않는 알파벳을 선택한 경우 해당 버튼은 빨간색으로 바뀌고 행맨의 이미지가 바뀐다. (7번 미션)

버튼 클릭시 정답과 상관 없이 한 번 누른 버튼은 다시 누를 수 없도록 하였다.

빨간색 버튼이 8개가 되는 순간 게임은 종료된다. (8번 미션)

 

 

제약사항 1번을 만족하기 위해 30개 이상의 단어를 사전에 넣었고, 해당 단어들 중 랜덤으로 선택되게 했다.

단어들은 추석 관련 단어들로 채워 넣었다.

제약사항 2번을 위해 11글자 이상의 단어도 제외했다.

 

사용자가 답을 맞추거나 행맨이 완성된 경우 게임을 종료한다.

종료시 실패와 성공 여부를 띄우고, 정답과 다시 시작 버튼을 생성한다.

 

---

https://abbiddo.github.io/hangman/

위의 사이트에서 행맨 게임을 해볼 수 있다.

 

 

이 프로젝트에서 가장 어려웠던 부분은 배포하는 부분이다.

github에서 배포, cloud type에서 배포 등 찾아보다가 github 배포를 선택했다.

 

그리고 처음 구현 시 단어 중에 위의 예시와 같이 똑같은 알파벳이 여러번 들어가는 경우를 고려하지 않아 시간이 걸렸다.

프론트에서 가장 힘든 것은 배치와 사이즈가 아닐까 싶다.

혼자라면 하지 않았을 간단한 프론트 프로젝트를 해볼 수 있는 경험이 된 것 같다.

 

그림은 직접 그려 사용했다.