가위바위보 만들기

  화면속에 가위 바위 보가 계속 돌아가고, 버튼을 클릭했을 때, 사진이 멈춘다. 그 멈추는 사진과 내가 클릭한 버튼의 값이 같다면 무승부, 그러지 않고 차이가 나는 부분을 숫자로 나타내서 알고리즘을 짰다.

 

가장 어려웠던 부분은 flag 변수였다. flag변수의 대해 처음 알았기 때문에 그 부분을 적용하느냐 많은 부분에서 실수가 났다. 그 부분을 정확하게 공부하고, flag함수를 사용하는 법을 좀 더 연구해야겠다. 

 

객체 사용시 textContent에 객체처럼 요한.name이 아닌 요한[name]이라고 사용하는 이유는 .name으로 사용 시 객체 안에 .name을 찾고, [name]으로 할 시에는 name안에 있는 문자열을 찾아 들어가서 값을 비교해서 객체 안에 있는 리터럴 값이 나온다. 그 부분이 다르기 때문에 그 부분을 조심해주면 될 것 같다.

    <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>

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

const $computer = document.querySelector("#computer"),
  $rock = document.querySelector("#rock"),
  $scissors = document.querySelector("#scissors"),
  $paper = document.querySelector("#paper"),
  $score = document.querySelector("#score");

const IMG_URL = "rsp.png";
$computer.style.background = `url(${IMG_URL}) 0 0`;
$computer.style.backgroundSize = "auto 200px";

const rspX = {
  scissors: "0",
  rock: "-220px",
  paper: "-420px",
  //x값의 변화마다 크기가 달라지고 그 크기에 따라 가위바위보가 나온다
};

let imgChange = "scissors";

function changersp() {
  if (imgChange === "rock") {
    imgChange = "scissors";
  } else if (imgChange === "scissors") {
    imgChange = "paper";
  } else {
    imgChange = "rock";
  }
  $computer.style.background = `url(${IMG_URL}) ${rspX[imgChange]} 0`;
  $computer.style.backgroundSize = "auto 200px";
} 

let intervalid = setInterval(changersp, 50);
//setInterval을 통해 0.5초마다 계속해서 가위 바위 보 사진이 나온다

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

let clickable = true;
let score = 0;
const handleClick = (event) => {
  if (clickable) {
  //true이기때문에 코드가 동작한다
    clearInterval(intervalid);
    //클릭 하자마자 멈춘다
    clickable = false;
    //클릭은 가능하다 내부 변수가 false로 변해서 동작하지 않는다.
    //flag변수라고 한다
    const myChoice =
      event.target.textContent === "가위"
        ? "scissors"
        : event.target.textContent === "바위"
        ? "rock"
        : "paper";
    const myScore = scoreTable[myChoice];
    const comScore = scoreTable[imgChange];
    const diff = myScore - comScore;
    console.log(diff);
    let message;
    if ([-1, 2].includes(diff)) {
    //이러지 않고, if, else if로 돌리면 최대 9가지로 할 수 있기 때문에 줄일 수 있다.
    //-1, 2의 값이 diff와 일치하면 true 아니면 false로 나온다.
      score += 1;
      message = "승리";
    } else if ([-2, 1].includes(diff)) {
      score -= 1;
      message = "패배";
    } else {
      message = "무승부";
    }
    $score.textContent = `${message} : ${score}점`;
    console.log(scissors);
    setTimeout(() => {
      clickable = true;
      intervalid = setInterval(changersp, 50);
      //1초 후 다시 움직인다
    }, 1000);
  }
};

$scissors.addEventListener("click", handleClick);
$rock.addEventListener("click", handleClick);
$paper.addEventListener("click", handleClick);

사진 약간 옛날 스타일...