가위바위보 part2
컴퓨터 손 빠르게 바꿔주기
let compupterRsp = "rock";
let intervalId;
const rspIcon = {
rock: `<i class="far fa-hand-rock"></i>`,
scissors: `<i class="far fa-hand-peace"></i>`,
paper: `<i class="far fa-hand-paper"></i>`,
};
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);
};
- 처음로딩시 컴퓨터 손은 rock 으로 지정해주었다
- icon html코드를 object를 활용해 묶어주었다
- 0.05초마다 손이 바뀌는 함수 만들어 주었다.
- 자바스크립트 데이터를 변경시킨 뒤 - > 화면에 보여준다
사람이 손을 클릭했을 때
$rspBtnsContainer.addEventListener("click", (e) => {
if (!playing) return;
const tagName = e.target.tagName;
const target = tagName === "I" ? e.target.parentNode : e.target;
if (target.tagName !== "BUTTON") return;
playing = false;
const value = target.id;
humanRsp = value;
showRSP();
clearInterval(intervalId);
handleScore();
showScore();
if (computerScore >= 3 || humanScore >= 3) {
finishGame();
return;
}
setTimeout(() => {
initGame();
}, 1000);
});
- 버튼들이 있는 div에 이벤트 리스너를 등록 해 주었다
- 사람이 클릭했을 때 icon을 클릭할수도 icon을 감싸고 있는 button을 클릭할 수도 있기 때문에 tagName을 활용해준다
- div안에서 빈 곳을 클릭 할 수도 있기때문에 tagName이 button이 아니면 return 시켜줘 아래 코드들이 실행 되지 않게 해준다
- playing이라는 flag 변수를 사용해 줬는데 사람이 선택후 1초 뒤 다시 컴퓨터 손이 돌아가기 전에 클릭 하는 경우를 방지하기 위함이다(앞 포스팅 참고)
- flag변수는 게임을 한번이 아닌 여러번 할 때도 유용하게 쓰인다
- 클릭된 버튼의 id를 humanRSP 에 할당한다
- computerRSP 와 humanRSP 를 화면에 보여준다 - > rspIcon 이때 유용하다
- 누가 이겼는지 판단해주고
- 점수를 화면에 보여준다
- 둘 중 3점이 넘어가면 게임을 끝내고 return 해준다
- 버그가 발생 할 수 있기 때문에 범위를 넓혀서 ===3이 아닌 >=3으로 설정해 준다
reset 하기
const initGame = () => {
playing = true;
showScore();
changeComputerHandFast();
};
const reset = () => {
//여기 clearinterval 중요 !!
clearInterval(intervalId);
computerScore = 0;
humanScore = 0;
};
$resetBtn.addEventListener("click", () => {
reset();
initGame();
});
- reset 버튼 누르면 모든 값을 reset시킨 뒤 다시 게임을 실행시켜 준다
둘 중 3점 됬을때 게임 끝내기
const finishGame = () => {
playing = false;
const message = computerScore >= 3 ? "컴퓨터 승리 !" : "인간 승리 !";
showPopUpWithText(message);
};
reset 에는 clearInterval 해주고 finishGame에서는 안해준 이유
- finishGame이 실행될때는 사람이 가위,바위,보 중 선택한 경우이다
그래서 그때 interval이 제거가 되고 setTimeout도 실행되지 않는다- 하지만 reset때는 돌아가는 도중 reset 시킬 수 있으니까 꼭 제거를 해줘야 한다
출처 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
Author And Source
이 문제에 관하여(가위바위보 part2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chuhyerin96/가위바위보-part2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)