가위바위보 part 1

순서도 짤 때, 코드 짤 때 주의점

1. 자바스크립트 데이터를 바꾸고
2. 화면을 일치 시켜줘라(데이터와 화면 일치시키기)

• 예시 1) 점수를 계산한다 - > 점수를 표시한다

  handleScore();
  showScore();

• 예시 2 ) 0.05초마다 가위바위보 값을 바꾼다 - > 값에 따라 그림을 바꾼다

const changeComputerHandFast = () => {
  intervalId = setInterval(() => {
  // 자바스크립트 데이터 바꾸기
    if (compupterRsp === "rock") compupterRsp = "scissors";
    else if (compupterRsp === "scissors") compupterRsp = "paper";
    else if (compupterRsp === "paper") compupterRsp = "rock";
  // 화면에 바뀐 데이터 보여주기  
    $computerRspImg.innerHTML = `${rspIcon[compupterRsp]}`;
  }, 50);
};

setInterval vs setTimeout

setInterval을 쓰거나 setTimeout안에서 setTimeout을 호출해 재귀처럼 쓸 수 있다

공통점 : 둘 다 코드 실행시간이 오래걸리면 1초를 설정하더라도 1초를 보장하지 않을 수도 있다
차이점 : setInterval은 설정한 시간을 최대한 보장해 주려고 노력한다
하지만 setTimeout을 재귀로 쓸 경우 앞 코드 실행시간이 얼마나 걸리던 그 코드가 끝나고 ! 1초뒤 다시 코드가 실행 된다

가위바위보 게임에서는 0.05초마다 이미지를 변하게 하고 싶기 때문에 setInterval을 쓰는게 더 적절하다.

setinterval과 settimeout은 반환하는 값이 있다 - > 타이머에 대한 아이디(숫자)

이 값을 이용해 타이머를 제거할 수 있다

이미 실행된 함수를 없던일로 할 수는 없으니 함수에 인수로 넣은 함수가 실행되기 전에 clear 호출해야 한다

!! 연달아 클릭했을 때 버그 발생 - > intervalId 가 덮어 씌여지기 때문에 발생한다

const handleClick = () => {
  clearInterval(intervalId);

  setTimeout(changeComputerHandFast, 1000);
};

click 5번 했을시 intervalId 1번, 2번, 3번, 4번, 5번

그 다음에 버튼클릭해서(6번째) clear할 때 5번만 제거가 된다 = > 1,2,3,4 번은 계속 손 돌리고 있어서 버그 발생한다

이것을 막기 위해선
1. removeEventListener 사용
2. setTimeout내에서 clearInterval로 직전 interval 이 있으면 제거해 준다(중복처럼 보이지만 비동기 이기 때문에 실행되는 시간이 다르다)
3. 플래그 변수 사용해주면 된다 (clickable= true or false) -- > 내가 사용한 방법

1번 방법

const handleClick = () => {
  clearInterval(intervalId);
  $rspBtnsContainer.removeEventListener(
    "click",
    "클릭에 등록해준 것과 같음 함수"
  );

  setTimeout(() => {
    $rspBtnsContainer.addEventListener("click", handleClick),
      changeComputerHandFast;
  }, 1000);
};

2번 방법

const handleClick = () => {

  clearInterval(intervalId);

  setTimeout(() => {
    clear(intervalId), changeComputerHandFast;
  }, 1000);
};

removeEventListener 사용했을 시 문제점

1. 코드량 많아 질 수 있다
2. 실수할 확률이 높아진다

예시

const fun=(num)=>()=>{console.log('고차함수입니다',num)}
태그.addEventListener("click",fun(1)) =>고차함수네 fun(1)이 return하는 함수 클릭했을 때 실행 해줘
태그.removeEventListener("click",fun(1))

이러면 이제 망하는 것

전달하는 함수가 같은 함수여야 이벤트가 제거가 되는데

fun(1) !== fun(1)이기 때문이다

변수에 할당해준 것 사용하면 제거가 가능하다 = > 객체는 변수에 넣어서 변수를 참조해줘야 같다고 나온다

const fun1=fun(1)

기타

옛날에는 동시에 여러개 파일을 가지고 오는데 문제가 있었다.

그래서 가위,바위,보 이미지를 하나로 합쳐 놨다(이미지 스프라이트)

요즘은 브라우저들이 많이 개선이 되어서 여러개의 파일로 쪼개는 것이 더 빠른경우도 많다.

auto 200 : 세로는 200px이고 auto는 세로 200px 에 맞춰 조정해준다는 뜻

background를 바꿔줬다면 backgroundsize도 다시 한번 적어줘야 문제가 발생하지 않는다.

출처

Let's get it 자바스크립트 프로그래밍
UI 출처 -https://velog.io/@eunjin/Javascript-Toy-Project-Mini-Game-%EA%B0%80%EC%9C%84%EB%B0%94%EC%9C%84%EB%B3%B4-%EA%B2%8C%EC%9E%84-%EB%A7%8C%EB%93%A4%EA%B8%B0-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8