[JS] 가위 바위 보!

https://timely-granita-6bf64b.netlify.app/rocksp.html

신나는 가위 바위 보!

다소 지쳐서 약간 css 대충한 부분이 없지않아있음 추후 수정할 계획!

아주 엄청난 시행착오가 있었던 가위바위보였다. 시간이 꽤나 오래걸렸다.

배운 내용 중 가장 중점을 두었던 건

• setInterval, setTimeout
• localstorage

 

1. setInterval, setTimeout 사용하기

 

인터넷 상에서 가위바위보 codepen을 치게 되면 보통 뱅글뱅글 돌아가는 가위바위보가 아닌 정적인 가위바위보다.

내가 보게 된 가위바위보도 그러했다. 하지만 내가 원했던 방향은 가위바위보가 슬롯 머신처럼 돌아갔으면 했다

그래서 setInterval을 이용하기로 하였다.

 

첫번째 시행착오

• 처음에는 setInterval만 사용했을때 잘 기억은 안나지만 font-awesome의 아이콘을 사용하고 있었기 때문에 모양을 변경시키려면 className을 변경시켜줘야한다. 근데 setInterval만 썼을 때 잘 반영이 안되었다(아직도 이유모르겠음)
• 그래서 setInterval 안에 forEach문을 작성해서 일정시간마다 setTImeout으로 클래스 이름을 변경하는 식으로 작성하였다(코드에 보면 일정한 시간으로 나오게 하고 싶어서 0.1씩 setTimeout시간을 늘렸다)
• 아래의 코드를 보면 아니 왜 갑자기 diplay가 나오지? 싶은데 이게 2번째 난관이었다. clearInterval을 할 지라도, clearInterval은 내가 끝 한부분에서 끝내는게 아니기 때문에 배열의 마지막까지 다 돌고 끝이 난다. forEach때문인가 하고 for문으로 하고 clearInterval을 할때 break되도록 설정해보았지만 되지 않았다. 언제나 주먹으로 끝이났다
• 그래서 가짜로 돌게하고 진짜 결과값은 clearInterval이 된 이후에 등장시키게했다
• 진짜 결과값은 Math.random 을 사용하였다

const test = [
  'fa-solid fa-hand-scissors',
  'fa-solid fa-hand',
  'fa-solid fa-hand-back-fist',
];

function startInterval() {
  isRotate = true;
  iconsResult.style.display = 'none';
  icons.style.display = 'block';
  itsInterval = setInterval(() => {
    let xx = 0.1;
    test.forEach((el) => {
      setTimeout(() => (icons.className = el), xx * 1000);
      xx += 0.1;
    });
  }, 300);
}

두번째 시행착오

• 다 돌게하고 clearInterval로 결과값을 나오게 하니 신이 났었다 와 금방끝났다!.. 아니였다  setInterval은 clearInterval을 사용하게 되면 다신 사용을 할 수 없다. 어쩔 수 없이 구글링의 도움을 받아서 (how to setInterval again 이런식으로 쳐서 ) 방법을 찾아보았다. 한 이틀내내 해도 스택오버플로우 천재님들의 방법이 통하지 않았다. 인생의 회의감을 이때 느낌..
• 우리의 해결사 console.log를 찍어보았다. 잘 나오고 있었다. 왜 안나올까?이유는 가짜결과를 none해놓고 가짜결과를 돌려돌려돌림판했으니 안보였던 것이였다. 그때 멍청함을 느끼고 다시 display의 값을 변경시켰다
• 다시 돌리는 방법은 setInterval과clearInterval을 할 때 마다 재할당을 해주면된다ㅎㅎ..
•  위, 아래의 코드처럼 startInterval과 stopInterval을 분리한 것을 볼 수 있다ㅎㅎㅎ....

 

function stopInterval() {
  clearInterval(itsInterval);
  isRotate = false;
}

2. localStorage사용하기

예전에 나만의 아고라 스테이츠를 만들 때 처럼, 처음 열었을 때랑 처음이 아닐때를 분리하기 위해서 초기설정이 필요했다

//로컬스토리지 초기 설정
function toLocalStorage() {
  const userScore = document.querySelector('.user__score');
  const computerScore = document.querySelector('.computer__score');
  let localResult = JSON.parse(localStorage.getItem('result'));
  resultMessage.textContent = '가위 바위 보!';
  if (localResult === null) {
    userScore.textContent = `you:0`;
    computerScore.textContent = `computer:0`;

    return localStorage.setItem(
      'result',
      JSON.stringify({ computer: 0, user: 0 })
    );
  } else {
    userScore.textContent = `you:${localResult.user}`;
    computerScore.textContent = `computer:${localResult.computer}`;
  }
  return;
}

3. 이겼을 때 폭죽 터트리기

https://codepen.io/rudtjd2548/pen/yLveGmO

Confetti Button with pure javascript

 

이걸 레퍼런스로 삼았다(거의 복붙아닐까...?나는 스레기인가...?) 저렇게 폭죽 터트리게 하고싶었음

방법을 이해하는데 꽤 오랜시간을 보내야했다. 덕분에 class와 animation에 대한 공부를 많이했다

이 분과 다르게 하고싶었던 부분은 바로 색깔과 모양이다.모양은 직사각형으로 만들고, 색깔을 지정하는게 아니라 좀 매번 랜덤하게 나왔음 좋겠다 라는 생각을했다

• 레퍼런스의 방법은 size를 하나만 줬는데 난 x,y 둘 다 주어서 둘 다 랜덤으로 돌려버렸다
• 모든 색을 랜덤하게 하기에는 조금 너무 범위가 큰 것 같아서 이전에 색을 #333이런식으로 표현하던 생각이 나서 인터넷에 찾아보았다. (웹안전색)
• 웹안전색은 패턴이있는걸 확인했다 딱 6개의 숫자문자로만 돌아간다
• 그래서 아래와 같은 배열로 표현해서 얘도 랜덤으로 돌려버렸다

const colorHTML = ['0', '3', '6', '9', 'C', 'F'];

 

다 하고 말을 하니 참 쉬워보인다. 쉬운줄 알고 덤볐다가 1주일이 넘게 질질 끌게되었던 가위바위보였다.

이때 배웠던걸 기억하며 다음 작은 프로젝트에서는 제대로 해내야 겠다!