JS 가위바위보 게임 만들기

JS 가위바위보 게임 만들기

자바스크립트 문법은 학습했지만 정작 프로젝트를 제대로 만들어본 적이 없는것같아 책 한권을 잡고 자바스크립트 문법들을 쭉 한차례 정리할 겸 간결한 샘플프로젝트를 만들어보려고 한다.

(1) 화면 만들기

가장 먼저 화면 구조를 잡아준다. div>button *3 식으로 emmet 식을 사용하면 엄청나게 빠르게 만들수 있다. css는 분리하는게 바람직하기는 하지만 워낙 간단한 스타일이므로 이번에 한해 인라인으로 작성한다.

(2) 스크립트 작성하기

(i) 유효성검사

연결해둔 스크립트 파일에 승패 계산에 사용할 함수를 입력한다. 버튼으로 입력받는거라 사실 틀릴 일은 없긴 하지만 방어적으로 유효성검사 구문을 한 줄 넣어준다.

(+) 번외: 연산자 정리

겸사겸사 파이썬과 자바를 왔다갔다하느라 은근 헷갈리는 연산자들 몇개를 간단하게 표로 정리해보았다.

연산자 종류 의미 == / != '값'만 비교하는 연산자. (예를 들어, int 1 == String 1이다.) === / !== 값 + 변수값까지 비교하는 연산자 && AND (당연히 3개 이상 이을수도 있다!) || OR ! '~'. !!식으로 두번 적으면 '~~'가 되므로 원래 값으로 돌아감.

여담으로 JS는 Short Circuit이라는 개념을 차용하여 && 연산자를 사용하였을 때 왼쪽이 False일 경우 오른쪽 조건은 아예 실행하지 않는다고 한다. 자바는 이렇게 하려면 따로 부호로 구분해야했던 것 같은데... 여러모로 똑똑한 언어다.

(ii) 상수 선언하기

사람과 컴퓨터가 내는 패는 모두 가위, 바위, 보의 세가지 가운데에서 나온다. 깔끔한 코드를 위하여 사용할 패들을 상수로 선언해준다. 상수를 선언할 때에는 NUMBER_OF_PEOPLE과 같이 대문자와 언더바만 사용하는 것이 암묵적인 룰이라고 한다.

(iii) 컴퓨터의 패 계산하기

랜덤의 국룰 Math.random() 함수로 컴퓨터의 패를 만들어준다. userInput은 온클릭 이벤트 핸들러로 각 버튼요소 클릭시 함수에서 각각의 인수를 넘겨받는 구조로 만든다.

(iv) 승패 계산하기

승패를 계산하는 코드를 작성하여 함수를 마무리한다.

(v) 버튼에 이벤트 핸들러 달기

버튼에 이벤트 핸들러를 달아 가위바위보 게임을 완성한다. 인수가 없더라도 ()를 생략하면 해당 함수의 리턴값이 아니라 함수 코드 자체가 콘솔에 찍히니 주의한다.

코드가 마무리되었으니 잘 찍히는지 확인해본다.

잘나옴

책에서는 컴퓨터의 패와 승패를 동시에 보여주는 구조라 result변수를 이용하여 코드를 한차례 더 리팩토링했지만 나는 어쩌다보니 컴퓨터의 패 없이 그냥 승패만 보여주는 구조로 만들어버려서 그 부분은 생략했다. 그러면 JS로 기초적인 가위바위보 게임 만들기 끝!

참고서적 :

[자바스크립트 프론트엔드 프로젝트 가이드]

from http://hardblackpencil.tistory.com/43 by ccl(A) rewrite - 2021-09-20 22:01:42