JS 농구게임 개선하기

(1) 확률 다변화하기

 

기존에는 컴퓨터와 유저 모두 2점슛은 0.5확률, 3점슛은 0.33 확률로 성공하으나 게임의 다변화를 위하여 확률변수들을 좀 더 추가해준다.

 

percent2는 2점슛의 성공확률, percent3은 3점슛의 성공확률이다.

 

 

하드코딩되어있던 부분들을 변수명으로 바꿔주고 점수에 따라 컴퓨터의 슛 성공 확률을 바꿔주는 updateAI 함수를 추가해준다. 

 

 

UpdateAI 함수의 내용을 적어 각 경우에 따른 퍼센트 값을 넣어준다.

 

---

(2) 코드 리팩토링

 

 

변수들을 좀 더 알기쉽게 객체데이터로 그룹핑한다. 

 

하... 일괄로 바꿨다가 고치느라 죽을뻔함

 

 

객체 동적할당을 활용하여 길었던 슈팅 로직 부분도 리팩토링해준다.

 

 

기존에 score로 되어있었던 매개변수를 shootType으로 마저 바꿔주면 여기도 리팩토링 끝.

 

---

 

(3) jQuery 적용하고 코드 리팩토링하기

 

https://jquery.com/

jQuery

 

CDN으로 설치한다. 제이쿼리는 기본적으로 오브젝트를 배열 형태로 리턴하므로 HTML 문서에 아직 존재하지 않는 엘리먼트를 지정해도 에러가 뜨지 않는다.

 

기존에 쓰던 함수들을 제이쿼리로 쫙 바꿔준다. 일반변수와 혼동하지 않도록 제이쿼리 객체의 변수명에는 $기호를 붙여주는것이 관례이다. 

 

 

 (변수명).innerHTML 형태로 처리하던 구문들을 jQuery html 함수로 바꿔준다.

 

 

QuerySelectorAll이나 getElementsByClassName으로 처리하던 부분들도 prop()함수로 처리해준다.

 

 

 

---

(4)jQuery로 어플리케이션에 부가옵션 달기

 

jQuery로 어플리케이션의 상태표시창에 페이드인 페이드아웃 옵션을 더해준다. (※ elem.hide() / elem.show() 함수로 display: none / display: block과 같은 효과를 낼 수 있다.)

fadeIn과 fadeOut은 모두 비동기함수이기 때문에 이렇게만 입력하면 화면이 깜빡거리며 이상하게 뜬다. 

 

 

이런식으로 fadeOut 뒤에 실행할 내용을 콜백으로 넣어주어야 정상적으로 작동한다. 참고로 앞의 400의 단위는 ms이다.

 

이 움직임을 표현할 방법이 없네

 

다음으로는 전광판에 animateNumber라는 effect plugin을 이용하여 효과를 넣어보자. 

 

https://aishek.github.io/jquery-animateNumber/

jquery.animateNumber – simple number animation jQuery plugin

 

순서에 유의하여 html 파일 위에 다운받은 파일의 경로를 선언한다.

 

 

공식문서를 참고하여 해당 애니메이션 플러그인을 적용해준다.

 

 

---

(5) 시작 카운트다운 기능 만들기

 

script defer 속성을 붙이면 DOM이 로드된 상태에서 스크립트를 불러오기는 하지만, 이 시점은 여전히 DOMContentLoaded 이벤트가 발생하기 이전이다. 따라서 DOMContentLoaded이벤트가 발생했을때 특정 이벤트를 실행시켜주기 위해서는 별도의 이벤트 핸들링이 필요하다.

 

 

다음과 같이 실행할 함수를 $()로 감싸면 편의함수가 실행되어 손쉽게 DOMContentLoaded 이후 해당 함수를 실행할 수 있게 된다. 

 

(!+) DOMContentLoaded 이벤트 vs load 이벤트

load 이벤트 또한 DOMContentLoaded 이벤트와 마찬가지로 페이지의 모든 요소들이 로드되었을 때 호출된다. 그러나 DOMContentLoaded는 각 DOM 엘리먼트가 로드되어있는지만 확인하는 반면 load이벤트는 엘리먼트 안에 들어있는 콘텐츠 (ex. <img>)들이 모두 로딩된 이후 실행횐된다.

 

콜백지옥

 

setTimeout()함수를 중첩하여 카운트다운 기능을 만든다. Promise를 이용하면 좀 더 깔끔하게 구현할 수 있겠지만 간단하게 만드는것이므로 일단은 이것으로 만족하기로 한다.

 

카운트다운중에 버튼을 누를 수 있어선 안되므로 버튼 초기값을 disabled로 바꿔주고 

 

카운트다운이 끝나고 컴퓨터부터 시작한다는 메시지가 뜨면 그때부터 컴퓨터 버튼을 누를수있게 만들어준다.

 

 

 

정상적으로 작동한다. 이로서 농구게임 만들기 끝!

---

 

 

 

참고도서:

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