JavaScript - 카페 알바 게임 ☕

 

카페알바 게임

자기전에 갑자기 생각나서 일어나자마자 하루종일 재밌게 만들어본 커피 만들기 게임이다.

 

사용언어

HTML, CSS, JavaScript

 

계획

 

간단한 기능과 디자인만 생각해봤다. 생각한 대로 거의 다 만들어내긴 했다.

 

 

 

1. 주문받기

버튼을 눌러 3가지 메뉴 중 하나를 랜덤으로 받는다.

 

2. 커피 만들기

제시된 레시피를 참고하여 재료 버튼을 클릭해서 커피를 만든다.

 

 

3. 제조완료

제조완료 버튼을 누르면 주문받은 커피와 비교해서 레시피 내용과 일치하는지 확인하고 일치한다면 긍정적인 코멘트를, 틀리다면 부정적인 코멘트를 출력한다.

 

4. 다시하기

페이지를 새로고침해서 다시 게임을 시작할 수 있다.

 

 

리뷰

1. 간단한 기능만 넣어서 빠르게 만들어봤다. 많이 부족하고 코드는 엉망이지만 하나씩 고쳐나가면서 더 재밌는 기능을 넣어볼 생각이다. 일단 직접 만들어보면서 내가 박스모델에 대한 이해가 많이 부족하다는 걸 알았다. 친구에게 링크를 보내주고 싶은데 미디어 쿼리를 못해서 인터넷으로만 봐야하는 슬픔.. 얼른 이 부분을 공부해서 보완해야겠다.

2. querySelect는 여러 요소들 중 첫번째 요소만 셀렉한다. 이걸 몰라서 스택오버플로우에 처음으로 질문해봤다가 빛삭했다. 기본개념을 다시 공부해야겠다ㅎ💦

3. 재료버튼은 각각 독립적으로 작동해서 숫자를 증가시켜야 하는데 하나의 클래스로 묶어서 셀렉해버리면 기능이 꼬인다. 버튼에 각각 다른 id를 넣어서 셀렉하고 각각 다른 초기값에 숫자 증가 코드를 썼더니 숫자가 중복 증가되는 문제를 해결할 수 있었다.

4. 메뉴 추가, 제조 시 재료 감소 버튼 추가, 코멘트 박스와 버튼, 글씨 등 css 디자인은 빠르게 추가할 수 있다. 다음주부터 박스모델과 리팩토링 공부 열심히 해서 엉망진창 코드를 싹 고쳐보는게 목표다. 다 이해하게 되면 튜토리얼을 만들어볼 것이다.