갱동구리

Be brave.

[javascript] 탁구 점수 관리 프로그램

업데이트:     Updated:

카테고리:

태그:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .winner {
            color: green;
        }
        .loser {
            color: red;
        }
    </style>
</head>
<body>
    <h1><span id="p1Display">0</span> to <span id="p2Display">0</span></h1>

    <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>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
    </select>
    <button id="p1Button">+1 Player One</button>
    <button id="p2Button">+1 Player Two</button>
    <button id="reset">Reset</button>

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

app.js

const p1 = {
  score: 0,
  button: document.querySelector("#p1Button"),
  display: document.querySelector("#p1Display"),
};

const p2 = {
  score: 0,
  button: document.querySelector("#p2Button"),
  display: document.querySelector("#p2Display"),
};

const resetButton = document.querySelector("#reset");
const winningScoreSelect = document.querySelector("#playto");
let winningScore = 3;
let isGameOver = false;

function updateScores(player, opponent) {
  if (!isGameOver) {
    player.score += 1;
    if (player.score === winningScore) {
      if (player.score - opponent.score >= 2) {
        isGameOver = true;
        player.display.classList.add("winner");
        opponent.display.classList.add("loser");
        player.button.disabled = true;
        opponent.button.disabled = true;
      } else {
        winningScore += 1;
      }
    }
    player.display.textContent = player.score;
  }
}

p1.button.addEventListener("click", () => {
  updateScores(p1, p2);
});
p2.button.addEventListener("click", () => {
  updateScores(p2, p1);
});

winningScoreSelect.addEventListener("change", (event) => {
  winningScore = parseInt(event.target.value);
  reset();
});

resetButton.addEventListener("click", reset);

function reset() {
  isGameOver = false;
  for (let p of [p1, p2]) {
    p.score = 0;
    p.display.textContent = 0;
    p.display.classList.remove("winner", "loser");
    p.button.disabled = false;
  }
}

📌출처

유데미 The Web Developer 부트캠프 2023

👍 개인 공부 기록용 블로그입니다. 오류나 조언이 있으시면 언제든지 댓글 혹은 메일로 남겨주시면 감사하겠습니다! 😄

맨 위로 이동하기

javascript 카테고리 내 다른 글 보러가기

첫 번째 글입니다 가장 최근 글입니다

댓글남기기

최근 글 10 개 :)