[JavaScript] 토이 프로젝트 - 가위바위보

✌️✊🖐️ 가위바위보 게임기 ✌️✊🖐️ 

• 제작 기간 : 2023-01-11 (1일)
• 사용 언어 : HTML, SCSS, Javascript
• 데모 사이트 : 가위바위보
  
  

가위바위보

 

---

✨ 페이지 소개

• 컴퓨터와 함께 가위바위보 게임을 할 수 있습니다.

🔎 특징

게임 작동 방식

• 사용자의 측에서 선택한 옵션과 컴퓨터 측에서 랜덤으로 출력한 옵션을 비교해서 일반적인 가위바위보 규칙에 따라 점수가 업데이트되는 방식으로 작동합니다.

setInterval(function () {
  readyImgs[i].classList.add("show");
  readyImgs[i === 0 ? 2 : i - 1].classList.remove("show");
  if (i === 2) {
    i = 0;
  } else {
    i++;
  }
}, 80);

• 사용자가 클릭을 하기 전에는 가위, 바위, 보 이미지가 0.08초 간격으로 돌아가면서 출력됩니다.

 

    computerAns = Math.floor(Math.random() * 3);
    userAns = idx;

    if (computerAns === 0) comImg.src = require("../images/rock.png");
    comImg.alt = "rock";
    if (computerAns === 1) comImg.src = require("../images/scissors.png");
    comImg.alt = "scissors";
    if (computerAns === 2) comImg.src = require("../images/paper.png");
    comImg.alt = "paper";

    if (userAns === 0) userImg.src = require("../images/rock.png");
    userImg.alt = "rock";
    if (userAns === 1) userImg.src = require("../images/scissors.png");
    userImg.alt = "scissors";
    if (userAns === 2) userImg.src = require("../images/paper.png");
    userImg.alt = "paper";

• Math.floor(Math.random() * 3) 함수는 0, 1, 2 중에서 랜덤한 값을 반환합니다.
• computerAns가 0일 때는 주먹, 1일 때는 가위, 2일 때는 보 이미지를 출력합니다.

  switch (user) {
    case 0:
      if (com === 0) {
        message.textContent = "비겼다~";
      }
      if (com === 1) {
        message.textContent = "야호 내가 이겼다~!";
        userCount += 1;
      }
      if (com === 2) {
        message.textContent = "이런! 져버리다니...";
        comCount += 1;
      }
      break;
    case 1:
      if (com === 0) {
        message.textContent = "이런! 져버리다니...";
        comCount += 1;
      }
      if (com === 1) {
        message.textContent = "비겼다~";
      }
      if (com === 2) {
        message.textContent = "야호 내가 이겼다~!";
        userCount += 1;
      }
      break;
    case 2:
      if (com === 0) {
        message.textContent = "야호 내가 이겼다~!";
        userCount += 1;
      }
      if (com === 1) {
        message.textContent = "이런! 져버리다니...";
        comCount += 1;
      }
      if (com === 2) {
        message.textContent = "비겼다~";
      }
      break;
  }

• Switch문을 사용해 컴퓨터의 값과 유저의 값을 비교해 알맞은 결과를 출력하고, 승리한 횟수를 업데이트합니다.

 

resetBtn.addEventListener("click", function () {
  comCount = 0;
  userCount = 0;
  computerScore.textContent = comCount;
  userScore.textContent = userCount;

  buttonsDiv.classList.remove("hide");
  resultDiv.classList.add("hide");
  localStorage.setItem("computer", 0);
  localStorage.setItem("user", 0);
});

• 리셋 버튼 클릭 시 localStorage에 저장된 값과 보여지는 승리한 횟수가 모두 날아갑니다.

let comCount = localStorage.getItem("computer")
  ? Number(localStorage.getItem("computer"))
  : 0;
let userCount = localStorage.getItem("user")
  ? Number(localStorage.getItem("user"))
  : 0;

• localStorage.getItem()을 통해서 초기 실행 시 각 승리 횟수는 0으로 저장되고, 아니라면 이전에 플레이 했던 데이터를 불러옵니다.

selectBtn.forEach((btn, idx) => {
  btn.addEventListener("click", async function () {
    
    ...

    computerAns = Math.floor(Math.random() * 3);
    
    ...

    await compare(computerAns, userAns);
    
    ...

    localStorage.setItem("computer", comCount);
    localStorage.setItem("user", userCount);
  });
});

• 가위, 바위, 보 버튼을 클릭할 때마다 컴퓨터의 값을 정하는 함수가 실행되고, 사용자의 값과 비교하고 나면 localStorage.setItem()을 통해 컴퓨터와 사용자의 승리한 횟수를 업데이트 합니다.

 

 

🗒️ Review

조원분이 코드 리뷰를 해주셨는데, 하나의 함수에는 최소 기능 단위만 담도록 하는 것이 좋다고 조언해주셨다.

사실 항상 코드를 빠르게 짜는 것, 또 제대로 돌아가기만 하면 일단 된다는 생각이 있었는데 정확히 짚어주셨다.

함수를 쪼개면서 프로젝트를 최적화하는 연습을 해봐야겠다.

 

그리고 추가할 수 있는 기능을 생각하자면.. 전적을 보여줄 수 있는 기능이라던지 아니면 삼세판 가위바위보를 해서 최종 승리자를 뽑는다던지 할 수 있지 않을까? (Game Over 기능)

 

그리고 페이지를 모바일에서 확인해보니 사파리 기준으로 button 태그의 글이 내가 지정한 검은 색이 아닌 파란색으로 나타났다. 사파리 브라우저에서는 button 태그의 글씨 색상은 기본적으로 파란색으로 출력된다. 나는 body에 글씨 색을 black으로 선언해서 button에도 자연스레 적용될 것이라 생각했는데 사파리 브라우저 기본 속성 때문에 원하는 대로 구현이 되지 않았다.

 

해당 button 태그의 속성에 color를 적용하니 문제가 해결되었다.

 

수정 전 / 후

 

모바일 버전이 아닌 PC 버전으로 제작하기는 했지만, Mac 사용자들은 사파리로 접속할 수도 있으니 크로스 브라우징 이슈를 꼭 신경쓰면서 코드를 짜도록 해야겠다!