가위바위보 | ZeroCho

✌✊✋ JavaScript  |  가위바위보 미니 게임 만들기

 

 

이미지 스프라이트 기법을 사용하여 left position이 특정 초마다 가위, 바위, 보 손가락 그림을 바꿔주는 setInterval 함수를 만들었다.

 

---

setInterval - 1초마다 계속 실행되는 것

setTimeOut - 1초 후 한번 실행되고 마는 것  

---

 

1. ~초 마다 이미지 left position 바꾸기

 

let left = 0;
setInterval(function () {
  if (left === 0) {
    left = "120px";
  } else if (left === "120px") {
    left = "240px";
  } else {
    left = 0;
  }
  document.querySelector("#computer").style.background =
    "url(./asset/images.jpg)" + left;
}, 300);

 

- 강의에서는 style.background 속성을 개발자 도구로 확인할 때, url left top 값 순으로 구분 되었는데,

내 개발자 도구에서는 url left center 값으로 구분되었다. 왜 그런지.. 모르겠지만.. 저거때문에 이미지가 안떠서 헤맸다...

 

 

 

2. 객체 형태 사용하여 자료구조화 시키기

 

let left = 0; //computer selection

let dictionary = {
  rock: "0",
  scissor: "120px",
  paper: "240px",
};

setInterval(function () {
  if (left === dictionary.rock) {
    left = dictionary.scissor;
  } else if (left === dictionary.scissor) {
    left = dictionary.paper;
  } else {
    left = dictionary.rock;
  }
  document.querySelector("#computer").style.background =
    "url(./asset/images.jpg)" + left;
}, 500);

document.querySelectorAll(".btn").forEach(function (btn) {
  btn.addEventListener("click", function () {
    let mySelection = this.textContent;
    console.log(mySelection, left);
  });
});

// 바위 0 보 240px 가위 0 가위 240px 바위 0

 

- "바위 0" 이런식으로 출력이 되면 승부를 확인할 수 없으므로 객체를 반대로 설정해야한다. ("바위 바위"가 출력될 수 있도록)

-> 일일이 key와 value를 바꾼다는 것.. = 하드코딩..무모한.. 다른 방법 생각하기

 

---

object.entries(객체) - 객체를 (2차원)배열로 바꾸기

Array.find - (forEach처럼) 반복문이지만 원하는 요소를 찾으면(return이 true이면) 해당요소를 retrun하고 반복문이 멈추게 된다.

 

indexOf는 1차원 배열에서만 사용하고, 2차원배열에서는 find, findIndex를 사용한다.

---

 

 

3. 객체의 key와 value 바꾸기

 

let left = 0; //이미지 좌표

let dictionary = {
  주먹: "0",
  가위: "120px",
  보: "240px",
};

//console.log(Object.entries(dictionary));
function computerSelection(left) {
  return Object.entries(dictionary).find(function (a) {
    return a[1] === left;
  })[0];
}

setInterval(function () {
  if (left === dictionary.주먹) {
    left = dictionary.가위;
  } else if (left === dictionary.가위) {
    left = dictionary.보;
  } else {
    left = dictionary.주먹;
  }
  document.querySelector("#computer").style.background =
    "url(./asset/images.jpg)" + left;
}, 500);

document.querySelectorAll(".btn").forEach(function (btn) {
  btn.addEventListener("click", function () {
    let mySelection = this.textContent;
    console.log(mySelection, computerSelection(left));
  });
});

//보 주먹 바위 가위 가위 보

 

let dictionary = {
  rock: "0",
  scissor: "120px",
  paper: "240px",
};

 

↓

 

Object.entries(dictionary); //객체를 2차원 배열 형태로 변화시켜준다.

// (3) [Array(2), Array(2), Array(2)]

1. 0: (2) ["주먹", "0"]

2. 1: (2) ["가위", "120px"]

3. 2: (2) ["보", "240px"]

 

 

4. 승부 확인하기

 

clearInterval로 setInterval을 멈춘다.

 

let Inteval;
function intervalMake() {
  Inteval = setInterval(function () {
    if (left === dictionary.바위) {
      left = dictionary.가위;
    } else if (left === dictionary.가위) {
      left = dictionary.보;
    } else {
      left = dictionary.바위;
    }
    document.querySelector("#computer").style.background =
      "url(./asset/images.jpg)" + left;
  }, 50);
}

  btn.addEventListener("click", function () {
    clearInterval(Inteval);
    setTimeout(function () {
      intervalMake();
    }, 1000);

 

- 클릭시, Inteval변수에 할당된 함수를 멈춘다.

- intervalMake() 함수를 1초 멈추고(setTimeOut) 다시 무한실행(setInterval) 된다.

 

tip) 배열.includes(조건)로 || 관계를 줄일 수 있다.

       변수를 사용해서 중복되는 것을 제거하자.