JS 농구게임 만들기
책 보고 미니프로젝트 따라하기 3탄! 여기서부터는 본격적으로 DOM 엘리먼트들을 다루기 때문에 제이쿼리가 조금씩 들어간다. 이 다음부터는 Ajax를 포함하여 나름 본격적인(?) 웹 내용을 다루는듯하다.
(1) 화면 구조 잡기
가장 먼저 HTML구조를 만들어준다. 동적으로 값이 바뀔 수 있는 요소들은 class 외에도 id를 따로 지정해준다.
이렇게 적어놓고 스타일시트는 그냥 책에 써있는 깃허브 소스에서 가져왔다.
(2) 점수 계산 함수 만들기
DOM은 스크립트가 일단 웹페이지에 있는 엘리먼트들을 맵핑시켜놓아야 정상적으로 동작하기때문에 스크립트를 연결할때 defer 속성을 붙여주어야 에러가 나지 않는다.
스크립트 파일을 연결시켜놓고 HTML부분에 온클릭 이벤트 함수를 하나 추가한다. 해당 버튼을 클릭하면 컴퓨터가 슛을 쏘고 결과를 #text에 알려준다.
스크립트 파일로 가서 함수를 작성한다. 삼항연산자를 활용하여 최대한 간결하게 작성하였다.
| getElementById() | |
| getElementsByClassName() | |
| getElementsByTagName() | |
| querySelectorAll() |
브라우저는 언제나 매핑 테이블을 만들어두기 때문에 상기의 함수들 가운데 getElementById()함수가 실행속도가 가장 빠르다.
바뀐 점수를 전광판에 반영시켜주어야 하므로 comScore 변수를 추가하고 comScore가 출력되는 #computerscore div를 선택하여 슛이 성공했을때만 전광판의 점수가 올라가도록 만들어준다.
이제 앞의 함수를 따와서 유저 슛 함수를 만든다. 단, 사용자는 2점슛과 3점슛이 나누어져있으므로 인수를 받을 수 있도록 한다.
이렇게 써놓고
컴퓨터와 마찬가지로 HTML에 연결해준다. 여기까지 했으면 점수 계산하기는 완료.
(3) 게임 규칙 구현하기 - 차례 지키기
아무렇게나 슛을 쏠 수 있게 하면 게임의 승패를 가리는 의미가 없으니 규칙을 구쳔한다.
일단 전역변수로 isComputerTurn이라는 변수를 하나 추가한다. 처음에는 컴퓨터부터 시작하도록 할 것이므로 초기값은 true로 둔다.
점수를 구현하는 함수에 로직을 추가한다. 컴퓨터의 턴이 아닌데 컴퓨터 슛 버튼을 클릭할 경우 컴퓨터의 차례가 아니라는 메시지와 함께 함수를 종료하도록 하였다.
그리고, 제 차례를 지켜 슈팅을 했을 경우 함수의 마지막에 isComputerTurn값을 false로 바꿔준다. user도 같은 로직으로 바꿔준다.
완성 후 시험화면
(4) UX 개선하기
자신의 턴에 해당하지 않는 경우 아예 버튼 자체를 비활성화시켜주고자 한다.
버튼들을 제어하고자 클래스를 추가해준다.
컴퓨터부터 시작하므로 초기값은 유저버튼이 비활성화되어있는 상태로 준다.
점수계산함수의 하단에 버튼의 활성화 상태를 바꿔주는 코드를 넣는다.
번갈아가며 활성화/비활성화가 잘 동작하는 것을 확인.
(5) 슛 횟수 차감하기
전역번수에 shotsLeft라는 변수를 하나 추가하고 초기값을 15로 준다. innerHTML에 코드를 뿌려주는 코드까지는 유저 함수와 컴퓨터 함수 양측에 삽입하되 현 규칙상 남은 횟수가 0이 되었을때 버튼을 비활성화하는 코드는 그냥 컴퓨터 쪽에만 넣어주면 된다.
완성된 모습
(6) 코드 리팩토링
지저분한 코드를 좀 더 깔끔하게 정리해보자. 우선 텍스트 출력부분부터 정리한다. showText 함수를 만들어 문자 출력부를 넣어주고 기존의 문자 출력 코드들을 모두 showText 함수로 대체해준다.
점수계산부분도 함수화해준다.
전체 코드에서 큰 비중을 차지하는 버튼제어부분도 함수로 바꿔준다.
참고도서:
[자바스크립트 프론트엔드 프로젝트 가이드]