이재호
간단한 스코어 게임 만들기 본문
5점을 먼저 내면 이기는 간단한 스코어 게임을 만들어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<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>make winner game </title>
<style>
.winner {
color: green
}
.lose {
color: red;
}
</style>
</head>
<body>
<h1><span id="disp1"> 0 </span> to <span id="disp2"> 0 </span></h1>
<select name="" id="selScor">
<option value="1">1</option>
<option value="2">2</option>
<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>
</select>
<button id="p1btn">player 1</button>
<button id="p2btn">player2</button>
<button id="resetBtn">reset</button>
<script src="./app.js"></script>
</body>
</html>app.js
const disp1 = document.querySelector('#disp1')
const disp2 = document.querySelector('#disp2')
const p1btn = document.querySelector('#p1btn')
const p2btn = document.querySelector('#p2btn')
const resetbtn = document.querySelector('#resetBtn')
const selbtn = document.querySelector('#selScor')
// 카운터 증가
let p1cnt = 0
let p2cnt = 0
let winnerScore = 5
// 게임 추척
let isGameOver = false
// p1
p1btn.addEventLisner('click', ()=>{
// 게임을 진행하고 있으면
if(!isGameOver){
// 1씩증가
p1cnt += 1
// 만약 p1 스코어가 5점과 같다면
if(p1cnt === winnerScore){
// 게임이 끝났으니 스코어 증가 종료
isGameOver = true
// 스타일 클래스 부여 이긴사람은 녹색, 진사람은 빨간색
disp1.classList.add('winner')
disp2.classList.add('lose')
}
// 스코어 화면에 점수 출력
disp1.textCotent = p1cnt
}
})
// p2
p2btn.addEventLisner('click', ()=>{
// 게임을 진행하고 있으면
if(!isGameOver){
// 1씩증가
p2cnt += 1
// 만약 p1 스코어가 5점과 같다면
if(p2cnt === winnerScore){
// 게임이 끝났으니 스코어 증가 종료
isGameOver = true
// 스타일 클래스 부여 이긴사람은 녹색, 진사람은 빨간색
disp2.classList.add('winner')
disp1.classList.add('lose')
}
// 스코어 화면에 점수 출력
disp2.textCotent = p1cnt
}
})
// 이길수 있는 스코어 점수를 선택할수 있는 select 버튼
selbtn.addEventLisner('change', function(){
// 이기는 스코어는 셀렉트의 선택되는값
// 화살표 함수를 사용하면 window를 바라보기떄문에 일반함수를 사용해야함
winnerScore = parseInt(this.value)
})
// 함수로 뺴서 로직을 작성
const reset = () => {
p1cnt = 0
p2cnt = 0
disp1.textContent = ''
disp2.textContent = ''
dsip1.classList.remove('winner', 'lose')
dsip2.classList.remove('winner', 'lose')
}
// 점수를 초기화 할수 있는 reset 버튼
resetbtn.addEventLisner('click', reset)
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 클로저 예제 (0) | 2023.02.18 |
|---|---|
| XMLHttpRequest(XHR) VS Fetch VS Axios (0) | 2023.02.17 |
| 간단한 폼 리스트 만들기 (0) | 2023.02.14 |
| 랜덤색깔 버튼 만들기 (0) | 2023.02.13 |
| Dom을 이용해서 포켓몬 도감 만들기 (0) | 2023.02.13 |
'프론트엔드/자바스크립트' Related Articles
more
