html에 쓰여진 복잡한 클래스들의 구조는 외부 css 파일을 가져와 그에 맞게 하느라 그럼.
그러니 핵심만 보도록 하자.코드 분해.
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');
리셋버튼과 최대 점수 버튼을 가져옴. (최대 점수 버튼은 2~11까지의 값을 select,option태그를 사용해서 고를 수 있게 만들었다.)
https://aboooks.tistory.com/303
let winningScore = 3;
let isGameOver = false;
기본의 점수를 3, 게임오버를 거짓으로 설정.
function updateScores(player, opponent) {
점수 추가 버튼을 누를 때마다 실행된다.
if (!isGameOver) {
게임이 진행 중일때.
player.score += 1;
점수를 1 추가.
if (player.score === winningScore) {
만약 승리점수를 채우게 된다면
isGameOver = true;
게임을 멈추고.
player.display.classList.add('has-text-success');
opponent.display.classList.add('has-text-danger');
출력창에서. 승자에게는 승리 클래스와 패자에게는 패배 클래스를 추가해줌.
그러면 승자에게는 녹색, 패자는 적색을 띔 이는 cdn으로 가지고 온 css와 연결되어 클래스에 맞게 색이 할당되어서 그렇다. (href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">)
player.button.disabled = true;
opponent.button.disabled = true;
그리고 점수 버튼을 비활성화 함으로 무의미한 점수 추가를 막음.
}
player.display.textContent = player.score;
출력창의 점수에 현 점수를 전달.
}
}
p1.button.addEventListener('click', function () {
updateScores(p1, p2)
})
p2.button.addEventListener('click', function () {
updateScores(p2, p1)
})
클릭시 위의 함수 실행, 인자는 둘의 점수.
winningScoreSelect.addEventListener('change', function () {
winningScore = parseInt(this.value);
reset();
})
점수 선택에 있어서. 요소변경이 끝나면 나오는 change 이벤트를 활용. parseint를 사용해 입력받은 문자를 정수로 반환하여 winningscore에 넘기고 reset을 실행(이전의 값을 리셋.)
resetButton.addEventListener('click', reset)
리셋 버튼을 누르면 바로 리셋 실시.
function reset() {
isGameOver = false;
게임이 끝나지 않도록 하고.
for (let p of [p1, p2]) {
p.score = 0;
p.display.textContent = 0;
둘의 점수를 0으로 초기화
p.display.classList.remove('has-text-success', 'has-text-danger');
출력창의 클래스를 초기화해서 색을 원래대로 바꾼다.
p.button.disabled = false;
꺼진 버튼도 다시 킨다.
}
}
