📝 프로젝트 소개

• 혼자 하는 가위바위보 게임
• 개발 기간 : 2023.11.24
• 개발 인원 : 4명

🙋‍♂️ 팀원 소개

김민선	이규리	송원섭	김유은

🛠 기술 스택

Environment

Development

Depoloy

Communication

💻 협업 방식

• Github Dasktop 사용
• Slack으로 코드 공유
• 기능별 feature branch 생성 후 PR 및 Merge

⚙ 기능 시연

• URL : https://frontend-1th-rsp-go.vercel.app/

✔ 핵심 기능

1. 가위 바위 보

• 사람들이 가위, 바위, 보 중 하나를 선택하면 승패를 판단하여 결과를 출력합니다.

// 승패 판단 로직
function rspLogic(a, b) {
  // 가위 : 0 / 바위 : 1 / 보 : 2
  // 가위 < 바위
  if ((a == 0 || a == 1) && (b == 0 || b == 1)) {
    return 1;
  }
  // 바위 < 보
  if ((a == 1 || a == 2) && (b == 1 || b == 2)) {
    return 2;
  }
  // 보 < 가위
  if ((a == 0 || a == 2) && (b == 0 || b == 2)) {
    return 0;
  }
}

2. 참가자 추가

• 사람 추가 버튼을 누르면 참가자가 1명씩 추가됩니다.
• 게임 참가자는 최대 4명까지만 가능합니다.
• 사람들의 이미지는 랜덤으로 변경됩니다.

if (human >= 4) return; // 최대 4명까지만
let tagArea = document.getElementById("people");
let newTag = document.createElement("div");
newTag.setAttribute("class", "person");
newTag.innerHTML = `
  <div class="people-img">
      <img src=${imgSrcArray[Math.floor(Math.random() * imgSrcArray.length)]}> // 이미지 랜덤
  </div>
  <ul class="container flex-direction-column select-box">
      <li> <button class="selected">가위 </button></li>
      <li> <button class="selected">바위</button></li>
      <li> <button class="selected">보</button></li>
  </ul>
`;
tagArea.appendChild(newTag);

3. 참가자 삭제

• 사람 삭제 버튼을 누르면 가장 마지막에 추가된 참가자가 삭제됩니다.
• 게임 참가자는 최소 2명입니다.

const div = document.getElementsByClassName("person");
const div2 = div[div.length - 1]; // 마지막에 추가된 참가자
div2.remove();
human--;
if (human === 2) { // 최소 2명이 유지되도록
  removeButton.setAttribute("disabled", "");
}

4. 결과 확인

• 결과 보기 버튼을 클릭하면 모든 사용자의 선택을 바탕으로 승자를 결정하고 결과를 출력합니다.
• 만약 모든 사용자가 선택을 완료하지 않았다면 선택하지 않은 사용자 번호를 출력합니다.

let rspSet = new Set(peopleRspArray.slice(0, human)); // 중복 제거
rspSet = [...rspSet];
if (rspSet.length === 2) { // 가위, 바위, 보 중에서 2가지만 나왔다면
  let victory = rspLogic(rspSet[0], rspSet[1]);
  for (let i = 0; i < human; i++) {
    if (peopleRspArray[i] == victory) {
      winner.push(i + 1);
    }
  }
  winner.forEach((win, idx) => {
    result += win;
    if (idx + 1 == winner.length) {
      if (winner.length == 1) {
        result += " 번 사람이 승리했습니다.";
      } else {
        result += " 번 사람들이 승리했습니다.";
      }
    } else {
      result += ", ";
    }
  });
} else if (rspSet.length === 1) { // 가위, 바위, 보 중에서 1가지만 나왔다면
  result = "무승부!!";
} else { // 가위, 바위, 보 중에서 3가지가 다 나왔다면
  result = "다시!!"; 
}

5. 다시 하기

• 다시하기 버튼을 클릭하면 페이지를 새로고침하여 게임을 초기 상태로 되돌립니다.

let resetButton = document.getElementById("resetBtn");
resetButton.addEventListener("click", () => {
  location.reload(); // 새로고침
});

🎯 트러블 슈팅

1. 가위 바위 보 선택 방법

• 각 플레이어의 선택 항목을 input태그를 사용해 직접 입력하였지만, 사용자의 직접 입력 방식과 오타문제 등 UX의 불편함이 발생하여 button태그로 리팩토링 진행
• 선택된 가위 바위 보 정보 가져오기 위해 peopleRspArray 배열에 저장하는 아래의 함수 추가

function getRSP() {
  const selectsArray = document.querySelectorAll(".select-box");
  selectsArray.forEach((selects, idx) => {
    selects.querySelectorAll(".selected").forEach((selected, value) => {
      selected.addEventListener("click", () => {
        peopleRspArray[idx] = value;
      });
    });
  });
}

2. 이미지 겹침

• 배경 이미지가 사람 이미지와 겹치는 문제가 있었으나 z-index property를 사용해 stack level을 만들어줌으로써 해결함

😀 느낀 점

• 김민선 : 팀 프로젝트를 하면서 깃허브로 협업을 하는 절차에 대해 간략히 배우게 되었습니다.
  아직 모르는 부분이 많지만 서로 협업하고 구글링 하면서 html, css, js에 익숙해져 좋았습니다.

• 이규리 : 깃허브를 처음 사용해봤는데 프로그래밍 협업하기 좋은 툴인 것 같습니다. 빨리 익숙해져서 팀프로젝트를 할 때 유용하게 사용하고 싶습니다.
  웹서비스를 만드는 게 쉽지 않았습니다. HTML에서 중첩이 생각보다 많이 필요했고 간단하다고 생각한 기능도 구현하는 것은 간단하지 않았습니다. 더 연습해서 실력을 높이고 싶습니다.

• 송원섭 : 처음 팀으로 진행했던 프로젝트라 재미있게 참여할 수 있었습니다.
  서로 모르는 부분, 알고있는 부분을 공유하며 한단계 더 성장할 수 있었던 기회였습니다. (깃, 깃허브 사용법 등)

• 김유은 : 팀원들과 서로 의견을 공유하며 같이 하루 종일 웹사이트를 개발해나가는 과정이 재밌었습니다.
  아직 자바스크립트 문법과 알고리즘에 대한 깊은 이해는 부족하다는 것을 느껴 더 많이 공부해야겠다고 다짐하게 되었습니다.