[JavaScript] 가위바위보 게임 만들기

가위바위보 게임
→ 컴퓨터와 가위바위보를 해서 몇 번 이겼는지 점수를 기록

1. 빠르게 돌아가는 가위바위보 그림 아래에 가위, 바위, 보 버튼을 클릭하여 컴퓨터와 승패를 가른다.

2. 버튼을 누르면 승부를 표시하기 위해 돌아가는 그림을 1초 동안 멈춘다.

 

📌 순서도

- 시작 → 0.05초마다 가위바위보 값을 바꾼다. → 값에 따라 그림을 바꾼다. → 대기

- 가위바위보 버튼 클릭 → 돌아가는 그림을 멈춘다. → 점수를 계산한다. → 점수를 표시한다. → 1초 후에 그림을 바꾼다. → 대기

---

📍 이미지 스프라이트(Image Sprite)

이미지가 가위, 바위, 보 3개 필요하나 합쳐져 있는 이미지를 사용한다.

→ 서버에 이미지를 요청하는 횟수를 줄일 수 있음(3번 → 1번)

→ 합쳐져 있는 이미지는 CSS와 자바스크립트로 적절히 잘라서 화면에 표시해야함(x좌표, y좌표)

---

📍 setInterval()

: The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

 

setInterval()는 반복적으로 실행할 때 사용하는 메소드로 setTimeout과 비슷한 효과를 낸다.

(단, setTimeout은 한 번만 실행되지만 setInterval은 지정한 시간마다 주기적으로 지정한 함수를 실행한다.)

setInterval(() => {
  // 내용
}, 밀리초);

 

cf) setTimeout()을 setInterval()로 바꿔보기

→ 1000밀리초마다 Jay를 출력하기

function Jay() {
  console.log('Jay');
  setTimeout(Jay, 1000);
}
setTimeout(Jay, 1000);

setInterval(() => { 
  console.log('Jay'); 
}, 1000);

☛ setTimeout() 함수는 중첩해서 써야하지만, setInterval()은 그럴 필요가 없다.

 

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

setInterval() - Web APIs | MDN

---

📍 clearInterval()

: The global clearInterval() method cancels a timed, repeating action which was previously established by a call to setInterval(). If the parameter provided does not identify a previously established action, this method does nothing.

 

setInterval()은 clearInterval() 함수로 취소할 수 있다. (setTimeout()은 clearTimeout() 함수로 취소할 수 있으나, 함수가 아직 실행되지 않았을 때만 취소 가능하다.)

let 아이디 = setInterval(함수, 밀리초);
clearInterval(아이디);

let 아이디 = setTimeout(함수, 밀리초);
clearTimeout(아이디);

https://developer.mozilla.org/en-US/docs/Web/API/clearInterval

clearInterval() - Web APIs | MDN

---

📍 removeEventListener()

: The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

 

addEventListener로 연결한 함수를 removeEventListener로 제거할 수 있다. 

 

Calling removeEventListener() with arguments that do not identify any currently registered event listener on the EventTarget has no effect.

 

이벤트를 등록할 때의 함수와 제거할 때의 함수가 같은 함수여야 한다. 아니라면 removeEventListener()를 호출해도 하나마나다.

 

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

EventTarget.removeEventListener() - Web APIs | MDN

---

 

https://github.com/jungwonyu/js-prac/tree/main/rps

 

 

GitHub - jungwonyu/js-prac: 자바스크립트 연습