노래하는 유령 웹 게임 만들기

gicomong·2021년 5월 15일
25
post-thumbnail

1. 나의 미니 프로젝트, 노래하는 유령 게임

회사일을 제외하고는 프로젝트를 할 일이 거의 없어졌다.
입사 전에는 개발자 친구들과 함께 대회도 나가고 소규모 프로젝트도 했지만...!
코로나라서 대회도 없고, 다들 입사준비로 바쁘기도 하고... 휴ㅠ

그래서 대안으로 나홀로 미니 프로젝트를 진행해보았다.
간단하게 css, scss, js를 이용해 노래하는 유령 게임을 만들었다! 😚😚




2. 유령이의 동작 모습

동작에 필요한 키는 1~8까지의 숫자키엔터키 뿐이다.
숫자키를 누르면 도,레,미,파,솔,라,시,도를 연주할 수 있다.
gif를 보면 우리 유령이가 열심히 노래하고 있다(와 뒷 배경에 네온색으로 계이름이 나오잖아!)



엔터를 누르면 유령이가 쉴 수 있다.
아래 사진을 엔터를 눌렀을 때 쉬고 있는 유령이..(쉴 때는 선글라스는 쓰지 않G~)



소리의 경우, 처음에는 피아노 소리를 하려했으나 HIP하지 않아서 통과!
그래서 찾다가 오타마톤이 갑자기 생각나버린 것이담.
마침 유투브에 오타마톤 음계 영상이 있길래 열심히 녹음했다.(와..노가다!ㅜ)
아래 사진이 그 오타마톤이라는 악기이다(다다토이에서 살까 했지만 내가 과연 쓸까 싶어 노구매..ㅎ)



앗 그리고 연주하려는데 갑자기 키가 생각이 나지 않을 수 있다!🧐
그럴 것을 대비해 오른쪽 상단 물음표 버튼을 만들어 두었다 😁😁
해당 버튼에 마우스를 hover하면 바로 설명창이 나타난다.

|설명버튼위치|설명창 모습|
|---|---|
|||



그리고 마지막으로 자질구리하게, 눈이 깜박이는 액션과 마우스에 따라 창이 움직이는 액션 등 부수적인 애니메이션을 추가하였다. 시작할 때는 가벼운 마음으로 애니메이션을 넣었으나, 끝도 없이 늘어나는 나라는 클라이언트의 요구ㅜㅜ(나는 욕심쟁이야....)



3. 구경하러 가기는 요기~

이번 미니 프로젝트는 프로젝트를 시작한다는 가벼운 마음으로 진행한 탓에 서버는 없다.
다음 미니 프로젝트는 서버와 연동해보는 방향으로 해볼까 생각 중이다.
게임 맛보러 가실 분들은 아래를 클릭하면 됩니다~
(웹 최적화 게임이니까 웹으로 하시는 걸 추천 드립니다 👍👍)

게임 맛보러 가기



4. 추가

  • 2021.05.15 updated
    : 9번, 0번으로 높은 레, 를 낼 수 있습니다.
    : safari에서 audio tag가 preload 버그가 있어 safari는 공사중입니다. 🙇🏼



profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

관심 있을 만한 포스트

13개의 댓글

comment-user-thumbnail
2021년 5월 15일

샵/플랫 음계도 있으면 좋겠어요!

1개의 답글
comment-user-thumbnail
2021년 5월 18일

우와!! 썸네일이 귀여워서 들어왔는데 사이트도 되게 귀엽네요ㅎㅎ 잘보고갑니당

1개의 답글
comment-user-thumbnail
2021년 5월 19일

저는 프로젝트 경험이 적어서 혼자서 뭘 만들어야될지 고민이였는데 사소한 것부터 시작해봐야겠네요:D

1개의 답글
comment-user-thumbnail
2021년 5월 19일

너무 귀여운 프로젝트입니다 👍👍👍👍

1개의 답글
comment-user-thumbnail
2021년 5월 20일

이걸로 피아노 치는영상 만들면 재밌겠네요

1개의 답글
comment-user-thumbnail
2021년 5월 23일

너무 귀여워요!!!! nft 마켓에 올려도 손색 없는 작품이네요ㅎㅎ!!

1개의 답글