반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

taenyLog

유데미 웹개발 부트캠프 2023 | section 26 : 점수 관리자 제작하기(feat. Bulma) 본문

Web

유데미 웹개발 부트캠프 2023 | section 26 : 점수 관리자 제작하기(feat. Bulma)

taenyLog 2023. 6. 13. 02:26
반응형

section 26 : 점수 관리자 제작하기

 

부트스트랩말고 불마를 사용하여 제작해보았음.

 

기본 게임은 3점 내기로 설정했음.

player1 , player2  둘 중 먼저 승점을 내면 이긴 사람의 점수는 초록색 진사람은 빨간색으로 표시된다.

또한 승패가 결정되면 player1과 player2의 +1 버튼 클릭이 안되게 만들었음. 

reset버튼 클릭시 처음과같은 상태로 돌아온다

버튼이 활성화되고  점수 표시도 검정색으로 돌아옴.

 

 

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
    />
  </head>
  <body>
    <!-- 공백을 넣기위해 bulma section요소를 사용했다. -->
    <section class="section">
      <div class="container">
        <div class="columns">
          <!-- 화면상 중앙에 놓여진다 -->
          <div class="column is-half is-offset-one-quarter">
            <div class="card">
              <div class="card-image">
                <figure class="image is-2by1">
                  <img
                    src="https://images.unsplash.com/photo-1534158914592-062992fbe900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3784&q=80"
                    alt=""
                  />
                </figure>
              </div>
              <header class="card-header">
                <p class="card-header-title">Ping Pong Score Keeper</p>
              </header>
              <div class="card-content">
                <h1 class="title is-1">
                  <span id="p1Display">0</span>to<span id="p2Display">0</span>
                </h1>
                <p class="subtitle">Use the button below to keep score</p>
                <label for="playto" class="label is-large is-inline"
                  >Playing To</label
                >
                <div class="select is-rounded">
                  <select name="" id="playto">
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                  </select>
                </div>
              </div>
              <footer class="card-footer">
                <button
                  id="p1Button"
                  class="is-primary button card-footer-item is-large"
                >
                  +1 player one
                </button>
                <button
                  id="p2Button"
                  class="is-info button card-footer-item is-large"
                >
                  +1 player two
                </button>
                <button
                  id="reset"
                  class="is-danger button card-footer-item is-large"
                >
                  reset
                </button>
              </footer>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="app.js"></script>
  </body>
</html>

 

 

app.js

const p1Button = document.querySelector("#p1Button");
const p2Button = document.querySelector("#p2Button");
const resetButton = document.querySelector("#reset");
const p1Display = document.querySelector("#p1Display");
const p2Display = document.querySelector("#p2Display");
const winningScoreSelect = document.querySelector("#playto");

let p1Score = 0;
let p2Score = 0;
let winningScore = 3;
let isGameOver = false;

p1Button.addEventListener("click", function () {
  if (!isGameOver) {
    // 게임을 아직 하고있다면
    p1Score += 1;
    if (p1Score === winningScore) {
      isGameOver = true;
      p1Display.classList.add("has-text-success");
      p2Display.classList.add("has-text-danger");
      p1Button.disabled=true;
      p2Button.disabled=true;
    }
    p1Display.textContent = p1Score;
  }
});

p2Button.addEventListener("click", function () {
  if (!isGameOver) {
    // 게임을 아직 하고있다면
    p2Score += 1;
    if (p2Score === winningScore) {
      isGameOver = true;
      p2Display.classList.add("has-text-success");
      p1Display.classList.add("has-text-danger");
      p1Button.disabled=true;
      p2Button.disabled=true;
    }
    p2Display.textContent = p2Score;
  }
});

// winningScoreSelect.addEventListener('change', function(){
//   winningScore = parseInt(this.value);
// })

winningScoreSelect.addEventListener("change", function () {
  winningScore = parseInt(this.value);
  reset();
});

resetButton.addEventListener("click", reset);

function reset() {
  // p1, p2의 점수와 디스플레이 모두 0으로 리셋
  isGameOver = false;
  p1Score = 0;
  p2Score = 0;
  p1Display.textContent = 0;
  p2Display.textContent = 0;
  p2Display.classList.remove("has-text-success", "has-text-danger");
  p1Display.classList.remove("has-text-success", "has-text-danger");
  p1Button.disabled=false;
  p2Button.disabled=false;
}

 

 

 

반응형

'Web' 카테고리의 다른 글

비동기식 JavaScript  (0) 2023.06.13
유데미 웹개발 부트캠프 2023 | section 26 : 점수 관리자 제작하기(feat. Bulma) / 코드 리팩토링  (1) 2023.06.13
Bulma사용하기  (0) 2023.06.11
유데미 웹개발 부트캠프 2023 | section 26 : 점수 관리자 제작하기  (0) 2023.06.11
chatGPT에게 코드를 짜달라고 부탁했는데 잘못된 코드를 줬다며 사과했다.  (0) 2023.06.09
'Web' Related Articles more