노래퀴즈 - 미니게임 만들기

 

 

-원래는 행맨 만들기 실습이였는데 인스타그램 이벤트 하면서 알게 된 낱말퀴즈가 생각나서 퀴즈 형식으로 바꿔서 만들어 봤다.

 

[UI 레퍼런스] 

- 직접 창작해서 만들까하다가 클론코딩처럼 하고 싶어서(UI짜기 조금 힘들어져서) 구글에서 적당한 이미지를 찾아 이를 참고하여 만들었다.

- 원래는 만들면서 디자인을 변경하려고 했지만 하다보니 시간적 여유가 많질 않아 그냥 그대로 옮겨왔다. 

 

 

[MOCKUP] 

 

 

[결과물]

- 만들면서 생략된 사항 

1. 정답시 노래재생

2. 기회를 하트 차감으로 표시 ➡️3회 이상 오답 선택시 alert활성화

3. 원래는 순서에 맞게 글자를 선택해야지 정답으로 간주하려고 했으나 괜히 복잡해지는 느낌이라 생략 

 

- 위의 레퍼런스와 비슷한 이모티콘 일러스트를 찾을 수 있어서 해당 이미지를 넣었다.

- 그외 낱말 퀴즈영역은 하나하나 디자인해서 추가했다. 

 : 처음에 table형식으로 만들어보고 싶어서 시작했다가 괜히 더 헷갈리고 불편해서 다시 다 갈아엎고 div, button으로 변경해서 만들었다 

  ➡️ 그래서 처음에 레이아웃 잡는 과정에서 시간 소요가 꽤 됐다.

 

 

 

 

시간 부족으로 구현하고 싶은걸 다 넣진 못했지만 목표했던 결과치에 가깝게 꽤나 만족스러운 하나의 결과물을 만들수 있어서 좋았다.