이재호

간단한 스코어 게임 만들기 본문

프론트엔드/자바스크립트

간단한 스코어 게임 만들기

호재이 2023. 2. 15. 13:09

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