ToyProject #01 가위바위보 게임

Recent Posts

Recent Comments

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Today

Total

관리 메뉴

DH의 개발 공부로그

ToyProject #01 가위바위보 게임 - 1 본문

프로젝트

ToyProject #01 가위바위보 게임 - 1

DeveloperDH 2022. 7. 29. 00:07

728x90

포트폴리오 작업과 자바스크립트 공부를 병행하면서 머리가 아프고 집중력이 떨어져서 갑자기 토이 프로젝트나 한번 만들까라는 생각과 함께 바로 작업을 하였습니다.

우선 기초는 작업을 다 했지만 디자인과 가위바위보 이미지도 임시로 넣어둔 이미지라 변경 예정이며, 아직 수정할 부분이 많은 프로젝트지만 기록을 남기고 싶어서 이렇게 작성합니다.

방식은 가위바위보를 선택하면 컴퓨터가 랜덤으로 가위바위보를 선택하여 승부하는 게임으로 작업했습니다.

1. HTML 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>가위바위보 게임</title>
    <!-- reset css -->
    <link rel="stylesheet" href="./css/minireset.css">
    <!-- style css -->
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <section class="game">
      <div class="game__head">
        <h1 class="game__title">가위바위보 게임을 해보아요😊</h1>
      </div>

      <div class="game__container">
        <ul class="game__score">
          <li>
            <h2>My Point</h2>
            <p class="game__point game__point--my">0</p>
          </li>
          <li>
            <h2>Your Point</h2>
            <p class="game__point game__point--your">0</p>
          </li>
          <li class="game__right">
            <button type="button" class="game__reset">reset</button>
          </li>
        </ul>

        <div class="game__body">
          <div class="game__item game__item--my">
            <div class="game__img"></div>
            <p class="game__txt"></p>
          </div>
          <div class="game__item game__item--your">
            <div class="game__img"></div>
            <p class="game__txt"></p>
          </div>
        </div>

      </div>
      <div class="game__btn-wrap">
        <button class="game_btn game_scissors">가위</button>
        <button class="game_btn game__rock">바위</button>
        <button class="game_btn game__paper">보</button>
      </div>

    </section>
    <script src="./main.js"></script>
  </body>
</html>

html 코드는 이렇게 작성을 하였습니다. bem 네이밍 방식을 공부하고 있고, 아직 부족한게 많지만 이번 프로젝트에 적용하고 싶어서 bem 방식으로 작업했습니다.

2. JavaScript

2-1. 변수&상수 선언

const scissors = document.querySelector('.game_scissors');
const rock = document.querySelector('.game__rock');
const paper = document.querySelector('.game__paper');
const myImg = document.querySelector(".game__item--my .game__img");
const yourImg = document.querySelector(".game__item--your .game__img");
const myImgText = document.querySelector(".game__item--my .game__txt");
const yourImgText = document.querySelector(".game__item--your .game__txt");
const myPoint = document.querySelector(".game__point--my");
const yourPoint = document.querySelector(".game__point--your");
const resetBtn = document.querySelector(".game__reset");

let selectIndex = 0;
let randomIndex = 0;

const imglist = [
  {
    name : "scissors",
    url : "url(./images/scissors.png)"
  },
  {
    name : "rock",
    url : "url(./images/rock.png)"
  },
  {
    name : "paper",
    url : "url(./images/paper.png)"
  }
]

가위바위보를 선택해 화면에 보여줄 이미지와 텍스트는 배열과 객체로 작업을 하였고, 나와 컴퓨터 각각 인덱스 번호를 저장하기 위해 변수를 선언해 주었습니다.

2-2. addEventListener

scissors.addEventListener("click", gameStart);
rock.addEventListener("click", gameStart);
paper.addEventListener("click", gameStart);

이벤트는 addEventListener를 이용하여 작업했습니다.

2-3. 가위바위보 선택

const gameStart = (e) => {
  const target = e.target;

  yourImg.style.backgroundImage = "none"

  switch(target.textContent) {
    case "가위" :
      myImg.style.backgroundImage = imglist[0].url
      myImgText.textContent = imglist[0].name
      selectIndex = 0;
      break;
    case "바위" :  
      myImg.style.backgroundImage = imglist[1].url
      myImgText.textContent = imglist[1].name
      selectIndex = 1;
      break;
    case "보" :  
      myImg.style.backgroundImage = imglist[2].url
      myImgText.textContent = imglist[2].name
      selectIndex = 2;
      break;
  }

  setTimeout(randomImg, 300);
}

이번에는 switch문을 이용하였고, 선택한 e.target을 변수에 지정해 텍스트를 확인하여 이미지 배열에서 해당 이미지를 가져오게끔 작업하였습니다.

2-4. callback 함수

function compareSelect () {
  if(selectIndex === 0 && randomIndex === 2 || 
    selectIndex === 1 && randomIndex === 0 || 
    selectIndex === 2 && randomIndex === 1) {
    myPoint.textContent = Number(myPoint.textContent) + 1;

  } else if(selectIndex === 0 && randomIndex === 1 || 
    selectIndex === 1 && randomIndex === 2 || 
    selectIndex === 2 && randomIndex === 0) {
      yourPoint.textContent = Number(yourPoint.textContent) + 1;
  }
}

function randomImg () {
  const randomNum = Math.trunc(Math.random() * 3);

  yourImg.style.backgroundImage = imglist[randomNum].url;
  yourImgText.textContent = imglist[randomNum].name;

  randomIndex = randomNum;

  compareSelect()
}

가위바위보를 선택하고 컴퓨터가 선택할 수 있도록 함수 randomImg()를 만들었는데 여기선는 Math.trunc() 메서드와 Math.random()를 이용하여 랜덤 숫자를 소숫점 없이 불러오도록하였고, compareSelect()함수를 다시 콜백하여 각각 저장해둔 인덱스를 비교하도록 하여 score를 보여주도록 하였습니다.

2-5. Reset 버튼

resetBtn.addEventListener("click", () => {
  myPoint.textContent = 0;
  yourPoint.textContent = 0;
})

리셋 버튼을 클릭하면 해당 점수가 초기화되는 방식으로 작업하였습니다.