가위바위보 게임

가위바위보 게임

순서도

1. 0.05초마다 가위바위보 값, 값에 따라 그림을 바꾼다.
2. 가위,바위, 보 버튼 클릭
3. 돌아가는 그림을 멈춘다.
4. 점수를 계산한다.
5. 점수를 표시한다.
6. 1초 후에 그림을 돌린다.

1. 0.05초마다 가위바위보 값, 값에 따라 그림을 바꾼다.

• 가위,바위,보 이미지 스프라이트의 x의 값을 객체로 만들어준다.

const rspX = {
  scissors : '0',
  rock : '-220px',
  paper : '-440px',
}

• 변수 computerChoice 생성 (가위,바위,보의 값을 저장해야함). 함수 chageComputerHand 생성하여, computerChoice 값이 변경되게 해준다.

let computerChoice = 'scissors';
const chageComputerHand = () => {
  if( computerChoice === 'scissors' ){
    computerChoice = 'rock';
  } else if( computerChoice === 'rock' ){
    computerChoice = 'paper';
  } else if( computerChoice === 'paper' ){
    computerChoice = 'scissors';
  }
  $computer.style.backgroundPositionX = `${rspX[computerChoice]}`; //rspX.computerChoice -> 문자열이 아니기때문에 작동이 안됨
  $computer.style.backgroundSize = 'auto 200px';
}

• setInterval 0.05초 chageComputerHand 함수 실행 (setInterval 함수에 담아서 실행, 추후에 정지 시켜야됨으로.)

let intarvelId = setInterval(chageComputerHand,50);

2. 가위,바위,보 버튼 클릭

• 가위,바위,보 버튼 클릭시 이벤트 실행.

$rock.addEventListener('click', clickButton);
$scissors.addEventListener('click', clickButton);
$paper.addEventListener('click', clickButton);

3. 돌아가는 그림을 멈춘다.

• clearInterval로 위에서 생성된 intarvelId 정지시킨다.

const clickButton = () => {
  clearInterval(intarvelId);
}

4. 점수를 계산한다.

• 버튼 클릭한 값이 무엇인지 확인한다.
  event.target.textContent 값을 활용하여 버튼 안에 텍스트 값을 확인하고, 해당 값일때 영어로 변경(컴퓨터 값과 비교하기 위해서)
  값을 하나씩 비교한다.

const myChoice = event.target.textContent === '가위' ?  'scissors'
: event.target.textContent === '바위' ? 'rock' : 'paper';

if( myChoice === 'scissors' ){
  if( computerChoice === 'rock' ){
    console.log('패배');
  } else if( computerChoice === 'paper' ){
    console.log('승리');
  } else if( computerChoice === 'scissors' ){
    console.log('무승부');
  }
}

• 값을 비교할때 다른방법. 규칙찾기!
  가위:1, 바위:0, 보:-1 이럴경우.
  컴퓨터 값 - 나의 값을 빼주면, 무승부이면 0, 이기면2, -1 지면 1,-2가 나오게 된다. 이 값으로 비교해주면 된다.

const scoreTable = {
  rock: 0,
  scissors: 1,   
  paper: -1,
};

const clickButton = () => {
  const myScore = scoreTable[myChoice];
  const computerScore = scoreTable[computerChoice];
  const diff = myScore - computerScore;

  if( [2,-1].includes(diff) ){
    console.log('승리');
  } else if( [-2, 1].includes(diff) ) {
    console.log('패배');
  } else {
    console.log('무승부');
  }
}

5. 점수를 표시한다.
   변수 score 생성, 내가 이겼을 경우 +1증가, 졌을경우 -1, 무승부일때 X.

let score = 0;

const clickButton = () => {
  let message;
  if( [2,-1].includes(diff) ){
    score+=1;
    message = '승리';
  } else if( [-2, 1].includes(diff) ) {
    score-=1;
    message = '패배';
    console.log('패배');
  } else {
    message = '무승부';
  }
  $score.textContent = `${message} 총: ${score}점`;
}

6. 1초 후에 그림을 돌린다.
   1초후 intarvelId 재실행해준다.
   문제점 발견, 제멋대로 돌아가고, 엄청빨라진다.
   clickButton 5번 호출, 인터벌 1번, 2번, 3번, 4번, 5번
   마지막 5번만 취소가 되어 작동이 제대로 안됨.
   true/false 구분 지어서 if문 실행해준다.

let clickable = true;
const clickButton = () => {
  if(clickable){
    clearInterval(intarvelId);
    clickable = false;
    setTimeout(()=>{
      clickable = true;
      intarvelId = setInterval(chageComputerHand,50);
    }, 1000);
  }

  const myChoice = event.target.textContent === '가위' ?  'scissors'
  : event.target.textContent === '바위' ? 'rock' : 'paper';

  const myScore = scoreTable[myChoice];
  const computerScore = scoreTable[computerChoice];
  const diff = myScore - computerScore;

  let message;
  if( [2,-1].includes(diff) ){
    score+=1;
    message = '승리';
  } else if( [-2, 1].includes(diff) ) {
    score-=1;
    message = '패배';
    console.log('패배');
  } else {
    message = '무승부';
  }
  $score.textContent = `${message} 총: ${score}점`;
}

7. 보너스 게임 5판 3선승제로 만들어 3번 먼저 이긴 쪽이 최종 슬리하는 것으로 바꿔본다.

let score = 0;
let computersScore = 0;
let clickable = true;

/*
    clickButton 5번 호출, 인터벌 1번, 2번, 3번, 4번, 5번(얘만 intervalId)
    그 다음에 버튼을 클릭하면 5번만 취소
  */
const clickButton = () => {
  if(clickable){
    clearInterval(intarvelId);
    clickable = false;

    const myChoice = event.target.textContent === '가위' ?  'scissors'
    : event.target.textContent === '바위' ? 'rock' : 'paper';

    const myScore = scoreTable[myChoice];
    const computerScore = scoreTable[computerChoice];
    const diff = myScore - computerScore;

    let message;
    if( [2,-1].includes(diff) ){ // 2, -1은 승리조건이고, -2, 1은 패배조건, 점수표 참고
      score += 1;
      message = '승리';
    } else if( [-2, 1].includes(diff) ) {
      computersScore += -1;
      message = '패배';
    } else {
      message = '무승부';
    }

    if( score === 3 ){
      $score.textContent = `나의 승리 ${score} : ${computersScore}점`;
    } else if( computersScore === 3 ){
      $score.textContent = `컴퓨터 승리 ${score} : ${computersScore}점`;
    } else {
      $score.textContent = `${message} ${score} : ${computersScore} 점`;
      setTimeout(()=>{
        clickable = true;
        intarvelId = setInterval(chageComputerHand,50);
      }, 1000);
    }
  }
}

✍ 새로 배운 속성

재귀함수

• 자기 자신을 호출하는 함수를 재귀함수 라고 한다.

let computerChoice = 'scissors'; 
const chageComputerHand = () => {
  if( computerChoice === 'scissors'){ //가위면
    computerChoice = 'rock';
  } else if( computerChoice === 'rock' ){ //바위면
    computerChoice = 'paper';
  } else if( computerChoice === 'paper' ){ //보면
    computerChoice =  'scissors';
  }
  $computer.style.background = `url(${IMG_URL}) ${rspX[computerChoice]} 0`; //background 바꿀때는 backgroundSize 바꿔줘야한다.
  $computer.style.backgroundSize = 'auto 200px';
  setTimeout(chageComputerHand, 50); //재귀어함수
}
setTimeout(chageComputerHand, 50);

전체코드

html

<div id="computer"></div>
<div>
  <button id="scissors" class="btn">가위</button>
  <button id="rock" class="btn">바위</button>
  <button id="paper" class="btn">보</button>
</div>
<div id="score">0</div>

css

    #computer {
      width: 142px;
      height: 200px;
    }

javascript

const $computer = document.querySelector('#computer');
const $score = document.querySelector('#score');
const $rock = document.querySelector('#rock');
const $scissors = document.querySelector('#scissors');
const $paper = document.querySelector('#paper');
const IMG_URL = './rsp.png';
$computer.style.background = `url(${IMG_URL}) -440px 0`;
$computer.style.backgroundSize = 'auto 200px';

const rspX = {
  scissors : '0',
  rock : '-220px',
  paper : '-440px',
}

let computerChoice = 'scissors';
const chageComputerHand = () => {
  if( computerChoice === 'scissors' ){
    computerChoice = 'rock';
  } else if( computerChoice === 'rock' ){
    computerChoice = 'paper';
  } else if( computerChoice === 'paper' ){
    computerChoice = 'scissors';
  }
  $computer.style.backgroundPositionX = `${rspX[computerChoice]}`; //rspX.computerChoice -> 문자열이 아니기때문에 작동이 안됨
  $computer.style.backgroundSize = 'auto 200px';
}

let intarvelId = setInterval(chageComputerHand,50);
const scoreTable = {
  rock: 0,
  scissors: 1,   
  paper: -1,
};
let score = 0;
let clickable = true;

/*
    clickButton 5번 호출, 인터벌 1번, 2번, 3번, 4번, 5번(얘만 intervalId)
    그 다음에 버튼을 클릭하면 5번만 취소
  */
const clickButton = () => {
  if(clickable){
    clearInterval(intarvelId);
    clickable = false;
    setTimeout(()=>{
      clickable = true;
      intarvelId = setInterval(chageComputerHand,50);
    }, 1000);
  }

  const myChoice = event.target.textContent === '가위' ?  'scissors'
  : event.target.textContent === '바위' ? 'rock' : 'paper';

  const myScore = scoreTable[myChoice];
  const computerScore = scoreTable[computerChoice];
  const diff = myScore - computerScore;

  let message;
  if( [2,-1].includes(diff) ){ // 2, -1은 승리조건이고, -2, 1은 패배조건, 점수표 참고
    score+=1;
    message = '승리';
  } else if( [-2, 1].includes(diff) ) {
    score-=1;
    message = '패배';
    console.log('패배');
  } else {
    message = '무승부';
  }
  $score.textContent = `${message} 총: ${score}점`;
}
$rock.addEventListener('click', clickButton);
$scissors.addEventListener('click', clickButton);
$paper.addEventListener('click', clickButton);