가위, 바위, 보 개인 미니 프로젝트(걸린 시간 4일)

Ch's Lee 2025. 7. 7. 18:19

let meNumber = 0;
let youNumber = 0;

function me(what) {
  // 나
  let meResult = document.getElementById("me-result");
  console.log(what);
  if (what == 0) {
    meResult.style.backgroundImage = "url(../one/CSS/images/rock.png)";
  } else if (what == 1) {
    meResult.style.backgroundImage = "url(../one/CSS/images/scissors.png)";
  } else {
    meResult.style.backgroundImage = "url(../one/CSS/images/paper.png)";
  }

  // 상대방
  const rand_0_3 = Math.floor(Math.random() * 3);
  let youResult = document.getElementById("you-result");
  console.log(rand_0_3);
  if (rand_0_3 == 0) {
    youResult.style.backgroundImage = "url(../one/CSS/images/rock.png)";
  } else if (rand_0_3 == 1) {
    youResult.style.backgroundImage = "url(../one/CSS/images/scissors.png)";
  } else {
    youResult.style.backgroundImage = "url(../one/CSS/images/paper.png)";
  }

  let youWinAndFail = document.getElementById("youWinAndFail");
  let meWinAndFail = document.getElementById("meWinAndFail");
  let middleWinAndFail = document.getElementById("middleWinAndFail");

  let small_Meresult = document.getElementById("small_Meresult");
  let small_Youresult = document.getElementById("small_Youresult");

  /*
   * 2025-07-08에 경우의 수 문제 발생하여 다음과 같이 수정함
   */

  if (what === rand_0_3) {
    // 0, 0 | 1, 1 | 2, 2 경우
    youWinAndFail.innerText = "";
    meWinAndFail.innerText = "";
    middleWinAndFail.innerText = "무승부";
  } else if ((rand_0_3 - what + 3) % 3 === 1) {
    // 내가 이긴 경우
    meWinAndFail.innerText = "승";
    youWinAndFail.innerText = "패";
    middleWinAndFail.innerText = "";
    small_Meresult.innerText = ++meNumber;
  } else {
    // 상대가 이긴 경우
    meWinAndFail.innerText = "패";
    youWinAndFail.innerText = "승";
    middleWinAndFail.innerText = "";
    small_Youresult.innerText = ++youNumber;
  }
}

<html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game</title>
    <script type="text/javascript" src="game.js"></script>
    <link rel="stylesheet" href="game.css" />
  </head>
  <body>
    <div id="mainContainer">
      <table>
        <h2>가위, 바위, 보 게임</h2>
        <tr>
          <th>나(<small id="small_Meresult">0</small>)횟수</th>
          <th>VS</th>
          <th>상대방(<small id="small_Youresult">0</small>)횟수</th>
        </tr>
        <tr>
          <td><input id="me-result" type="button" value="" /></td>
          <td id="resultPart">
            <span id="meWinAndFail"></span>
            <span id="middleWinAndFail"></span>
            <span id="youWinAndFail"></span>
          </td>
          <td><input id="you-result" type="button" value="" /></td>
        </tr>
        <tr>
          <td>
            <input id="img-rock" type="button" value="" onclick="me(0)" />
          </td>
          <td>
            <input id="img-scissors" type="button" value="" onclick="me(1)" />
          </td>
          <td>
            <input id="img-paper" type="button" value="" onclick="me(2)" />
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

<css>


/* 전체 컨테이너 높이넓이 밑 가운데로 정렬하기 */
#mainContainer {
  height: 700px;
  width: 100%;
  justify-items: center;
  align-content: center;
}

/* 사용자 선택을 위한 바위이미지 스타일 주기  */
/* 알게된 것 
    - 손가락 모양주려면, cursor
    - 스타일을 주지 않으려면, none
*/
#img-rock {
  background: url("../one/CSS/images/rock.png");
  width: 180px;
  height: 180px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none; 
  outline: none; 
  cursor: pointer;
  padding: 0; 
}

/* 사용자 선택을 위한 가위이미지 스타일 주기  */
#img-scissors {
  background: url("../one/CSS/images/scissors.png");
  width: 180px;
  height: 180px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none; 
  outline: none; 
  cursor: pointer;
  padding: 0; 
}

/* 사용자 선택을 위한 보이미지 스타일 주기  */
#img-paper {
  background: url("../one/CSS/images/paper.png");
  width: 180px;
  height: 180px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none; 
  outline: none; 
  cursor: pointer;
  padding: 0; 
}

/* 나의 결과 표시창 */
#me-result {
  width: 180px;
  height: 180px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none; 
  outline: none; 
  cursor: pointer;
  padding: 0; 
}

/* 상대방(CPU) 결과 표시창 */
#you-result {
  width: 180px;
  height: 180px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none; 
  outline: none; 
  cursor: pointer;
  padding: 0;
}

/* 결과창 */
td#resultPart {
  position: relative;
  display: flex;
  width: 180px;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  top: 60px;
}

경우의 수 저리

(상대방 값 - 나의 값 + 3) % 3 했을 시.. 1인 경우 내가 이긴것 / 2인 경우 상대방이 이긴 것....

핵심

HTML

<td id="resultPart">
    <span id="meWinAndFail"></span>
    <span id="middleWinAndFail"></span>
    <span id="youWinAndFail"></span>
</td>

CSS

/* 결과창 */
td#resultPart {
  position: relative; 
  display: flex;
  width: 180px;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  top: 60px;
}

[핵심]absolute는 부모 기준이지만, relative는 부모 요소로부터 상대적입니다. 즉, 자체영역을 기준으로
배치가 된다는 거죠!!

- 예를 먹었던 부분이 있습니다. width와 height를 주지 않고, 계속해서 밑에 2개의 
스타일을 주었습니다.

justify-content: space-between;
align-items: center;

하지만, 먹지 않더군요. 왜냐? 해당 먹히고는 있는데, 해당 공간의 넓이와 높이가 없어서 제대로 반영
이 안되고 있었던겁니다. 공간이 없는데, 당연하죠!!

그리고, display: flex를 두어 span 3개를 세로가 이닌, 가로로 주도록했습니다.

위 css에서 아주 중요한 개념을 알게 되었습니다.

빨간 부분인데요

결과 동영상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.