유연이의 가위바위보 게임 제작기
제작 기간 : 4.1~4.17
제작기간이 왜이렇게 기냐고 물어본다면.. 교육듣고 현생에 치이느라.. 야금야금 만들었다.
가위바위보 게임 제작 배경..
velog를 서성이던 중.. 토이 프로젝트를 해야겠다는.. 생각이 뇌리를 스쳐서 시작했다.
사실 토이 프로젝트를 하려면 주제도 많고, 아이디어도 많다.
그럼에도 불구하고 가위바위보 게임을 한 이유는..
- 요구 사항이 명확하다. (가위바위보 할 줄 모르는 사람 없음)
- 요구 사항이 명확하다..
- 응응..
난 학부에서 딥러닝만 아카데믹하게 만져봤지 프로그래밍을 해본 적은.. 전무했기 때문에
작은 것부터 야금야금 해가자 라는 취지에서 시작했다.
최근 JavaScript 튜토리얼을 또 야금야금 공부했기 때문에 ㅋ
가슴이 웅장해져서 바로 뛰어든 것도 있다.
각설!
가위바위보 게임 소개
전체 순서도:
사용자가 본인의 패를 선택 -> 컴퓨터도 랜덤하게 선택 -> 승부를 가림 -> 점수 집계 -> reset 누르면 게임 초기화
설명
-
가위바위보를 하면 상대의 패는 미지수이므로 사용자의 패만 고를 수 있게 하였다.
-
사용자가 패를 고르는 방법 : 1초마다 가위-바위-보 순으로 보여지는 좌측 이미지를 사용자가 클릭하면 클릭된 이미지가 사용자의 패로 선택되게 하였다.
(원랜 내 사용자 선택 이미지를 랜덤하고 빠르게 보여줬는데 내 의지대로 고를 수 없다는 피드백이 있어서 가위 바위 보 순서로 천천히 보여주는 걸로 수정했다.) -
비기면 점수엔 변동이 없다.
코드 부분 설명
유저가 고를 패를 띄워주는 부분이다.
적당한 간격을 두고 이미지를 보여줘야 하기 때문에 중첩 setTimeout을 이용했다.
그리고 나중에 승패를 가리면 잠깐 쉬어가는 시간이 필요하기 때문에 timerId에 담아줬다.
메인 파트다.
나는 이미지를 rock.png <- 이런식으로 저장해놨기 때문에 parsing 작업이 필요했다.
parsing을 통해 유저와 컴퓨터의 선택을 알아내고
match function을 이용해 승부를 가려냈다.
승부를 가려낸 후에 바로 showImage가 정신없이 돌아가면 뵈기 싫기 때문에 clearTimeout을 이용해 timerId 취소했다.
그런 다음 3초뒤에 다시 showImage 재개!
user와 com의 선택이 같으면 점수에 변동이 없으므로 return 한다.
나머지 승패가 갈리는 경우엔 유저의 선택을 기준으로 컴퓨터의 선택에 따라 승패를 가려
유저의 점수나 컴퓨터의 점수를 +1해주고, innerHTML을 이용해 화면에 반영해 주었다.
화면 속 reset을 누르면 동작하는 파트다.
무르기
reset 버튼을 누르면 점수가 0으로 초기화되고, 게임을 reload한다.
페이지 다시 불러오기에는 window.location.reload가 정석이고..(맞나?) 뭐 2가지가 더 있다던데
차이점을 추가로 공부해봐야겠다..
회고
일단 룰이 명확한 가위바위보 게임으로 토이 플젝을 시작함으로써 머리 트기가 좋았다.
특히.. setInterval과 setTimeout을 쓸 때 이미 난 튜토리얼에서 바삭하게 익혔다고 생각했는데 아니라서 고생 좀 했다.. showImage 3초후 재개하는 걸 생각을 못해내가지구 며칠을 할애한건지.. 그냥 말 그대로
멈춘 후 -> 3초 있다가 -> showImage반복! 이거라서
clearTimeout -> setTimeout -> setInterval인데 말이죠 ㅋ
알고 있다고 착각한 듯 ㅋ
그리고 난 분명히 가위바위보니깐 별 거 없겠지 하고 칭구들하구 혈육한테 보여줬는데 역시 첫빠따부터 완벽하게 할 리가 없었다.
고칠거 투성이임
어디내놔도 부끄러운 내 가위바위보
근데 배포함 ㅋ 히힛 ^__^ 안부끄러워
그래도 오랜만에 코드 짜면서 머리가 바삭바삭하게 돌아가는 맛을 느껴서 재밌었다..
그럴만한 수준은 아니지만.. 뭐.. 그렇다구용
보완할 점
- 게임 룰 소개
- 디자인..
- 페이지 리로드 방법
