반응형
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 : 점수 관리자 제작하기 본문

Web

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

taenyLog 2023. 6. 11. 09:39
반응형

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

 

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>

  <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>
  </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 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('winner');
      p2Display.classList.add('loser');
    }
    p1Display.textContent = p1Score;
  }

})

p2Button.addEventListener('click',function(){
  if(!isGameOver){ // 게임을 아직 하고있다면
    p2Score +=1;
    if(p2Score === winningScore){
      isGameOver = true;
      p2Display.classList.add('winner');
      p1Display.classList.add('loser');
    }
    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('winner','loser');
  p1Display.classList.remove('loser','winner');
}

winningScore=3으로 지정함으로써 기본값은 3이다.

 

 

p1과 p2의 점수를 0으로 설정하고 플레이어1 버튼 클릭시 p1의 점수가 1올라간다. 

reset 버튼 클릭시 초기의 상태가됨

 

3점으로 p1이 이길경우 초록색, 진사람은 빨간색으로 표시됨.

 

 

reset버튼 클릭시 원상태로 색깔과 점수가 기본값으로 돌아옴

반응형

'Web' 카테고리의 다른 글

유데미 웹개발 부트캠프 2023 | section 26 : 점수 관리자 제작하기(feat. Bulma)  (0) 2023.06.13
Bulma사용하기  (0) 2023.06.11
chatGPT에게 코드를 짜달라고 부탁했는데 잘못된 코드를 줬다며 사과했다.  (0) 2023.06.09
getElementById와 querySelector 의 차이를 chatGPT에게 물어봤다  (0) 2023.06.09
JavaScript this  (0) 2023.06.02
'Web' Related Articles more