JS 이용해서 가위바위보 만들기

JS로 간단하게 만들어 볼 수 있는게 없을까 하고 시작해 약 하루정도 걸린 가위바위보 만들기였다.

 

확실히 HTML과 CSS만 사용할 때 보다 할 수 있는것이 더 많은 것 같다.

 

HBSPS/RPS (github.com)

GitHub - HBSPS/RPS

잘 만든 코드는 아니지만 깃허브에서 코드를 볼 수 있다.

 

또한 gh-pages를 이용해 언제든 웹페이지에 접근할 수 있도록 했다.

RPS! (hbsps.github.io)

RPS!

 

혹시나 gh-pages를 적용해 보고 싶다면 아래 글을 참고하면 된다.

2022.04.01 - [IT/개발] - (GitHub Desktop 이용)GitHub gh-pages로 공짜 호스팅하기

(GitHub Desktop 이용)GitHub gh-pages로 공짜 호스팅하기

---

 

작성 순서를 기록하자면

1. 기본 HTML의 작성

2. JS

3. CSS로 마무리

이정도가 될 것이다.

 

HTML은 별 것 없이 웹 페이지에 들어가는 내용들과 app.js, style.css 파일을 불러오는 역할을 한다.

 

CSS는 본인의 취향이니 넘어간다.

 

JS를 가볍게 보면

우선 main함수에서 게임을 진행할 것이며 main함수 안에 가위바위보 각 요소를 불러와서 addEventListener를 통해 game함수를 진행한다.

 

game함수의 경우 각 경우에 대해 switch문을 적용했다.

(주의할 점은 switch/case문을 사용할 때 case에 break를 걸어야 한다는 것이다. break를 걸지 않으면 조건이 만족되어 코드가 실행된 후 다음 case를 중복실행하는 경우가 발생한다)

 

getComChoice 함수의 경우 컴퓨터가 고를 수 있는 경우를 리스트에 넣어두고 Math모듈의 random함수와 floor함수를 통해 해당 리스트에서 무작위 요소를 반환하도록 한다.

 

win, lose에 관한 경우는 myScore 또는 comScore를 1씩 더하고, draw의 경우 점수 변화 없이 text만 "Draw"를 출력하도록 해준다.

 

추가로 Reset 버튼을 넣어 언제든 게임을 처음부터 진행할 수 있도록 했다.

 

현재의 경우 좌(You)의 선택은 보자기이고, 우(Computer)의 선택은 주먹이다

우선 점수와 text를 모두 초기 상태로 돌린다. 이후 좌우(위의 사진의 경우 보자기/주먹)에 표시되는 사용자와 컴퓨터의 선택이 있는 경우 해당 요소를 삭제하도록 한다.

 

If문의 조건에 null이 아닌 경우를 걸었기 때문에 아무 선택도 하지 않은 처음 상태(document.querySelector를 하면 null값이 됨)에서 Reset을 누르면 해당 If문은 실행되지 않을 것이다.

(어차피 아무것도 없기 때문에 지울 필요도 없다)

 

또한, leftExist에 대한 조건만 걸어준 이유는 어차피 좌우는 같이 표시되기 때문에 좌측에 대해서만 검사해줘도 좌우 동시에 검사하는 효과를 얻을 수 있기 때문이다.